0709399000 

Login       Register     Place Order

Rollback and Reset function is used to undo changes you previously made. This module is located at the top right side of the mono editor. Learn more

Remember to publish your website after making changes. The publish module is located at the top right side of the mono editor. Learn more

Form Module

Lesson 6 : Contact Forms
Email contact forms
Data collection forms

FORM MODULE
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. CONTENT
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.

1.1.1. TYPE
This menu allows you to choose what kind of type you wish your form to be.

1.1.1.1. TEXT
The text type is a simple answer and short question type.

1.1.1.2. EMAIL
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.

1.1.1.3. TEXTAREA
The textarea type is very similar to the text type except it allows a longer answer by displaying a bigger text area.

1.1.1.4. SELECT
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.

1.1.1.5. CHECKBOX
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.

1.1.1.6. 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. Modify the options by right clicking on top of the text and add more option by clicking on the Add new option button.

1.1.1.7. LOCATION
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.

1.1.1.8. DATEPICKER
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.

1.1.1.9. PHONE
The phone type should be used to collect phone numbers.

1.1.1.10. FILE
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.

1.1.2. LABEL
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.

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

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

1.1.5. OPTIONS
In this field you can type down the options for the Select, Checkbox and Radio type of questions.

1.1.6. REQUIRED
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
As a website owner, you might be legally obliged to get consent from a visitor when collecting their data from a form. The Opt-In Option allows you to ask for this consent and easily display or refer visitors to your privacy policy.

1.2.1. LABEL
This text will appear next to the tick box.

1.2.2. TARGET
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.
External URL: direct visitors to your privacy policy on an external URL. Remember to include "http://" or "https://" in the URL.
Page on your website: if you have your privacy policy on a specific page on your website, you can direct users to that particular page by selecting it from the drop down.
Overlay in the module: 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 (see example in the screenshot below).

1.2.3. REQUIRED
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.

1.7. SUBJECT
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.

2. STYLING
2.1. BACKGROUND
In this section it is possible to choose a solid color for the module background and set its transparency.

2.2. BORDER
Define the form's border color, width, style and radius.

2.3. SPACING
Adjust the spacing of the form, both in terms of margin and padding.

3. SETTINGS
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.
3.3. TRACKING
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.

Course List

Lesson 1

Familiarizing with the mono Editor platform

Lesson 2

Choose a theme to start building your website

Lesson 3
The Basics
Introduction
Fundamentals
General Settings
Content
Previewing and Publishing

Lesson 4
Global Styling
Fundamentals
Specific Modules
Layout Settings
Navigation Settings
Module Design
Custom CSS
CRM Settings
On-Site Engagements design

Lesson 5
Pages and Content
Building pages
Page settings
Row settings
Text
Images and Video
Basic Modules
Social Modules
Module Groups
Add Specific Content
Custom HTML

Lesson 6
Contact Forms
Email contact forms
Data collection forms

Lesson 7
Social Icons and Links
Facebook
Twitter
Google+
Youtube

Lesson 8
Responsiveness
website view on PC
Website view on tablet
Website view on phone

Lesson 9
Module Design
Background Graphics
Background colors
Border radius
Border width
Padding
Margin

Lesson 10
Shopping Page

Lesson 11
Creating your Blog
Create and Manage Posts
Tags
Comments
Blog Settings
Blog Catalogue

Lesson 12
Adding videos

Lesson 13
CRM
CRM Basics
Users
Groups
Forms

Lesson 14
Settings

Lesson 15
Apps
On-Site Engagements
Synchronization and Integrations

Lesson 16
E-commerce
Basics
Create and Manage Products
Orders
Variation Labels
Category Tags
Shop Settings
Implementing the shop
Styling the shop
Payments

Lesson 17
Global Data
Adding global data

Lesson 18
Rollback and Reset Function

Lesson 19
Adding Google Tag Manager to your website

Lesson 20
Publishing your website

Lesson 21
Search Engine Optimization