Form

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.

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.

Moving and Resizing a Contact Form

Please refer to the Elements Management article to learn more about moving and resizing elements.

Customizing a Form

Hover over a Form to display the Edit button in its top-right to be able to modify the Layout, Settings, and Advanced tabs:

Layout

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, 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, 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.

Settings

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

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

Advanced

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:

Related Articles