Experiencing an issue?

Customising a Contact Form

You can change the appearance of a contact form by making changes in the Form Component Settings panel.

A Form Component is a shell that contains different fields of information, such as a name or email address. Each field can be customised separately. This article describes how to customise the whole contact form (i.e. shell), not its individual fields.

For information about customising individual fields inside a contact form, see:

See also

To learn how to place a contact form on a webpage, see:

 

 

1  Opening the Contact Form Settings Panel

The Settings panel has 3 sets of controls: name, behaviour, and appearance.

  1. Click WEBSITE in the top-level menu. The Website Content page displays.
  2. Hover the mouse pointer over the webpage that has the contact form you want to customise. The toolbar displays.
  3. Click the Edit button. The webpage displays in the Edit Content area.
  4. Scroll to the contact form.
  5. Hover the mouse pointer over the contact form. The toolbar displays.
  6. Click the round Settings button in the top left corner the toolbar. The Form Settings panel opens.

 

form-7b.png

 

2  Changing the form name

The name in the Settings panel is the text you entered when the contact form was created. The contact form name is not visible to website visitors; it's a useful identifier.

  1. To change the contact form name, click the text.
  2. Type a new name.
  3. Click OK to save the new name.

 

3  Sending Email Notifications

Use the Form Submit panel to control what happens after a website visitor submits information via the contact form. 

If the Notified by Email box is checked, a notification message is sent to a limited number of email addresses each time a person submits information via the contact form. You can enter up to 5 email accounts.

To send an email notification:

  1. Click the Form Submit tab. A new panel opens.
  2. Scroll down the panel to the Notified by Email box.
  3. Check the Notified by Email box to send notifications and then enter up to 5 email addresses.
  4. Uncheck the box to stop notifications.
  5. Click OK to save.

  

form-submit-notified.jpg

 

The auto-generated email notification message looks like this:

 

email-4b.png

 

 

4  Enabling Advanced Options

There is one advanced option on the Form Submit Settings panel.

To send form data to a third party developer, check the Submit Form to an End Point box. For more information, contact your Sinorbis representative.

form-advanced.jpg

 

5  Sending Auto Response Messages

After a website visitor clicks the Submit button on a contact form, you can send a customised auto response reply. There are two reply options: a brief message that displays on the screen or a page redirect. One of these options must be selected.

  1. Scroll down to the bottom of the Form Submit panel.
  2. To display a message on a screen, check the Show Thank You Message tab.
  3. Use the standard Thank You! message or type a new message.
  4. Click the translator icon to change English text into Simplified Chinese script.
  5. To change the colour of the text in the message, click the colour box to open the colour picker. Select HEX, RGBA, or a customised branding colour.
  6. Click OK to save.

 

form-9d.png

 

Instead of sending a message, you can automatically direct visitors to a new webpage. This could be a page with information about an event or product, for example.

  1. Scroll down to the bottom of the Form Submit panel.
  2. Check the Redirect to Another Page tab.
  3. Enter a URL with the http:// or https:// prefix.
  4. Click OK to save.

 

form-10b.png

 

6  Setting Contact Form Width

Adjust the width of the contact form in pixels or as a percentage of the page display area.

 

form-width-2.png

 

 

7    Customising Contact Form Appearance

To customise the shape, position, and colour of a contact form, click the Form tab on the Settings panel.

 

form-form-1.png

 

Background

Set the background colour of the contact form, but not the colour of the data input fields. Choose one of your branding colours (if selected) or a colour from the palette.

For branding colour information, see:

 form-back-1a.png

 

Form Radius

Add rounded corners to the contact form. Click the plus (+) or minus (-) boxes. The higher the number, the rounder the corners.

 

Alignment

Adjust the horizontal position of content inside the Form Component: align to the left, centre, or right. These controls take effect if the contact form width is less than 100%.

 

Chinese Validation

Check this box if you want the contact form to provide a reminder when a field marked as Required is left blank by the website visitor. The reminder is below the field in Simplified Chinese.

 form-val-2b.png

Validation Color

Customise the colour of the Chinese validation text.

 

8  Customising Input Settings

Click the Input tab to control and standardize the appearance of input fields. Those fields include text, text area, and email.

form-form.png

 

Height

Set the height of input fields with a single line of data. Affected components include Text (but not Text Area), Email, Number, and Date.

 

Font Color

Set the text colour in the data input fields. Choose branding colours (if selected) or a colour from the palette.

 

Font Size

Set the text size in input fields as well as Radio and Checkbox options. Maximum font size is 40 px.

 

Font

Select the font family for Simplified Chinese and English.

 

Alignment

Adjust the horizontal position of content inside data input fields: align to the left, centre, or right.

 

Background Color

Set the background colour of input fields, but not the colour of the contact form. Choose your branding colours (if selected) or a colour from the palette.

 form-back-field-1a.png

Flat Border

Check the box to place a border on the bottom portion of input fields. Uncheck the box to display a border around the entire perimeter of input fields.

 

flat-border-1.png

 

Border Color

Set the border colour on input fields. Choose branding colours (if selected) or a colour from the palette.

 

Border Radius

Add rounded corners to input fields. Click the plus (+) or minus (-) boxes. The higher the number, the rounder the corners.

 

Margins

Adjust the Top-Bottom (T-B) or Left-Right (L-R) margins of input fields. Margins are the space between the outside edge of an input field and an adjacent field or inside wall of the Form Component.

 

9  Customising Label Settings

Labels are the titles above data input fields.


form-labelc.png



Color

Set the colour of the label text. Choose branding colours (if selected) or a colour from the palette.

 

Font Size

Set the font size of labels. Maximum font size is 40 px.

 

Font

Select the font family for Simplified Chinese and English.

 

Alignment

Adjust the horizontal position of labels for data input fields as well as Radio and Checkbox Components inside the form: align to the left, centre, or right.

 

Padding

Click the plus (+) or minus (-) boxes to increase or decrease the padding around labels.

 

10  Customising Description Settings

The text between a Label and input field is called a Description.

form-descripb.png

 

Description text is created inside the Settings panel for each individual component. This text is optional. If no description text is entered, nothing appears in the contact form.

The style of the Description text is set in the Form Component’s Settings panel.

The settings for Descriptions are the same as Label Settings. For information about Descriptions Settings, see above:

 

11  Advanced Settings

ID or Class Name

For information, see:

 

Component Visibility

For information, see:

Related articles