Form

Please Note: This article applies to Website, Website+Marketing and eCommerce packages created on or after 18 December 2024. If your accounts were created before this date, please refer to the article Elements Management.

Adding the Contact Form

Option 1

  • Hover over the desired section and click Add Element:

  • Choose the Contact Form element from the modal that appears:

  • After you choose the element from the list, drag it to the desired section and drop it using the grid.

Option 2

  • Hover over the left sidebar of the Site Editor and click Build (+) button:

  • Choose the element:

  • After you choose the element from the list, drag it to the desired section and drop it using the grid.

Moving and Resizing a Contact Form

Please refer to the Elements Management (New Grid) article to learn more about moving and duplicating elements.

Customizing a Form

To edit, duplicate, or delete the element, click on it and switch between the buttons that appear in its toolbar:

Editing Elements

  • Click on the contact form and choose the Edit button that appears in its toolbar to be able to modify the Layout, Settings, and Advanced tabs:

Layout Tab

You can modify the Layout tab by adding or deleting the fields, changing their order via drag & drop, and editing the contents.

  • Click Add the Form Field to add a new placeholder:

  • Select a field type: Text, Text Area, Select, Radio, Full Name, Subject, Address, Email, Phone, Facebook, X (Twitter), Link, Date, Number, Currency, or Checkbox:

  • The chosen field will appear on your Contact Form right away.
  • Click Edit to customize a field: change a Title, Placeholder, Description, and Validation Message:

Please Note: You can add a custom validation message to specific fields: Full Name, Address, Email, Phone, Facebook, X (Twitter), Link, Number, Currency.

Site visitors will see a validation message when they attempt to add symbols to a field that are not allowed. If no custom validation message is added, the following default message will be shown: "Please enter a real (field name)."

  • You can change the Title, Layout, quantity, and names of the Options in the checkbox field:

  • If you have access to the Contact CRM system, you can turn on the Contact CRM Field toggle to use this checkbox as the Opt-in for contacting visitors via email. It is necessary to give the checkbox an appropriate name so that site visitors understand that they are giving consent to contact via email:

  • You can view the Opt-In status in Contact Details in your Contact CRM. Contacts that have checked the Opt-In box will automatically have Email Status as "I have permission to send email". You will be able to include such customers in mailing lists for your email marketing campaigns:

Please refer to the How to Use Form Checkbox for Email Marketing Consent tutorial for more details.

Settings Tab

Change the form type and name, and specify your email address to receive the submitted data in the Settings tab.

  • Modify the Form Type: You can switch between the Contact form and Subscribe form type (available only for the subscriptions with Contact CRM functionality):

  •  Edit the Form Name.
  •  Add your email address and click Enter to receive the data collected within the Contact Form. You can add up to 5 email addresses:

Please Note: Depending on your subscription (Website+Marketing and eCommerce), contact form information may be saved in Customer Lists within Contact CRM.

You will be able to switch between the Subscribe and Contact form types. Depending on the chosen Form Type, site visitors' data will be saved in the corresponding list in the Contact CRM: 

Please Note: For the Subscribe form type, all the contacts from the submitted forms will automatically have the Opt-In email status as "I have permission to send email". It's the website owner's responsibility to clearly inform site visitors that by providing their email, they're consenting to email marketing. If you set the form type to Subscribe, please make sure you explicitly indicate on the live site that visitors agree to receive email marketing communications by submitting the form.

The messages submitted in the Contact Form will be available in the Form Inbox section in the Customers tab.

Please be aware of the mapping of the following Contact Form fields to the Form Inbox fields:

  • Contact Form Subject field corresponds to the message subject in the Form Inbox.
  • Contact Form Text Area field corresponds to the "Your message" field in the Form Inbox.

Please Note: Full Name and Email fields are required for the contact info to be saved in the Contact CRM. The Subject or Text Area field is required for the contact to be saved in the Contact Form Inbox area.

Advanced Tab

In the Advanced tab, you can create a Thank-You message for submitting the form, add a promo code, and modify the Contact Form appearance.

  • Choose the layout for input fields: Vertical, Horizontal, and Split into two rows.
  • Select to display placeholders such as Enter Name and Enter Email Address inside the form fields.

Please Note: You can modify the Placeholder text for each field.

On Submit

Edit the Thank-You message for website visitors who submitted the Contact Form:

  • Title: Click inside the field to modify the message's title the visitor will get after submitting the form.
  • Description: Click to modify the message displayed after the visitor submits the form.
  • Promo Code: Add a Promo Code for website visitors after they submit the form:

An example of the Thank-You message for website visitors that will appear after submitting the form:

Duplicating the Timeline

  • To duplicate the timeline, click on it and choose the Duplicate button that appears in its toolbar:

  • The duplicate of the element will appear immediately.

Layering the Contact Form

To layer elements within Site Editor, follow these steps:

  • Add a new element over the existing one. The newly added element will be on the top layer:

  • Click on the element and select Move Forward or Move Backward options:

Please Note: The Move Forward or Move Backward options are available only when one element is added on top of another.

Deleting the Timeline

  • To delete a timeline, click on it and choose the Remove button [Bin] that appears in its toolbar:

  • The element will be removed immediately.