Learn how to use the Advanced Forms widget to create more flexible forms and collect detailed visitor information on your Booking Website Pro site.
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.
The following are some benefits of 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.
Create Advanced Form
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:
- In the side panel, click Add, then click Elements.
- Search for Advanced Form, then drag and drop it onto the canvas.
- (Optional) If you are creating a multi-step form, click the widget to open the floating menu and click Manage Form. Click the Content tab, then click +Add Page. Click the three-dot icon next to the page to rename, duplicate, or delete the page. Duplicating the page preserves the layout of the original page, saving you time when creating multiple pages.
- 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.
- Click the Submit Button widget to open the floating bar. Click the "Manage Button and enter the text you want displayed on the button.
-
Click the Advanced Form widget to open the floating bar, and click Manage Form. On the Manage Steps tab of the context menu, you can access the success and error message screens by clicking Success or Error. Configure these screens by updating the default text and adding inner columns and widgets as desired.
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 Manage Form to open the context menu.
- On the Settings tab of the context menu, 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.
You can view Advanced Form responses in the editor or in the site dashboard. 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 Form widget offers greater design flexibility and customization options, while the Contact Form widget offers more basic design and fewer customization options.
The 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 |
Coming soon Advanced Forms will support conditional logic for both steps and fields. |
| 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 Manage Form. Click the Content tab, then click +Add Page. Note that a 'back' button is added by default if you have more than 2 pages.
Click the three-dot icon next to the page to rename, duplicate, or delete the page. Duplicating the page 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 Manage Form.
- Click the Content tab, then 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.
Yes, you can enable this setting in the Submission settings tab in the Advanced Form widget’s context menu.
To send site visitors a copy of their form responses:
- Click the Advanced form widget to open the floating bar, then click Manage Form.
- On the Submission Settings tab, scroll down and expand the Email Settings 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 Manage Form.
- On the Submission Settings tab, scroll down and expand the Email Settings 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.