You can create a form that spans multiple steps where visitors navigate through separate form screens, each with its own fields. This guide will show you how to create and customize a multistep form on your website.
This feature is available on sites with the WordPress.com Personal, Premium, Business, and Commerce plans. For free sites, upgrade your plan to access this feature.
To create a multistep form, follow these steps:
- Navigate to Jetpack → Forms in your site’s dashboard.
- Click the “Create a form” button to create a new form.
- Give the form a name and click the Create button to enter the form editor.
- In the form templates, select the Multistep Form option.
The form editor opens with a sample multistep form you can customize.
💡
If you already have a regular Form block on a page, you can convert it to a multistep form by clicking the Multistep Form block icon in the block toolbar. The icon looks like three circles with arrows going through them.
A multistep form contains three additional blocks that a regular form does not have:
- Progress indicator: Shows visitors how far through the form they are.
- Steps: A container that organizes the form into separate screens.
- Step navigation: Contains the buttons visitors use to move between steps and submit the form.
Use List View while editing a multistep form to see the structure and select the specific element you want to work on.
In the toolbar above the form, click All steps to switch between editing all steps in one view or focusing on one step at a time. The horizontal lines in the “All steps” view mark the beginning of each new step.
Each step has a label you can click to customize. The label is private to you—visitors do not see it.
A multistep form starts with three steps. To add more, follow these steps:
- Click on an existing step in the form, or select it in List View.
- In the toolbar that appears, click the Add button.
- Choose “Add step before” or “Add step after“.
To remove a step, click on it or select it in List View, then click the three-dot (⋮) icon and select Delete.
📌
Make sure to keep the Step navigation block in your form so that your visitors can navigate between each step of the form!
Multistep forms support the same fields and customization options as regular forms. You can add, remove, and configure form fields within each step and change colors, fonts, and layout from the style settings.
To change the progress bar style, follow these steps:
- Open List View and select the Line block (the default progress bar).
- In the block settings sidebar, toggle between the Line and Dots options.
- Click Save to save your changes.
Before publishing, test your form to make sure visitors can move through each step correctly. Use the Preview option in the editor to open the page as it would appear to a visitor, and complete the form to check the flow.
Like regular forms, you can choose what happens after submission, set up email notifications, and view responses from the Forms dashboard.
Once you’re satisfied, click the Publish button to publish your form.
Once you have created the multistep form, follow these steps to add the form to your site:
- Open the page or post in the WordPress Editor.
- Click the + block inserter button.
- Search for “form” and click Form to add a new Form block to your content.
- Choose the form you created from the Or select an existing form drop-down.
💡
You can also add a Multistep Form block directly to a page using the block inserter. Creating your form in the form editor first keeps all your forms in one place and makes future edits easier.
