Scroll

Welcome to our LiveChat! Please press "Start Chat" button to proceed

Start Chat

Advanced Contact Form

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 - Basic tab.
1.png

Advanced Contact Form plugin is separated into two main tabs: "Settings" and "Design".
Screenshot_1.png

"Settings" tab consists of "Edit", "Email to", "Subject""Edit Messages" features.
Screenshot_2.png

Press "Edit" button to add various form elements into the Contact Form.
Screenshot_3.png 

!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. Please make sure to choose appropriate fields within the form on the page to preview the settings of each element.
Screenshot_34.png

You can use the following form elements: Label, Input, Text Area, Select, Checkbox, Radio Buttons, Attach File, Submit Button, Status Message, Recaptcha.
4_-_Copy.png

"Label" - this form element allows you to setup the title of the fields. Note: this information will not be presented in the email.
4_-_Copy__2__-_Copy.png

"Properties" tab allows you to type title of the field via "Text" field and choose it's style via "Text Style" field.
Screenshot_60.png

The "Display" block has the following common features"Spacing""Devices", "Alignment".
Screenshot_61.png

"Input" - this form element allows you to add a field where you can specify short information: personal details, email etc.
4_-_Copy__3_.png

"Properties" block contains the following features: "Name", "Placeholder", "Type", "Icon".
6_-_Copy.png

"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.
6_-_Copy__3_.png

"Placeholder" - this feature allows you to change the title within the form field's area.
Screenshot_35.png

"Type" - this advanced feature allows you to use specific type of field for the required information which can be text, number, email, phone or URL. The type of field is written in the browser's structure and has it's 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.
7.png

"Icon" - this feature allows you to set icon for each "Input" form element.
6_-_Copy__5_.png

"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.
Screenshot_36.png

"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.
9.png

The "Display" block has the following common features"Spacing".
Screenshot_62.png

"Text Area" - this form element allows you to add a field where the visitor can specify detailed information.
4_-_Copy__4_.png

"Properties" block contains the following features: "Name", "Placeholder", "Visible On", "Height".
12.png

"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.
12_-_Copy.png

"Placeholder" - this feature allows you to change the title within the form field's area.
Screenshot_38.png

"Visible On" - this feature allows you to preview/configure the height of text area for each type of device.
12_-_Copy__3__-_Copy.png

"Height" - this feature allows you to configure the height of text area.
12_-_Copy__3_.png

"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.
Screenshot_39.png

"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.
Screenshot_6.png

The "Display" block has the following common features"Spacing".
Screenshot_63.png

"Select" - this form element allows you to create a dropdown list where the visitor can choose only one value for the answer.
Screenshot_28__________3_.png

"Properties" block contains the following features: "Name", "Options", "Add", "Required field".
Screenshot_8.png

"Name" - this feature allows you to set unique key ID for the dropdown list and receive it in the email.
Screenshot_78.png

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).
Screenshot_85.png

The "Add" button allows you to add new "Options" for your "Select" form element.
Screenshot_10.png

Once "Add" button is clicked, a new "Add Item" window will appear where you can configure "Value" and "Label" fields.
Screenshot_74.png

"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).
Screenshot_85.png

"Label" field allows you to set a name for single dropdown list item so it can be visible to the user.
Screenshot_86.png

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.
Screenshot_87.png

You can change the position of items by dragging them one over another.
Screenshot_13.png

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.
Screenshot_12.png

The "Display" block has the following common features"Spacing".
Screenshot_64.png

"Checkbox" - this form element allows you to configure the checkbox of your advanced contact form.
Screenshot_89.png

The "Properties" block consists of the following features: "Name", "Label", "Checked", "Required Field".
Screenshot_1.png

"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.
Screenshot_2.png

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.
Screenshot_51.png

"Label" field allows you to set a name for single checkbox so it can be visible to the user.
Screenshot_10.png

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.
Screenshot_9.png

"Checked" and "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.
Screenshot_53.png

The "Display" block has the following common features: "Spacing", "Devices", "Alignment".
Screenshot_8.png

"Radio Buttons" - is a form element that allows to add radio buttons to your advanced contact form so the visitor can choose only one answer from the set of options.
Screenshot_57.png

The "Properties" block consists of the following features: "Name", "Add", "Option Position", "Required Field".
Screenshot_69.png

"Name" - this feature allows you to set unique key ID for the radio button list and receive it in the email.
radio.png

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).
Screenshot_79.png

The "Add" button allows you to add new "Options" for your "Radio Buttons" form element.
Screenshot_72.png

Once "Add" button is clicked, a new "Add Item" window will appear where you can configure "Value" and "Label" fields.
Screenshot_74.png

"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).
Screenshot_79.png

"Label" field allows you to set a name for single radio button option so it can be visible to the user.
Screenshot_80.png

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.
Screenshot_81.png

You can change the position of items by dragging them one over another.
Screenshot_82.png

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.
Screenshot_83.png

"Required Field" feature allows you to make "Radio buttons" form element necessary to select when sending the information through advanced contact form.
Screenshot_84.png

The "Display" block has the following common features: "Spacing", "Devices", "Alignment".
Screenshot_58.png

"Attach File" - this form element allows the visitor to add an attachment when sending the information through your contact form.
Screenshot_46.png

"Attach File" form element is separated into two tabs: "Settings" and "Design".
Screenshot_47.png

The "Settings" tab consists of the following features: "Name", "Placeholder", "Button Text".
Screenshot_50.png

"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.
Screenshot_55.png

"Placeholder" - this feature allows you to change the title within the form field's area.
Screenshot_51.png

"Button Text" feature allows to rename the button for attachment.
Screenshot_52.png

"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.
Screenshot_49.png

"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.
Screenshot_48.png

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_filesizepost_max_size and memory_limit values accordingly. The first and the second value should have the same size and the last one should be higher than both values. For example:

upload_max_filesize = 256M
post_max_size = 256M
memory_limit = 512M

The "Display" block has the following common features: "Spacing".
Screenshot_56.png

"Design" tab allows you to customize "Attach File" appearance. Available presets are located within the list of "Button Preset" section.
Screenshot_53.png

Available button sizes are located within the list of "Size" section.
Screenshot_55.png

"Submit Button" - this form element allows the visitor to send you all data they filled in the contact form.
Screenshot_42.png

The "Submit Button" form element is separated into two tabs: "Settings" and "Design".
Screenshot_43.png

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.
Screenshot_44.png

The "Display" block has the following common features: "Spacing", "Devices", "Alignment".
Screenshot_65.png

"Design" tab allows you to customize "Submit Button" appearance. Available presets are located within the list of "Preset Name" section.
Screenshot_45.png

"Status Message" - this form element allows you to change the status message text and choose its style.
Screenshot_40.png

The "Properties" block allows you to change text and style for the following status messages: "Sending Message", "Success Message", "Error message".
Screenshot_41.png

The "Display" block has the following common features"Spacing", "Devices", "Alignment".
Screenshot_68.png

"reCAPTCHA" - this form element allows you to add a Google reCAPTCHA for your advanced contact form to protect it from spam and abuse.
Screenshot_28__________4_.png

"Properties" block consists of the following features: "Connect", "Theme", "Size".
Screenshot_29.png

!Imporant! To enable Google reCAPTCHA you need to provide API Keys. You can generate such keys here. Required version is reCAPTCHA v2.
Screenshot_29________.png

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".
Screenshot_1.png

"Label" option makes it easier to identify where exactly you are using Google reCAPTCHA on your website.
Screenshot_3.png

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.
Screenshot_6.png

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.
Screenshot_8.png

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.
Screenshot_9.png

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.
Screenshot_10.png

"Connect" button allows you to enable Google reCAPTCHA once you generated the API Keys.
Screenshot_29__________2_.png

Copy and paste your "Key" and "Secret Key" within the appropriate field and save the results.
Screenshot_30.png

"Theme" and "Size" features allows you to change your google reCAPTCHA to light/dark theme and normal/compact size.
Screenshot_31.png

The "Display" block has the following common features"Spacing", "Devices", "Alignment".
Screenshot_67.png

The "Email to" field allows you to set multiple email addresses separated by commas to receive the messages from the contact form.
Screenshot_26.png

The "Subject" button allows you to edit the message subject submitted via this Advanced Contact Form widget you receive to your email.
Screenshot_4.png

Below is how you see it in your mailbox.
Screenshot_5.png
The "Edit Messages" button allows you to configure the language of the text messages.
Screenshot_6.png

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.
Screenshot_25.png

 

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.

11.jpg

If you haven't created your Google Analytics account - please use the following link.
22.jpg

Then in the settings of the Advanced Contact Form widget you need to enable events using the “Edit events” button
33.jpg

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.55.jpg

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
66.jpg

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.
77.jpg

In the same table, you can open the full report and get acquainted with the statistic for a certain period in more detail.
88.jpg

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".
Screenshot_7.png

"Reset Form" feature will automatically clear all form fields once email is send.
contactform1.png

The "Display" block has the following common features: "Spacing", "Visible On".
Screenshot_8.png

The "Design" tab allows you to select "Advanced Contact Form" appearance. Available presets are located within the list of "Preset Name" section.
Screenshot_59.png 

Have more questions? Submit a request

Comments