Use the Form module to enable visitors to submit contact forms to you. You can add a Form module by selecting Form under the category Customer engagement in the Add module overlay.
You can set up the module to send new form submissions directly to your email. All form data can also be collected in Customers within the Editor to help you get an easy overview of form submissions.
What is the difference between Form and Form 2?
Distinguishing between Form and Form 2 makes it possible for you to have two different pre-defined layouts for your forms - for example one in light and one in dark colors. This is useful in case you are using different color backgrounds on your pages and one form design may not look good on all of them. By having two form designs to choose from, you won't need to style any of your forms locally.
Hover the module and click on Content, Design, or Settings on the dropdown to edit your Form module.
Content
On the module, you can add more elements to your contact form. An element is information you want visitors to fill in on the form, for example name, email, phone number, etc.
Add element
Click on Add element to add more elements to your form. You move an element by hovering the vertical dots on the left of each element and dragging it to your preferred position.
In the dropdown menu Type, you can choose which kind of element you want to add to your form:
- Text: a field where the visitor can write in an answer.
- Email: use this element to collect emails from your visitors. The email element will automatically recognize whether the email address that has been typed in is in the correct format or not.
- Textarea: very similar to the text type except it allows a longer answer by displaying a larger text area.
- Select: allows the visitors to answer the question with one option out of a dropdown menu which has been predefined by you.
- Checkbox: very similar to the select type, the main difference being that in this type it is possible to have more than one answer and all answers are visible straightaway.
- Radio: The radio type is the same as the checkbox type except it only allows the visitor to answer with one single option out of a set of answers predefined by you.
- Location: ideal for collecting addresses from your visitors.
- Datepicker: ideal if you wish to collect stated dates from your visitors. As the visitor clicks on the box to answer, a calendar will show up where they can pick a date. Note: placeholder text is not supported on tablet and mobile.
- Phone: use this element to collect your visitor's phone number.
- Subtitle: allows you to add a static text to the contact form, for example if you wish to divide up a long form into sections with dedicated headlines.
- File: use this type in case you want the visitors to attach a file to their form submission. Please note that visitors can upload any file type but the file size limit is 25 MB per file. The total attachment limit to a form is 125 MB (5 attachments of 25 MB each). Once a form has been submitted with a file, a URL will be sent to the website owner with a download link; the file will be available for download for 30 days.
Field width: on each form element you can select the desired width of the input field, ranging from 20-100%.
Text inside field: any text added here will show in the field on your published website. Use this to provide input examples or write instructions to help visitors fill in the field correctly.
Required field: toggling this option makes a question mandatory - the question must be answered before the form can be submitted.
Allow multiple fields
Multiple elements: ≤100%: You must be aware that elements will always float to the left and that they will be added to the same row until their widths together surpass 100%.
Multiple elements: >100%: As soon as the sum of all the elements in a row surpasses 100%, the last element added will be moved to a row below.
Read more about the styling of input fields here.
Add opt-in Option
As a website owner, you might be legally obliged to obtain consent from a visitor when collecting their data through a form module. The Opt-in option allows you to ask for this consent and easily display or refer visitors to your privacy policy.
Provide consent
You have the following options for your consent opt-in:
Link type: provide a link to your data privacy policy. You can select between an external link, internal page, or a pop-up overlay. If you choose to show an overlay, you can either input your privacy policy directly in the module or use a Global Data tag to fetch a legal text from your Global Data.
Required field: toggling this option makes opt-in mandatory - consent must be provided before the form can be submitted.
Submission
Decide what happens when a visitor submits a form. Here you can customize the submit button text and the thank you message that will appear after the visitor has submitted. You can also add a small note at the bottom of the form to provide additional instructions to visitors.
Design
The Design section is where you change the background, border, and spacing on your Form module. For more specific styling options, click More local design options or edit the Global Design of the Form module. For a more thorough introduction to styling, see our dedicated styling guide.
Settings
-
Enable spam protection: You have the option to enable spam protection for your form module. This option prevents you from receiving spam from bots on the internet. It activates a small reCAPTCHA "I'm not a robot" checkmark box on forms in order to verify that the visitor is human.
- Use invisible spam protection: you can select this option once you have ticked Enable spam protection. Instead of having the reCAPTCHA box appear visibly on your contact form, you can enable Use invisible spam protection which means that visitors won't see a reCAPTCHA at all, not even the "I'm not a robot" checkbox. If a visitor is flagged as "suspicious" by the system, then it will display the usual human validation check when the visitor submits the form.
ReCAPTCHA visibility
The invisible reCAPTCHA is, despite the name, not entirely invisible on your website. With spam protection enabled, Google - the owner of the reCAPTCHA technology - captures visitor information from your website and is therefore legally obliged to display their privacy policy and terms and conditions. These links are displayed through a small sticker on your website, as shown below. In the Editor, you can decide if you want the sticker to appear in the bottom right or bottom left corner of your website. The appearance of the sticker cannot be modified or styled further as it is not a native element of the Editor.
- Custom tracking name: add a custom tracking name to the form to be able to track form submissions from your visitors on the dashboard of the Editor. Read more about visitor statistics here.
- Email recipient: in this field you should add the email address to which you want new form submissions to be sent to. Add multiple email addresses by comma-separating them.
- Email subject: add the subject for the email you'll receive with form submission information.
- Redirection: after submitting the form you can redirect visitors to an external website or another page on your website.
-
Collect data from this form: enable this option if you want to collect all submissions from the form in Customers. Give the form an appropriate data collection name so you can easily recognize it later on when browsing form data in Customers.
Contact forms troubleshooting
Read this guide if you're having problems with form submission emails not going through to the email recipient.
Email notification when a form has been filled out
When a form has been filled out on your website, an email will be sent to the email address you have specified when setting up the Form module. The email contains all the answers and inputs provided by the visitor who submitted it. It will explicitly indicate whether the visitor has consented to privacy terms. It will also tell you from which URL the form was submitted.
Email example:
Changing email notification language
The language of the texts in the email is determined by the language your website is in. If you have set the language code/abbreviation to "en" in Language Settings, the email will be in English; if you have set it to "de", it will be in German, and so on. Read this article to learn more about setting up your language(s).
Last updated: 4 June 2024