Note
This information is specific to the Editor 2.0, formerly known as the All-Flex Editor. To identify your current editor version, see How to Identify the Editor Version Your Site Uses .
The Advanced Forms widget allows you to build custom forms that drive both engagement and conversion, and integrate seamlessly with your site design. For example, you can create a form to collect information about potential customers, gather customer feedback, or offer account and event registration. You can even split long or complex forms into multiple steps for a smoother, more focused form experience that helps increase completion rates.
Following are some benefits to using the Advanced Forms widget:
-
Design flexibility. Add widgets and inner columns to truly customize the form design.
-
Custom messages. Write custom success and error messages that are tailored to your business.
-
Submission settings. Define who receives a copy of form submissions and configure where visitors are redirected after the form is submitted.
-
Submission tracking. Easily view form responses both in the editor and from the site dashboard.
Limitations
While the Advanced Forms widget is in testing, there are several limitations:
-
Fields and the submit button must stay inside the form container.
-
The submit button cannot be deleted or duplicated.
For a quick overview and demo of the Advanced Forms widget, check out the following video:
By default, the Advanced Form widget has a predesigned template that includes error and success messages. You can customize the form to meet your business needs by adding input fields, inner columns, widgets and even additional pages for multi-step forms.
To create an Advanced Form:
-
Search for Advanced Form, then drag and drop it onto the canvas.
-
Add inner columns and widgets as needed by dragging them from the widget panel into your form.
-
Add input fields to the form by dragging and dropping them from the Form section of the widget panel. The input field options are: short text, long text, checkbox, radio button, opt-in field, dropdown, phone number, date, time, file upload, number, and email.
Note that the appearance of input fields on your live site may differ slightly from what you see in the editor, depending on the browser used to view the form.
-
To configure an input field, click the field widget to open the floating bar and click Content. As applicable, configure the field title, placeholder text, options, and whether the field is required to submit the form. Repeat for each field you added to the form.
You can create a multi-step form, with each step on a separate page.
To add steps:
-
Click the Advanced Form widget to open the floating menu and click Steps.
-
Click +Add Step for each step you need. Drag and drop the steps in the desired order.
-
Click the three dot icon next to the step to rename, duplicate, or delete the step. Duplicating a step preserves the layout of the original step, saving you time when creating multiple steps.
Conditional logic allows you to set rules that control how a form behaves based on what the user enters. The form uses if/then logic to adapt to previous user responses by making fields appear, disappear, or become required.
To add conditional logic:
-
Click the Advanced Form widget to open the floating menu and click Settings.
-
Click the Logic tab in the Manage Form popup.
-
Click + Add Rule.
-
Enter a rule name. This is only visible internally and will not display to site users.
-
Use the IF dropdown menu to select the field and the condition. If required, add the value of the condition.
-
Use the THEN dropdown menu to select the action that occurs when the IF condition is met.
-
Click Save.
In the form’s submission settings you add a form name, configure emails sent to the site owner and site visitor who submitted the form, and optionally redirect site visitors to a specific page or external website after submitting the form.
To configure form submission settings:
-
Click the Advanced Forms widget to open the floating bar, then click Settings.
-
On the Settings tab of the Manage Form popup, expand the various sections and configure the following:
-
Form name. Type a name for the form. This name is only visible internally. We recommend giving each form a different name so it is easy to distinguish between forms when viewing form responses.
-
Sent from. Type a name. By default, this field shows your business name or site domain.
-
Email subject line. Type a subject line.
-
Notify by email to. Enter an email address in this field. If entering multiple emails, separate with a space or click the enter key.
-
(Optional) Check the Use content library email checkbox to have the form submissions sent to the email listed in the content library.
-
-
(Optional) Enable the Auto-reply to form submitter toggle if you want site visitors to receive an email copy of their responses. The email is sent as soon as the site visitor submits the form. If enabled, you will need to configure the Sent from, Email subject line, and Email message fields.
-
(Optional) In the After Submission Settings section, click Redirect to a page after submission to select the existing site page or external URL that site visitors are directed to after submitting. If enabled, it skips the success message.
-
The Advanced Form is unique because you can add inner columns and widgets, and then style each element independently. For input fields, you can modify the alignment, spacing, size, and animation from the design panel.
By default, Theme styles are applied to the Advanced Form elements, but can be overridden by any selections you make in the design panel for a particular element.
To learn about the various design options in the design panel, see Design with Flex.
You can view Advanced Form responses in the editor or in the site dashboard, however form responses can only be downloaded from the site dashboard.
Editor
To view form responses in the editor, click More in the side panel, then select Settings. Click the Manage Form Responses tab.
Site Dashboard
To view responses in the site dashboard, navigate to your site list, then click the site dashboard icon next to the desired site. In the Site Overview section, click Form Responses. If you need to download form responses, click Export to CSV.
The Advanced Forms widget currently offers integrations with Zapier, Google, MailChimp, HubSpot, Albato, and ActiveCampaign. We are working on adding more integrations in the future.
To view integrations, click the Advanced Form widget to open the floating menu and click Settings. Click the Integration tab to view available integrations. Click the desired integration and follow the on-screen prompts.
The Advanced Form widget offers greater design flexibility and customization options, while the Contact Form widget offers more basic design and less customization options.
Following is a comparison of larger features:
|
Feature |
Contact Form widget |
Advanced Form widget |
|---|---|---|
|
Add and arrange widgets |
No |
Yes You can add any widgets and flex elements into the Advanced Form container. |
|
Unique widget fields |
No |
Yes Each field in the Advanced Form is a separate widget, which allows you to design each field individually. |
|
Custom success and error messages |
No |
Yes Write and design custom success and error messages for form submissions. |
|
Multi step form |
No |
Yes |
|
Conditional logic |
No |
Yes |
|
Integrations |
Yes. View available integrations. |
Yes |
|
Available form fields |
Text, dropdown, radio button, checkboxes, file attachment, date, time, long text, click to email, phone number, opt-in, number, and free text. |
Radio button, email, short text, long text, opt-in, number, phone number, checkbox, date, file upload, time, and dropdown are currently available. |
Multi-step forms are a great solution for complex forms with many questions. Instead of presenting visitors with a long list of questions, each step in the form can contain one or multiple related questions, making forms feel simpler and helping improve submission rates for lead forms, questionnaires, and complex requests.
To create a multi-step form, click the Advanced Forms widget to open the floating menu and click Steps. Click +Add Step for each step you need to add. Note that a 'back' button is added by default if you have more than 2 steps.
Click the three dot icon next to the step to rename, duplicate, or delete the step. Duplicating the step preserves the layout of the original page, saving you time when creating multiple pages.
To edit form messages:
-
Click the Advanced Form widget to open the floating bar, then click Steps.
-
Click either Success or Error. On the canvas, the widget now displays the default text for either the success or error message instead of the form’s steps or fields.
-
Click the text widget that contains the error or success message and edit the text and design as desired. You can add additional widgets or inner columns in this view as well.
To send site visitors a copy of their form responses:
-
Click the Advanced form widget to open the floating bar, then click Settings.
-
Expand the Email Notification to Site Visitor section.
-
Enable the toggle next to Auto-reply to form submitter. You will need to configure the Sent from, Email subject line, and Email message fields.
Yes. To receive an email when the form is submitted, you need to add the email address of the desired recipient in the content panel of the form.
To send an email when a visitor submits a form:
-
Click the Advanced form widget to open the floating bar, then click Settings.
-
On the Submission Settings tab, scroll down and expand the Email Notifications to Site Owner section.
-
Enter an email in the Notify by email to: field. If entering multiple emails, separate with a space or click the enter key. Or, check the Use content library email box to have the form submissions sent to the email listed in the content library.