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 .
Note
Not sure which form widget you're using? Click a field in the form. If only that field is selected, it's an advanced form. If the whole form is selected and the floating bar shows Manage Form, it's the Contact Form widget. See Widgets: Contact Forms.
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.
-
Conditional logic. Allows the form to adapt and show/hide certain fields based on the user's previous responses.
-
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
Following are the current limitations:
-
Both input 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:
Each field, inner column, and widget inside an advanced form is its own element. When you click a field, only that field is selected, and the floating bar shows the field's options (Content and Edit Design) instead of the form's options.
To select the whole form:
-
On the canvas, click any field or element inside the form.
-
Do one of the following:
-
Hover over the breadcrumb above the floating bar, then click Advanced Form.
-
If the design panel is open, click Advanced Form in the breadcrumb at the top of the panel.
-
When the form is selected, the floating bar shows Steps, Settings, and Edit Design.
When creating an advanced form, you can customize the design with inner columns and widgets, then customize the functionality with input fields, steps, and conditional logic.
To create an advanced form:
-
Search for Advanced Forms, then drag and drop it onto the canvas.
-
Drag and drop inner columns and widgets from the Element panel as needed to achieve your desired design.
-
Drag and drop input fields into your form from the Form section of the Element panel.
Available input fields: short text, long text, checkbox, radio button, opt-in field, dropdown, phone number, date, time, file upload, number, and email.
-
Click an input field to open the floating bar, then 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.
-
(Optional) Add steps to your form by following the instructions in the Add steps to an advanced form section. Note that each step is placed on a new page inside the form.
-
(Optional) Add conditional logic to your form by following the instructions in the Add conditional logic to an advanced form section.
-
Configure form submissions settings by following the instructions in the Configure submission settings for an advanced form section.
Note
To collect a visitor's consent, for example for GDPR, add an Opt-in field. Unlike other field types, the Opt-in field can’t be set as required. For more about collecting consent, see Forms Overview.
You can create a multi-step form where each step appears on a separate page.
To add steps:
-
Select the advanced form (see Select an Advanced Form), then in the floating bar, 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 learn more about when conditional logic can be helpful, see Use cases for conditional logic.
Important notes:
-
If you delete a field that is part of a conditional logic rule, the logic will break and the form will not work properly. A "Logic issue" error message also appears next to the rule.
-
Fields or form steps that use conditional logic cannot be duplicated.
To add conditional logic:
-
Select the advanced form (see Select an Advanced Form), then in the floating bar, then in the floating bar, click Settings.
-
Click the Logic tab in the Manage Form dialog.
-
Click + Add Rule.
-
Enter a rule name. This is only visible internally and does not display to site users.
-
For the IF portion of the rule, use the dropdown menus to select a field from the form, how the condition* is defined, and if applicable, what the value needs to be for the condition to be met and trigger the THEN portion of the rule.
*Depending on the type of field selected, the available conditions include: is equal to, is not equal to, is empty, is not empty, contains, does not contain, starts with, does not start with, ends with, and does not end with.
-
For the THEN portion of the rule, use the dropdown menus to select the action* that occurs when the IF condition is met and which form field the action is applied to.
*Available actions include: show, hide, make optional, or make required.
-
Click Save.
Conditional logic is a powerful tool that allows you to adapt form fields in real-time based on the user's previous answers. Following are use cases for various industries.
Real estate lead capture
A real estate company uses an advanced form to capture leads. To ensure agents receive qualified leads, the following conditional logic can be added to the form:
-
If "buying" is selected, show fields that ask about budget and preferred area.
-
If "selling" is selected, show fields that ask about property type and estimated value.
-
If "renting" is selected, show fields that ask about move-in dates.
Pet services
A business that offers pet services (such as a grooming, veterinary, or training) allows customers to book appointments through an advanced form. To provide a more personalized experience for the customer, the following conditional logic can be applied to the form:
-
If "dog" is selected as the pet type, show fields that ask about age and gender.
-
If "cat" is selected as the pet type, show fields that ask about the cat's indoor or outdoor status.
-
If requesting a grooming appointment, show fields that ask about the pet's coat type.
-
If requesting a training appointment, show fields that ask about behavioral concerns.
Use hidden fields to collect additional information about the form submitter, such as tracking data, campaign identifiers, and CRM routing values. Hidden fields are not visible to the site visitor and do not need to be filled out manually, but are included in the form submission.
Available hidden fields:
-
Auto-collected metadata. Records metadata that your website already tracks.
-
URL parameter. Records values from the URL the visitor arrived with, such as an ad campaign ID.
-
Static value. Records a fixed value per form.
-
Dynamic data binding. Records values from the current page where the form is. This can be helpful when the form is on a dynamic page, such as a store product page.
-
Custom (JS). Records a custom value.
To add a hidden field:
-
Click the Advanced Form to open the floating bar, then click Settings.
-
In the Manage form dialog, click Hidden Fields.
-
Click + New value source, and select one of the following:
-
Auto-collected metadata
-
URL parameter
-
Static value
-
Dynamic data binding
-
Custom (JS)
-
-
Depending on the selected source, either use the Value dropdown menu or Value text field to enter a value.
For Custom (JS), click Open dev mode. Review and edit the added code, then click Save.
-
Type a Display Name. The display name appears in the form submission table as the column name for the data.
-
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 submission settings:
-
Select the advanced form (see Select an Advanced Form), then in the floating bar, click Settings.
-
On the Settings tab of the Manage form dialog, type a Form name. This name is only visible internally. Give each form a different name so it's easy to tell forms apart when viewing form responses.
-
Expand Email Notification to Site Owner to set up the email sent when someone submits the form:
-
Sent from. Type a name. By default, this field displays your business name or site domain.
-
Email subject. Enter a subject line.
-
Notify by email to. Enter the email addresses that receive form submissions. To add more than one, press Space or Enter after each address.
-
Use email in the Content Library. Check this box to send form submissions to the email listed in the content library.
-
-
(Optional) To send site visitors an email copy of their responses, expand Email Notification to Site Visitor:
-
Auto-reply to form submitter. Turn on this toggle to send the email as soon as the visitor submits the form.
-
Sent from, Email subject, and Email message. Set up the email the visitor receives.
-
-
(Optional) To send visitors to another page after they submit, expand After Submission Settings, click Redirect to a page after submission, and select a site page or external URL. Visitors are redirected instead of seeing the success message.
You can view form submissions in the editor or in the project dashboard, however form responses can only be downloaded from the project dashboard.
Editor
To view form submissions in the editor, click More in the side panel, then select Settings. Click the Manage Form Responses tab.
Project Dashboard
To view responses in the project dashboard, navigate to your site list, then click the project dashboard icon next to the desired site. In the Project 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.
To view available integrations, select the advanced form (see Select an Advanced Form), then in the floating bar, click Settings. Click the Integrations tab, then click the integration you want and follow the on-screen prompts.
Note
Users must have Free App Management permission to add integrations. If a user does not have the permission, the Integrations tab will be empty.
The Advanced Forms 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 Forms 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. |
To set up the Contact Form widget, see Widgets: Contact Forms.
To edit form messages:
-
Select the advanced form (see Select an Advanced Form), then in the floating bar, 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:
-
Select the advanced form (see Select an Advanced Form), then in the floating bar, click Settings.
-
Expand the Email Notification to Site Visitor section.
-
Enable the toggle next to Auto-reply to form submitter. Then, configure the Sent from, Email subject, and Email message fields.
Yes. Add the recipient's email address in the form's settings.
To send an email when a visitor submits a form:
-
Select the advanced form (see Select an Advanced Form), then in the floating bar, click Settings.
-
On the Settings tab, expand Email Notification to Site Owner.
-
In Notify by email to, enter the email addresses that should receive form submissions. To add more than one, press Space or Enter after each address. Or, check Use email in the Content Library to send form submissions to the email listed in the content library.