Lesson 6 : Contact Forms
Email contact forms
Data collection forms
Open the lines of communication with visitors on your website. A form module allows the gathering and storing of valuable information about your visitors. It is possible to find the Form Modules in the Basic Modules menu; add it to your website by dragging it from the top bar to a row or column of your preference.
The two modules make it possible to have two different pre-defined layouts - for example one in light colors and one in dark. This is useful in cases on your website where you want to have multiple forms on backgrounds of various colors throughout your site and therefore need a light and a dark version of the form in order to be able to place forms anywhere. By having two form styling options, you won't need to style any of your forms locally.
As a default, the Form 2 module inherits the Global Styling properties from the Form module. If you want the Form 2 module to have its own, independent styling, just change the Global Styling settings of the Form 2 module.
EDIT FORM MODULE
To open the editing menu, double-click on top of the form you wish to modify or hover the mouse on top of it to find the blue module and click on the Edit option.
1.1. EDIT & ADD ELEMENTS
By default, the Form Module initiates with a single element with the text type. You can choose to edit that element by clicking the settings icon that appears on the right side once you hover on the element. To delete it, click on the trash icon next to it. To add another element, click on any of the + Add Element on top and bottom of the existing elements. To move it, hover your mouse on the vertical dots on the left side of each element and drag it to your preferred position.
This menu allows you to choose what kind of type you wish your form to be.
The text type is a simple answer and short question type.
The email type is ideal to collect emails from your visitors. It is designed to retrieve emails so in case the visitor answers something that is not a valid email address, it will return an error message.
The textarea type is very similar to the text type except it allows a longer answer by displaying a bigger text area.
The select type allows the visitors to answer with one option out of a dropdown menu which has been predefined by you. Modify the options by right clicking on top of the text and add more option by clicking on the Add new option button.
The checkbox type is very similar to the select type, with the main difference being that in this type it is possible to have more than one answer and all the answers are visible straightaway. The visitors can answer with one or more options out of a set of answers predefined by you. Modify the options by right clicking on top of the text and add more option by clicking on the Add new option button.
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. Modify the options by right clicking on top of the text and add more option by clicking on the Add new option button.
The location type is ideal to collect addresses from your visitors. When they start answering, an auto-fill answer powered by Google Maps allows the selection of an existing, valid address.
The datepicker type is ideal if you wish to collect dates as the answers from your visitors. When the client clicks on the box to answer, a calendar will show up where he can navigate to select a date.
The phone type should be used to collect phone numbers.
The file type should be used in case you want the respondents to attach a file to their form submission. You can allow multiple files to be attached to a single form submission. Please note that there are no restrictions to the file type but the file size limit is 25MB. When a user tries to upload a file which size exceeds 25MB, they will be warned about the limitation. Once a form has been submitted with a file, a URL will be sent with the form email from where you can download the file; the file will be available for download for 30 days.
In the label field you should write the question you want to see answered.
1.1.3. FIELD WIDTH
This section allows you to define exactly how the form should be split across multiple columns. To do so, always consider the column where the module is added to as 100% width. The field width set at this stage will determine the extent to which that element will cover the full width, e.g. if you set it as 50%, the element will cover half of the column.
184.108.40.206. 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%. Please refer to the image below for a quick visual representation.
220.127.116.11. 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.
1.1.4. TEXT INSIDE FIELD
The text inside field is the text displayed in the answer box. It can be a tip, indication or another helpful direction for your visitor to answer the question.
In this field you can type down the options for the Select, Checkbox and Radio type of questions.
When this option is enabled, this means that when submitting the form, that question can't be left blank and must be answered.
1.2. ADD OPT-IN OPTION
This text will appear next to the tick box.
When users click the label, they will be directed to either an external URL, a page on your website, or view an overlay directly on the form.
When this option is enabled it means that when submitting the form, the opt-in box must be ticked.
1.3. ADDING SECTIONS
In order to better organize your forms, it is possible to divide form elements into sections. Add a section title by adding it as an element and choosing "Subtitle" as the type. In the label you can then choose the title for your section.
1.4. LOGIC & CONDITIONAL QUESTIONS
For the Checkbox and Radio type of questions, it is possible to add additional questions dependent on the initial answers. To create a conditional question, drag the element underneath the one you want it to be dependent on and drop it slightly to the right. You can now see a Conditioned By field in which you can choose which answer should lead to that element.
1.5. SUBMIT BUTTON LABEL
In this field you can choose what the submit button will display.
1.6. EMAIL RECIPIENT
In this field you should add the email to which you want the answers to be sent to.
In this field you should add the subject for the email with the answers.
1.8. THANK YOU MESSAGE
You should write a small thank you message thanking those who have submitted a form for their time and attention; you can do it freely in this section.
1.9. ENABLE SPAM PROTECTION
This option prevents you from receiving spam. It activates a small checkmark box in order to verify the validity of the visitor's answers.
1.10. GO TO PAGE ON SUBMISSION
After submitting the form you can redirect the visitors either to an external website or another page in your website.
In this section it is possible to choose a solid color for the module background and set its transparency.
Define the form's border color, width, style and radius.
Adjust the spacing of the form, both in terms of margin and padding.
3.1. MARGIN BETWEEN FIELDS
Choose how big the margin between the form elements should be. Write it down in the box or use the slider moving it to the left or right to decrease or increase the margin size, respectively.
3.2. NOTE FIELD
In this section you can write a note that will be displayed in small letters before the submit button.
With the editor it is possible to track your visitors behavior regarding that specific form. Attribute a custom tracking name to the form in the field and you will be able to track its action and statistics on the Home dashboard of the editor, under Custom Actions. Read more about Visitor statistics here!
3.3. CRM DATA COLLECTING
In this section it is possible to define whether you wish to colect data from this form in the editor or not. If you want to collect data from the form, simply toggle on in front of the option and give a name to the data collection. You will be able to see the form submissions under the CRM tab, on the Forms menu. Read all about CRM and Forms here!
3.4. DATA TO SPECIFIC URL
With this feature it's possible to send data collected in the form module to a specific URL. The data sent to your URL will include Site ID, the form fields, timestamp and the URL of the page the form is used on. If you want to be able to post the form to a specific URL, add the relevant URL in the field.
4. FORMS GLOBAL STYLING
Instead of individually styling each Form module it is possible to do it automatically with Global Styling. Under the Global Styling tab, there is a Module Design option on the left menu. Click on it to expand the options and you should find the Forms menu.Click here to read all about Forms Global Styling!
5. EMAIL WHEN 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 (see section 1.6. above). 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 and whether this was required or not. It will also tell you from which URL the form was submitted from and at what date and time.