1. General information
1.1 Contact form settings
1.1.1 Edit
1.1.2 Email to
1.1.3 Subject
1.1.4 Edit Messages
1.1.5 Events
1.1.6 Action after form submission
2. Form elements
2.1. Label
2.2. Input
2.3. Text Area
2.4. Select
2.5. Checkbox
2.6. Radio Buttons
2.7. Attach File
2.8. Submit Button
2.9. Status Message
2.10. reCAPTCHA
Note: you can use this widget on Control Panel's version 3.2.5+ (outdated versions will not support this plugin).
Advanced Contact Form plugin is a special widget which allows you to make outstanding, complex and unique Contact Form widget with tremendous amount of features. You can find it within the Pages - Widgets - Advanced tab if it is included in your template out of the box or if you purchase it separately. You can add Advanced Contact Form plugin to any MotoCMS 3 template by purchasing this plugin using this payment link.
Advanced Contact Form plugin is separated into two main tabs: "Settings" and "Design".
"Settings" tab consists of "Edit", "Email to", "Subject", "Edit Messages" features.
Press "Edit" button to add various form elements into the Contact Form.
!Important! Once you've clicked on the button - all site's area would be grayed out except the Advanced Contact Form widget on the page. Left side Widgets tab will be replaced with Advanced Contact Form internal widgets to let you manage this Advanced Contact Form.
Please make sure to choose appropriate fields within the form on the page to preview the settings of each element.
You can use the following form elements: Label, Input, Text Area, Select, Checkbox, Radio Buttons, Attach File, Submit Button, Status Message, Recaptcha.
"Label" - this form element allows you to setup the title of the fields. Note: this information will not be presented in the email.
"Properties" tab allows you to type title of the field via "Text" field and choose it's style via "Text Style" field.
The "Display" block has the following common features: "Spacing", "Devices", "Alignment".
"Input" - this form element allows you to add a field where you can specify short information: personal details, email etc.
"Properties" block contains the following features: "Name", "Placeholder", "Type", "Icon".
"Name" - this feature allows you to set unique ID and receive both key and value in the email, which contains information, typed by the user in the field. Example: if your unique "Name" is "Are you MotoCMS customer?" and user types: "Yes" - you will receive the following line in the email: Are you MotoCMS customer? : Yes.
"Placeholder" - this feature allows you to change the title within the form field's area.
"Type" - this advanced feature allows you to use a specific type of field for the required information which can be text, number, email, phone, URL or date. The type of field is written in the browser's structure and has its own validation indicator. Each field is directly affected by the settings of "Validation" tab. You can set one type of field for each "Input" widget at a time.
"Icon" - this feature allows you to set icon for each "Input" form element.
"Description" block allows you to set description under each "Input" element as a tooltip for a user to better understand the purpose of the field. You can also configure it's alignment and view description from different devices.
"Validation" - this feature allows you to configure validation settings for each field type: text, number, email, phone or URL. You can enable "Required Field" feature and set minimum and maximum length or value. Message won't be available for sending by website visitor unless the required field is filled in with information passing validation requirements.
The "Display" block has the following common features: "Spacing".
"Text Area" - this form element allows you to add a field where the visitor can specify detailed information.
"Properties" block contains the following features: "Name", "Placeholder", "Visible On", "Height".
"Name" - this feature allows you to set unique ID and receive both key and value in the email, which contains information, typed by the user in the field. Example: if your unique "Name" is "Are you MotoCMS customer?" and user types: "Yes" - you will receive the following line in the email: Are you MotoCMS customer? : Yes.
"Placeholder" - this feature allows you to change the title within the form field's area.
"Visible On" - this feature allows you to preview/configure the height of text area for each type of device.
"Height" - this feature allows you to configure the height of text area.
"Description" block allows you to set description under each "Text Area" element as a tooltip for a user to better understand the purpose of the field. You can also configure it's alignment and view it from other devices.
"Validation" - this feature allows you to configure validation settings for each field type: text, number, email, phone or URL. You can enable "Required Field" feature and set minimum and maximum length or value.
The "Display" block has the following common features: "Spacing".
"Select" - this form element allows you to create a dropdown list where the visitor can choose only one value for the answer.
"Properties" block contains the following features: "Name", "Options", "Add", "Required field".
"Name" - this feature allows you to set unique key ID for the dropdown list and receive it in the email.
For example: if your unique "Name" is "CAR_BUYERS" and the user selects "Toyota" from the dropdown list and this "Toyota" dropdown option has a unique "Value" as well you will receive the following in the email: CAR_BUYERS: car1 or CAR_BUYERS: Toyota 1986 (just an example).
The "Add" button allows you to add new "Options" for your "Select" form element.
Once "Add" button is clicked, a new "Add Item" window will appear where you can configure "Value" and "Label" fields.
"Value" field allows you to set unique value ID for the dropdown list single item and receive it in the email along with the "Name" feature which is a unique key ID. For example: if your unique "Name" is "CAR_BUYERS" and the user selects "Toyota" from the dropdown and this "Toyota" dropdown option has a unique "Value" as well you will receive the following in the email: CAR_BUYERS: Toyota 1986 (just an example).
"Label" field allows you to set a name for single dropdown list item so it can be visible to the user.
Once you created an item with your "Value" and "Label", you can make one one of them selected by default and you can also edit/remove them.
You can change the position of items by dragging them one over another.
Please note: if you need to use an option with blank value, only one of the options can be left with a blank "Value". It is not possible to have two blank options.
"Required Field" feature allows you to make "Select" form element necessary to fill when sending the information through advanced contact form.
The "Display" block has the following common features: "Spacing".
"Checkbox" - this form element allows you to configure the checkbox of your advanced contact form.
The "Properties" block consists of the following features: "Name", "Label", "Checked", "Required Field".
"Name" - this feature allows you to set unique ID and receive both key and value in the email, which contains information, typed by the user in the field.
Example: if your unique "Name" is "AGREEMENT" and the customer clicks on the "Checkbox" - you will receive the following line in the email: AGREEMENT: Yes.
"Label" field allows you to set a name for single checkbox so it can be visible to the user.
The fields "Checked Value" and "Non-Checked Value" allow you to configure the value next to this Checkbox Name you receive in your mailbox if the checkbox has corresponding state (checked/unchecked) when the website visitor submits a message through your website contact form.
The "Checked" checkbox forces default checked value for this Advanced Contact Form item.
"Required Field" features allow you to make checkbox already selected and make it necessary to click if it is not selected when sending the information through advanced contact form.
The "Display" block has the following common features: "Spacing", "Devices", "Alignment".
"Radio Buttons" - is a form element that allows adding radio buttons to your advanced contact form so the visitor can choose only one answer from the set of options.
The "Properties" block consists of the following features: "Name", "Add", "Option Position", "Required Field".
"Name" - this feature allows you to set unique key ID for the radio button list and receive it in the email.
For example: if your unique "Name" is "Car_buyers" and the user selects "Toyota" radio button and "Toyota" radio button has a unique "Value" as well you will receive the following in the email: Car_buyers: Toyota 1986 (just an example).
The "Add" button allows you to add new "Options" for your "Radio Buttons" form element.
Once "Add" button is clicked, a new "Add Item" window will appear where you can configure "Value" and "Label" fields.
"Value" field allows you to set unique value ID for the radio button single option and receive it in the email along with the "Name" feature which is a unique key ID. For example: if your unique "Name" is "Car_buyers" and the user selects "Toyota" radio button from the radio button list and "Toyota" radion button has a unique "Value" as well you will receive the following in the email: Car_buyers: Toyota 1986 (just an example).
"Label" field allows you to set a name for single radio button option so it can be visible to the user.
Once you created an item with your "Value" and "Label", you can make one of them checked and you can also edit them and remove them.
"Edit" button opens a popup window, where you can change the item's title and edit text using CKEditor.
You can change the position of items by dragging them one over another.
Please note: if you need to use an option with blank value, only one of the options can be left with a blank "Value". It is not possible to have two blank options.
"Option Position" feature allows you to change the position of radio buttons to vertical/horizontal.
"Required Field" feature allows you to make "Radio buttons" form element necessary to select when sending the information through advanced contact form.
The "Display" block has the following common features: "Spacing", "Devices", "Alignment".
"Attach File" - this form element allows the visitor to add one or several attachments when sending the information through your contact form.
"Attach File" form element is separated into two tabs: "Settings" and "Design".
The "Settings" tab consists of the following features: "Name", "Placeholder", "Button Text", "Spacing Between Field and Button".
"Name" - this feature is used to set unique ID and receive key in the email. Note: currently this information will not be presented in the email for the "Attach File" form element.
"Placeholder" - this feature allows you to change the title within the form field's area.
"Button Text" feature allows to rename the button for attachment.
"Spacing Between Field and Button" feature allows you to set the indent from the field to the button.
"Description" block allows you to set description under each "Attach File" element as a tooltip for a user to better understand the purpose of the field. You can also configure it's alignment and view description from different devices.
"Validation" - this feature allows you to configure validation settings for the file attachment: you can enable "Required Field" feature and set acceptable file extensions and maximum upload size with "Acceptable File Extensions" and "Maximum Upload File Size" features.
Please note: the notification below "Maximum Upload File Size" feature will show another file size limit, based on your server settings. If you want to increase it, contact your hosting provider and ask them to reconfigure upload_max_filesize, post_max_size and memory_limit PHP values accordingly. The first and the second value should have the same size and the last one should be higher than previous values. For example:
upload_max_filesize = 256M
post_max_size = 256M
memory_limit = 512M
The "Display" block has the following common features: "Spacing".
"Design" tab allows you to customize "Attach File" appearance. Available presets are located within the list of "Button Preset" section.
Available button sizes are located within the list of "Size" section.
"Submit Button" - this form element allows the visitor to send you all data they filled in the contact form.
The "Submit Button" form element is separated into two tabs: "Settings" and "Design".
The "Settings" tab allows you to rename the "Submit Button" and change its size with the "Button Text" and "Size" features. The "Waiting Text" feature allows you to add a text to your button which will be displayed during the "Sending Message" status.
The "Display" block has the following common features: "Spacing", "Devices", "Alignment".
"Design" tab allows you to customize "Submit Button" appearance. Available presets are located within the list of "Preset Name" section.
"Status Message" - this form element allows you to change the status message text and choose its style.
The "Properties" block allows you to change text and style for the following status messages: "Sending Message", "Success Message", "Error message".
The "Display" block has the following common features: "Spacing", "Devices", "Alignment".
"reCAPTCHA" - this form element allows you to add a Google reCAPTCHA for your advanced contact form to protect it from spam and abuse.
"Properties" block consists of the following features: "Connect", "Theme", "Size".
!Imporant! To enable Google reCAPTCHA you need to provide API Keys. You can generate such keys here. Required version is reCAPTCHA v2.
Once you click on the link, you will be prompted to Google reCAPTCHA page where you can generate the API keys. This page consists of the following options: "Label", "Choose the type or reCAPTCHA".
"Label" option makes it easier to identify where exactly you are using Google reCAPTCHA on your website.
After you choose reCAPTCHA v2, you will be able to specify your domains (one per line) and accept the terms of use. Please note that your registration is restricted to the domains you enter there, plus any subdomains. In other words, a registration for domain.com also registers subdomain.domain.com. So in case you don't have a domain yet and you're still using a temporary link (preview URL), we recommend you to choose a domain name and purchase it. You can do this on our site. Check this link for domain registration please.
Please also note that the domain name is specified in mydomainname.com format without http or https connection. If you use them, you will see the "URL starts with an invalid scheme" error.
Once you click register, you will be prompted to another section of Google reCAPTCHA page where you can acquire your Key and Secret Key from "Adding reCAPTCHA to your site" - "Keys" section.
Note: this is the only step that is required for your "reCAPTCHA" form element to work on your website. Step 1: Client side integration and Step 2: Server side integration which go after the "Keys" section are not required as form element is already implemented.
"Connect" button allows you to enable Google reCAPTCHA once you generated the API Keys.
Copy and paste your "Key" and "Secret Key" within the appropriate field and save the results.
"Theme" and "Size" features allows you to change your google reCAPTCHA to light/dark theme and normal/compact size.
The "Display" block has the following common features: "Spacing", "Devices", "Alignment".
"Hidden Input" - this widget allows you to enable the transferring of additional data to the letter template of the Advanced Contact Form.
"Name" field allows you to identify which input is shown in the email, while the "Value" field contains the additional data, which you will see in the letter.
The "Email to" field allows you to set multiple email addresses separated by commas to receive the messages from the contact form.
The "Subject" button allows you to edit the message subject submitted via this Advanced Contact Form widget you receive to your email.
Below is how you see it in your mailbox.
The "Edit Messages" button allows you to configure the language of the text messages.
Please note: [[MAX_SIZE]], [[MAX_VALUE]], [[MIN_VALUE]] are the max and min values that you set manually for each form element. The numbers will be displayed live on the contact form for each error message.
Edit Events feature
This feature allows you to check statistics through Google Analytics related to a successful and unsuccessful submission attempt.
To enable events you need to connect Google Analytics. You can configure it under Settings - Analytics menu item. "Google Analytics" field require's "Tracking ID" from your Google Analytics account.
If you haven't created your Google Analytics account - please use the following link.
Then in the settings of the Advanced Contact Form widget you need to enable events using the “Edit events” button
Use the checkbox to activate a successful and unsuccessful submission event.
An Event has the following components. An Event hit includes a value for each component, and these values are displayed in your reports.
-
Category
-
Action
-
Label (optional, but recommended)
-
Value (optional)
Category is a name that you supply as a way to group objects that you want to track. Typically, you will use the same category name multiple times over related UI elements that you want to group under a given category.
In this case, you can leave the default name - Advanced Contact Form or use a unique one for each page.
Action allows you to name the type of event or interaction you want to track for a particular web object. The Advanced Contact Form widget allows you to track two main events - successful and unsuccessful submission attempt.
For example, in the Action field, you can specify Successful Submit and Unsuccessful Submit. But you can use your custom names.
Label allows you to provide additional information for events that you want to track, such as the name of the page on which the contact form is located. For example - Homepage, Contacts, Feedback, etc.
Also, the label field is optional, but recommended.
Value allows you to assign a numerical value to a tracked page object. The value is interpreted as a number and the report adds the total values based on each event count and determines the average value for the category. This parameter is optional for tracking a successful or unsuccessful submission attempt.
Negative integers are not supported.
Here is an example of a recommended event settings:
Successful Submit
-
Category - Adv Contact Form
-
Action - Successful Submit
-
Label - contact page
-
Value - 0
Unsuccessful Submit
-
Category - Adv Contact Form
-
Action - Unsuccessful Submit
-
Label - contact page
-
Value - 0
Immediately after setting up the events in the advanced contact form, Google analytics will start count statistics, which you can check under Behavior - Events - Overview section
The event overview provides a graph and parameters for all events on your website.
First you need to select the period for displaying the report. Additionally available quick sorting - Hour - Day - Week - Month
Further, the table will display the statistics of all events by main parameters:
Total Events, Unique Events, Event Value, Avg. Value, Sessions with Event and Events / Session with Event
In the bottom column "Top Events" will be displayed created by your categories, actions and labels of events. Here you can view quick statistics on two parameters - Total events and their percentage.
In the same table, you can open the full report and get acquainted with the statistic for a certain period in more detail.
An additional useful feature will be the ability to export the report to PDF, Google spreadsheet, Excel and csv. This will allow you to provide reports to third parties.
The "Action After Form Submission" block consists of an "Action" feature which allows to set a specific behaviour after form submission. The following actions are available: "None", "Go to Page", "Open Popup", "Go to Blog", "Go to Post", "Open URL", "Open in Lightbox".
"Reset Form" feature will automatically clear all form fields once email is send.
The "Display" block has the following common features: "Spacing", "Visible On".
The "Design" tab allows you to select "Advanced Contact Form" appearance. Available presets are located within the list of "Preset Name" section.
This widget belongs to the Advanced widget category. Check out the other widgets in this category at the following link: Advanced Image, Advanced Slider.
Comments