Adding a Contact Form

This article shows you how to place a contact form on a webpage. You create contact forms on webpages by using the Form drag and drop component.

Contact forms help you connect with your audience. 

For more information, see:

• Customising a Contact Form
• Customising Contact Forms and Fields

1  Inserting a Form Component

You create a contact form by placing a drag and drop the component on a webpage. 

1. Click WEBSITE in the top-level menu. The Website Content page displays.
2. Locate the webpage that will display the contact form.
3. Hover the mouse pointer on the webpage name and then click Edit. The webpage opens in the window.
   
4. Drag the Form Component from the left side panel to the page. The Form Name box displays.
5. Type a unique name in the box.
6. Click OK. A basic form with two fields appears on the webpage.
   

2  Changing Field Names

A basic form has two text fields with generic names. You can customise the name of each field by opening the toolbar and making changes inside the Settings panel.

1. Hover the mouse pointer over a field. The toolbar displays.
   
2. Click the round icon in the top left corner of the toolbar. The Text Settings panel displays.
3. On the Label line, replace Field 1 by typing a new name.
   
4. Click the Translate icon to translate an English name to Simplified Chinese script.
5. Click OK to finish.

3  Copying Text Fields

Insert a new text field by copying an existing field.

1. Hover the mouse pointer over an existing text field. The toolbar displays.
2. Click the Clone button in the top right corner of the toolbar.
3. A new text field is placed under the original text field.
4. Change the name of the new field by repeating Step 2 above.
5. To move a text field, click the Text tab and drag the field to a new location.

If you want to add different types of fields (e.g. radial buttons or checkboxes) to collect different types of data (e.g. numbers or dates), see:

• Customising Contact Forms and Fields

4  Deleting Fields

You can remove a field from a form. Deletions are permanent; there is no Undo function. You cannot delete a field from a published form if data has been submitted for that field. This situation can occur, for example, if you are testing a newly published form and submit test data. 

1. Click the X (Remove) button in the top right corner of the toolbar. A Confirmation Box displays.
2. Click Yes. The field is removed and the form is automatically resized.
   

5  Saving and Publishing the Form

Saving a form holds the content and structure on a webpage. The form does not become active - or visible to website visitors - until that webpage is published.

1. Hover the mouse pointer over the form. The form toolbar displays.
   
2. Click the form once. The webpage goes dark and the Cancel Save buttons appear at the button of the form.
3. Click the Save button. The webpage returns to normal.
   
4. To publish a page, scroll to the top of the page and click Publish.

6  Viewing and Editing a Published Form

You can view a form as it appears on a published page.

1. Click WEBSITE in the top-level menu. 
2. In the CONTENT folder, click Forms. The Forms page displays.
3. On the Forms page, hover the mouse pointer on the form you want to view.
4. Click the square icon. The published page opens in a new window.

Edit a Form

To edit a form, you have to open the original webpage. You cannot edit a form on the Forms page.

1. Click WEBSITE in the top-level menu. 
2. In the CONTENT folder, click Manage. The Website Content page displays.
3. Hover the mouse pointer on the webpage with the form you want to edit. The toolbar displays.
4. Click Edit. The webpage displays.
5. Scroll down the page to the form.
6. Click the form one time. The background turns grey.
7. Edit the form and fields as required.
8. Click Save at the bottom of the form.