Bottom Bar

About the Bottom bar

The Bottom bar is the grey bar in the bottom while you're in the Forms Editor.

Here's all you need to know about all the options available in the Bottom bar.

bottomBar1.jpg

 

Continue scrolling in this article to learn more, or click on a heading on the left side navigation to jump to a specific part.

 


 

Previous step

Click the Previous step button in the Bottom bar to go back to the Activity Page.

Your activity will be saved automatically, and will appear under Drafts.

bottomBar2.jpg

 


 

Settings

While in the Editor, open the Settings by clicking Settings on the Bottom bar.

You'll see both Design and Validation Settings.

bottomBar4.jpg 

 

 

Design Settings

bottomBar7.jpg

 

Click an item below to expand:

Width

Email Width

Adjust your activity's width by entering a measurement in pixels under Form Width (px).

Design3_02.jpg

 

Body

Body Colour

To make the body colour transparent, click the X icon next to the colour code. The colour preview will be a white circle crossed with a red line.

Design3.jpg

 

Adjust the colour of the body by clicking the circle next to colour to open the colour picker.

Design2.jpg

 

Use the colour picker to choose a colour.

If you already have a standard colour, enter the colour code in the Hex box. Go ahead and enter the colour in RGB format if that's the method you prefer. The colour picker will save 16 of your recently used colours for each activity. Every new activity will have no recently used colours, but the colours will remain for each activity whenever you go back into editing.

colourPicker.jpg

 

Background

Background Colour

Adjust the colour of the background by clicking the circle next to colour to open the colour picker.

8_03.jpg

 

Use the colour picker to choose a colour for the background.

If you already have a standard colour, enter the colour code in the Hex box. Go ahead and enter the colour in RGB format if that's the method you prefer. The colour picker will save 16 of your recently used colours for each activity. Every new activity will have no recently used colours, but the colours will remain for each activity whenever you go back into editing.

colourPicker.jpg

 

Border

Border Width & Radius

Adjust the thickness of the border by dragging the Width slider right for a higher measurement and left for a lower measurement.

The radius of the border will determine how round the corners will be. Drag the Radius slider right for a higher measurement and left for a lower measurement.

Design4.jpg

 

Border Colour

Adjust the colour of the border by clicking the circle next to colour to open the colour picker.

Design5.jpg

 

Use the colour picker to choose a colour for the border.

If you already have a standard colour, enter the colour code in the Hex box. Go ahead and enter the colour in RGB format if that's the method you prefer. The colour picker will save 16 of your recently used colours for each activity. Every new activity will have no recently used colours, but the colours will remain for each activity whenever you go back into editing.

colourPicker.jpg

 

 

Validation Settings

The Validation Settings of your Forms & Pages activity is only available if you've chosen to create a Form.

Here you can choose how the form will look and behave if the visitor doesn't complete a field, or enters information in an incorrect format (letters in a phone number, for example).

bottomBar8.jpg

 

Click an item below to expand:

Highlight missed field

Highlight missed field

Tick the Highlight missed field checkbox to change the colour of the input field that the visitor missed.

Adjust the colour of the missed field by clicking the circle next to colour to open the colour picker.

bottomBar9.jpg

 

Use the colour picker to choose a colour.

If you already have a standard colour, enter the colour code in the Hex box. Go ahead and enter the colour in RGB format if that's the method you prefer. The colour picker will save 16 of your recently used colours for each activity. Every new activity will have no recently used colours, but the colours will remain for each activity whenever you go back into editing.

colourPicker.jpg

 

Missed field

Missed field message

Under Message, enter the text you wish to display under the input field if the visitor doesn't fill it out before submitting your form.

bottomBar10.jpg

 

Note that this error message will only come up if you set it up as required, or in the event of the confirmation field not matching the original.

bottomBar14.jpg

 

Wrong format

Wrong format message

Under Message, enter the text you wish to display under the input field if the visitor enters information that doesn't match the format of your input field.

bottomBar11.jpg

 

Preview error messages

Preview error messages

Toggle Preview error messages to see in the Forms Editor how it looks like when visitors don't fill out your form correctly.

bottomBar12.jpg

 

To test it, simply click on the Input Field Element and recreate what an incorrect response would be directly in the editor, like letters in a number type for example.

bottomBar13.jpg

 

Note that the error message and styling will only come up if you set up the input field as required, or in the event of the confirmation field not matching the original.

bottomBar14.jpg 

 


 

Next Step

Click Next step to proceed with your activity. It will take you back to the Conversation Wizard.

bottomBar3.jpg 

 

Was this article helpful?