1. The Advanced Contact Form widget allows you to make complex Contact Form with additional features such as radio buttons, dropdowns, checkboxes, etc. Drag and drop the Advanced Contact Form widget on the page.
2. Select the Advanced Contact Form widget to edit the Settings described in Step 3 and further.
3. Click "Edit" to add the Form Elements to the Advanced Contact Form. As soon as you click it, the entire area except the Advanced Contact Form will be greyed out, and you can add Form Elements to the form.
4. Drag and drop the Form Elements to the Advanced Contact Form. The Advanced Contact Form has the following elements: Label, Input, Hidden Input, Text Area, Select, Checkbox, Radio Buttons, Attach File, Submit Button, Status Message, reCAPTCHA.
5. A Label is a text that describes what information is needed in a specific part of the form. For example, it might say "Name" next to a box where visitors will enter a name
Input is a field where users can type in a short text, for example, a name or email address. The following data types are available for input: Text, Number, Email, Phone, URL, Date
Hidden Input is a field that is not visible to users. This field type will not appear in the final form, but its value will be sent in the email.
The Text Area is a larger box where users can type in longer text, such as a message or comments.
Select is a dropdown menu that allows users to choose one option from a list, like selecting their country.
Checkbox is a small box that users can click to select or unselect an option. It's often used for agreeing to terms and conditions.
Radio Buttons are a set of options where users can choose only one. For example, they might choose their preferred contact method - phone or email.
Attach File allows users to upload a file, such as a document or an image, along with their form submission. Uploading multiple files with different file extensions is supported.
Submit Button is a button that users can click to send the information they have entered in the form.
Status Message is a message that appears after the form is submitted, letting the user know whether it was successful or not.
reCAPTCHA is a security feature that helps prevent spam by making sure the form is being filled out by a human and not an automated program.
Most of these Form Elements have identical settings, we'll showcase one Form Element and a few specific settings of several other Form Elements for the sake of this user's guide being concise.
6. The name is used to set a unique ID and receive the key and value in the email. However, for the Attach File element, it is currently not visible.
If it was the Input Form element, you could, for example, type in Placeholder "Are you a church member?" and change the Name to "church_member" and if the user types "Yes", you will receive the following in the email - church_member: Yes
In summary, changing the Name of Form Elements makes it more readable to email recipients.
7. Use the Placeholder field to add a title within the form field area. It's used to indicate to the website visitor what to do or what will happen in the form field
You can also rename the button in the Button Text field and set the spacing between the field and button (0, small, medium, or large options are available).
8. Select the "Multiple Files Selection" checkbox to allow the upload of several files in multiple formats.
9. Specify the description text for the Attached File. This will give the user an additional hint and help them better understand the purpose of the field.
You can also select a different Text Style and configure the alignment of the text for different devices.
10. You can also enable validation for your Attach File form element. The following options are available: Required Field, Acceptable File Extensions, Maximum Upload File Size
Required Field - makes the Attach File form element necessary for filling the form
Acceptable File Extensions - allows you to specify multiple file extensions that are allowed for upload. File extensions should be separated by commas and spaces. For example: .jpg, .png
Maximum Upload File Size - allows you to set a limit on the maximum file size for upload for the website visitors. You can also see the following notification below which indicates your maximum file size for upload on the server "Please note that, your server allows to upload files which do not exceed the 55 MB size limit."
11. Switch to the Design tab
12. Select a Preset from the dropdown to change the Attach File button appearance.
Presets are predefined designs that allow users to quickly apply a specific style or layout to a widget. You can customize the preset style in the Design section
Additionally, select the Size of the button.
13. Click "Apply" to confirm the changes for the Attach File Form Element and click "Save" afterward to reflect the changes on the Advanced Contact Form.
14. The Input Form Element is a field for entering short text. The following data types are available for input: Text, Number, Email, Phone, URL, and Date.
15. The Text Area Form Element is a larger box where users can type in longer text, such as a message or comments.
16. The Input and Text Area form elements have the following options for validation: Required Field, Minimum Length, Maximum Length
Required Field - makes the Input and Text Area form elements necessary for filling the form
Minimum Length - specify the least amount of characters the user can enter in the Input and Text Area form elements
Maximum Length - specify the maximum number of characters the user can enter in the Input and Text Area form elements
17. Add a reCAPTCHA form element to your Advanced Contact Form to protect form submissions from spam and abuse. Drag and drop the reCAPTCHA form element to the Advanced Contact Form
18. Click "Connect" to enable Google reCAPTCHA. Please note that to enable Google reCAPTCHA you need to provide API Keys. You can generate such keys here. The required version is reCAPTCHA v2.
19. Paste the Key and Secret Key and click "Save" to confirm the changes.
20. Select the size for reCAPTCHA. Both Normal and Compact sizes allow you to choose Light or Dark Theme for reCAPTCHA.
21. The invisible size allows you to specify the Badge position. You can set it left, right, or inline
Unlike traditional CAPTCHAs, which ask users to click a checkbox and solve a puzzle, invisible reCAPTCHA works in the background. The goal of invisible reCAPTCHA is to improve user experience by reducing friction while still providing robust protection against automated attacks and spam
22. Click "Apply" to confirm the changes for the reCAPTCHA Form Element and click "Save" afterward to reflect the changes on the Advanced Contact Form.
23. Type in the "Email to" field the email addresses that would receive incoming emails from the Advanced Contact Form. Multiple email addresses should be separated by comma and space
Additionally, you can change the Subject of the email in the corresponding field. By default, it's presented in the following format: "New message from yourwebsite(.)com".
24. Click "Edit Messages" to change the error messages for the Advanced Contact Form.
25. Please note that the [MAX_SIZE], [MAX_VALUE], and [MIN_VALUE] are the values that you have manually set for form elements where you enabled validation. These values should not be edited as they will only display on the live preview of the website
Click "Apply" to confirm the changes
26. Click "Edit Events"
27. Click "Edit Events" to check statistics through Google Analytics for a successful and unsuccessful submission attempt in the Advanced Contact Form
First, you should connect to Google Analytics. You can do it in Settings - Analytics by pasting the Tracking ID from your Google Analytics account.
28. Use the checkbox to activate a successful and unsuccessful submission event.
29. An Event has the following components: A hit includes a value for each component, which is 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 attempts.
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 - Home Page, Contacts 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.
30. Here's an example of recommended event settings. Click "Apply" to confirm the changes
Immediately after setting up events in the Advanced Contact Form, Google Analytics will start counting statistics, which you can check in the Behavior - Events - Overview section in your Google Analytics account.
31. Select what action should be taken after form submission. The following options are available: None, Go to Page, Open Popup, Open URL, Open in Lightbox, Go to Blog, Go to Blog Post
None - will lead nowhere
Go to Page - will lead to a specific page
Open Popup - will open a popup window
Open URL - will lead to an external website
Open in Lightbox - will open the image in Lightbox effect, filling the screen and dimming out the rest of the web page
Go to Blog - will lead to the Blog Home Page
Go to Blog Post - will lead to a specific Blog Post
Additionally, select the "Reset Form" checkbox if you need the Advanced Contact Form to reset to a clear state after the user submits data via the form.
The rest of the features here - Spacing and Visible On are common features in most widgets in the website builder. Please refer to this guide for more information on these features.
32. Switch to the Design tab.
33. Select a Preset from the dropdown for the Advanced Contact Form widget. Presets are predefined designs that allow users to quickly apply a specific style or layout to a widget. You can customize the preset style in the Design section
34. Alternatively, select the "Custom Design" checkbox and specify colors for Normal State, Focust State, and Error State. You can set Font Color, Placeholder Color, Icon Color, Background Color, and Border Color for all three states
35. Click "Save" to confirm the changes.
