The Contact Form component automatically includes Name, Email, and Message component input fields, making it quick to add a basic contact form to your site. To get started, click Add Content in the website editor, then drag the component to a page of your site. Next, click on the component to open the options panel.
Tip: Adding the contact form to your footer will make it global so it’s on all the pages of your site.
Adding More Fields
If you want to add more fields to your contact form, click on Add Content in the options panel. You can also just drag form components directly into the form.
For a full list of form inputs, see the article on adding a form.
Form Name
Click and edit the text in this field to change the name of the contact form. This name is used on your account dashboard in the list of forms, rather than shown on the website itself.
Submission
There are two options available that handle what your visitors experience after form submission.
- Redirect After Submit - To redirect the submitter to a page of your site after completing the form, click on Add Link.
- Success Message - When you do not set a redirect link, the text in this field will be shown instead.
Notifications
Within the Notifications options group are options that control the email notifications you receive from submissions:
- Notify Email Address - This is the email address where we send notifications. By default, notifications go to your account email address, though you can enter another email address in this field to override that.
- Enable Reply-to - This option configures the notification emails so you can reply and have the email go to the email address submitted with the form.
Security
By default, the Enable CAPTCHA option is toggled on. This adds a CAPTCHA to your form to prevent spam submissions, and also updates notification emails so they include a preview of form contents. With this disabled, a CAPTCHA is not shown and we do not include a preview in emails.
Design
The options within the Design options group control the styling of the component.
- Gap - With this option, you can control how much space there is between individual inputs in the form. This can be set separately for different screen sizes by clicking the desktop/mobile icon.
- Shape - This option adjusts the shape of the border around the form. This option can be set separately for different screen sizes.
- Background - You can set a background for the form and choose a color, gradient, image, or image with overlay.
- Border - With this option you can add a border. Once you select a width, you’ll see additional options to customize the style and color of the border.
Spacing
The options found in this group control spacing within the component. Margin controls the space around all of the elements of the component. Padding controls the space between the border and the elements of the component. Both options can be set separately for different screen sizes.
Hover
To control how the component looks when a visitor hovers over it with a mouse, click on Hover at the top of the options panel. You can customize the Border and Background of the form.