Customising Contact Form And Field Appearance

A contact form has two basic parts: a frame plus one or more fields. The frame gives the contact form structure. The fields collect different types of information, such as text or numbers.

This article shows you how to customise the appearance of individual fields by modifying their respective Settings panels.

This procedure assumes you have created a contact form on a webpage. If you have not placed a contact form on a webpage, see Adding a Contact Form.

If you want to modify the appearance of the contact form structure, see

• Customising a Contact Form

1  Working with Settings

To create a contact form, drag the Form component from the left side of the screen to a webpage. After placing the component on the webpage, you'll notice two changes on the screen:

• a basic contact form with default fields
• a list of form elements appears on the left side of the screen

You can customise how your form works (and what data it collects) by adding different elements. The appearance of each element can be customised after it has been placed inside a form. You change the appearance of each element by customising the options in the Settings panel.

Most form elements have the same six options in their Settings panel. These are called Common Settings. Some form elements have unique controls. The six Common Settings are described below in Step 2.

These form elements have unique controls, which are described below.

• Text Area
• Select
• Checkbox
• Radio
• Date
• Consent
• Hidden
• Columns
• Divider
• Spacer

2  Customising Common Settings

To change the appearance of an element on a contact form, open the Settings panel.

1. Drag an element to the contact form.
2. Hover the mouse pointer on the element. The toolbar displays.
3. Click the round Settings button on the top left corner. The Settings panel appears.

Most form elements have six common options in the Settings panel, as shown below.

1. Label - Enter a unique name for the input field. Optionally, click the translator icon to display a language based on locale.
2. Description - This optional text appears between the Label and the input field. Optionally, click the translator icon to display a language based on locale.
3. Placeholder - Place text (e.g. instructions) inside the input field. This text disappears as soon as a reader enters data. Optionally, click the translator icon to display a language based on locale.
4. Hide Label - Check the box to remove the Label. Uncheck the box to make the label visible.
5. Required - Check the box to make input for the field mandatory. The form cannot be submitted if this field is empty. Fields marked Required have an asterisk. Uncheck the box to make input for this field optional.
6. Advanced - For information about ID or Class Name, see Adding CSS. For information about component visibility, Customising Component Visibility.

3  Configuring Text Area Settings

The Text Area Component gives readers an input field to write a short message. This field has one unique display option: adjust the height of the field by changing the Line Count. Click the plus (+) or minus (-) boxes to increase or decrease the height of the text area. The maximum height is 20.

4  Configuring Select Settings

The Select Component adds a drop-down menu with three menu items. Readers select one item. Customise the three menu items.

1. Hover the mouse pointer on the Select Component. The toolbar displays. Click the Settings button in the toolbar.
2. Click the Options tab. The Options panel displays with placeholder text: Option One, Option Two, and Option Three.
3. Write your unique menu text over the placeholder text.
4. Click OK to close the panel.

5  Configuring Checkbox Settings

The Checkbox Component shows two checkboxes. Readers select one or both options. Customise the two choices.

1. Hover the mouse pointer on the Checkbox Component. The toolbar displays. Click the Settings button in the toolbar.
2. Click the Options tab. The Options panel displays with placeholder text: Option One and Option Two.
3. Write your unique menu text over the placeholder text.
4. Click OK to close the panel.

6  Configuring Radio Settings

The Options Component shows two radio circles. Readers select only one circle. Customise the two choices.

1. Hover the mouse pointer on the Options Component. The toolbar displays. Click the Settings button in the toolbar.
2. Click the Selections tab. The Selections panel displays with placeholder text: Option One and Option Two.
3. Write your unique menu text over the placeholder text.
4. Click OK to close the panel.

7  Configuring Date Settings

The Date Component has several unique customisation options.

1. Hover the mouse pointer on the Date Component. The toolbar displays.
2. Click the Settings button in the toolbar.
3. Scroll down to Calendar Settings.

• Chinese Calendar - Check the box to display a calendar with the names of months in Chinese.
• Disable Weekends - Check the box to prevent readers from selecting Saturdays or Sundays on the calendar.
• Theme - Choose the background colour of the calendar: light or dark.
• Custom Date Range - Set a time period for an event or action.

1. Click the Min and Max dates to open a calendar.
2. Click the calendar to set a start and finish date. When a reader clicks the Date field on a form, all dates are blocked except for the Min to Max period.
3. Click OK to close the panel.

To remove a date range, click the Min and Max dates and select Disabled.

8  Configuring Data Consent Settings

Insert the Data Consent element when you want the reader to verify he or she agrees to a statement. You might, for example, require readers to check the Consent box to indicate they agree to you storing personal data.

1. Hover the mouse pointer on the Data Consent element. The toolbar displays.
2. Click the Settings button in the toolbar. The Settings panel displays.
3. Scroll down to the Text line. Enter the statement you wish to display on the form.
4. Check the box if you want to exclude consent data from the form submission data.
5. Click OK to close the panel.

A consent element on an active form might look like this:

9  Configuring Hidden Settings

Use this field to add tracking code to the form. 

10  Configuring Columns Settings

You can place columns on a contact form. Columns can add content, like images, or design elements, like background colours. For information, see Adding Columns.

11  Configuring Divider Settings

A divider is a design feature. It can separate elements on the contact form and improve readability. For more information about dividers, see Customising Divider Style.

12  Configuring Spacer Settings

A spacer is a design feature. It can separate elements and improve readability. In draft form, the spacer appears with diagonal lines. Once published, the spacer displays white space without lines. For more information about dividers, see Adding Spacers.