Experiencing an issue?

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:

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

 

  

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 appears with 2 fields
  • a list of form elements appears on the left side of the screen

 

form-11d.png

 

You can customise the way 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 6 options in their Settings panel. These are called Common Settings. Some form elements have unique controls. The 6 Common Settings are described below in Step 2.

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

 

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 appears.
  3. Click the round Settings button on the top left corner. The Settings panel appears.

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

 

form-label1h.png

 

1 Label

Enter a unique name for the input field.

 

2 Description

This optional text appears between the Label and the input field.

 

3 Placeholder

Place text (e.g. instructions) inside the input field. This text disappears as soon as a reader enters data.

 

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 Translations

Use the Translate button to add Simplified Chinese text. The translate option is available for:

  • label
  • descriptions
  • placeholders


form-label2c.png

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 Line Count.

Line Count

Click the plus (+) or minus (-) boxes to increase or decrease the height of the text area. The maximum height is 20.


text-area-1ac.png

 

4  Configuring Select Settings

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

Customise the 3 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.

 

select-options-a1.png

 

5  Configuring Checkbox Settings

The Checkbox Component shows 2 checkboxes. Readers select one or both options. 

Customise the 2 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.

 

checkbox-1ab.png

 

6  Configuring Radio Settings

The Radio Component shows 2 circles. Readers select only one button.  

Customise the 2 choices.

  1. Hover the mouse pointer on the Radio 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.

 

checkbox-1ab.png

 

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.


date-set-1d.png

 

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.

 

date-set2b.png

 

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.

 

 

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.

 

consent-1aa.png

 

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

consent-2a.png

 

9  Configuring Hidden Settings

Use this field to add tracking code to the form. 

 

hidden-1a.png 

 

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:

  column-1.png

 

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:

divider-1.png

 

 

12  Configuring Spacer Settings

A divider 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:

 

spacer-1.png