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 add a multistep form to 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 add a multistep form to a page or post, take the following steps:
- Click the + (block inserter) button.
- Search for “form” and select the Multistep Form block from the results:
- The Multistep Form block will appear, with sample fields for you to customize.
If you add a regular Form block, you can quickly convert it to a multistep form by clicking the Multistep Form block icon in the block description. The icon looks like three circles with arrows going through it:
💡
If you’re missing the Form block, it’s likely you are running a WordPress.org website. Install the free Jetpack plugin to add the Form block to your site.
When you first add a Multistep Form block, you’ll notice some additional elements not part of the regular (i.e., single step) Form block.
A typical Multistep Form block contains the following blocks within it:
- Progress indicator: Show a visual indicator of progress through multi-step forms.
- Steps: A container that organizes multiple form steps within it.
- Step navigation: Contains the buttons for visitors to navigate through the form and the Submit button.
These blocks can be added to columns and groups to further customize the layout if you wish.
We recommend using List View while creating and editing a form, because it helps you select the specific form element you wish to work on.
In the toolbar that appears above the Multistep Form block, you can click on the “All steps” option (marked with a ‘1’ in the image below) to switch between editing all the steps in one view to editing one step only. If your form has a lot of fields, you may find it easier to focus the view on one step at a time.
The horizontal lines in the “All steps” view (marked with a ‘2’) show the beginning of a new step. Each step also has a label that you can click on to customize. The label is private to you — it is not shown publicly to your visitors.
After you’ve added a Multistep Form block to your page or post, you can tailor it to collect exactly the information you need from your visitors.
To add, remove, or change the order of fields in your form, follow the steps below:
- Click on the existing field you want to edit. You can:
- Type a new name for each field.
- Set the field as required or optional by clicking the asterisk * symbol in the toolbar.
- Change the styles like color and font size in the block settings sidebar.
- To add a new field:
- Open the List View and select a field that is before or after the new field you’re going to add.
- Click the Options icon (⋮) and then select “Add before” or “Add after” to create a space for a new field.
- Click the block inserter (+) and choose from the available fields, such as text box, checkbox, dropdown, and more form fields.
- To remove a field:
- Open the List View to select the field you want to remove.
- Click the Options icon (⋮) and then select the “Delete” option.
- To reorder fields:
- Open the List View to select the field you want to move.
- Use the up or down arrows in the toolbar to rearrange the order.
- To change the progress bar:
- Open the List View to select the Line block, which is the default progress bar.
- In the block settings sidebar on the right, you can toggle between a Line and a Dots option.
- Click Save to save your changes.
Visit our detailed guides for more in-depth instructions on working with forms.
A multistep form will start with three steps, and you can add more as needed:
- Click on an existing step in the form, or select it in List View.
- In the toolbar that appears with the step, click the Add button.
- Choose “Add step before” to insert a new step before the step you selected, or “Add step after” to create a new step after the one you selected.
To remove a step, click on it or select it in List View. Then, click the ⋮ icon and choose the Delete option.
📌
Make sure to keep the Step navigation block in your form so that your visitors can navigate between each step of the form!
Once you have created your multistep form, you can test your form from the site visitor’s perspective to ensure it works as intended. Use the Preview option in the editor to open the page as it would appear to a visitor, and complete the form to make sure it flows correctly:
Just like with the regular Form block, you can choose what happens when a form is submitted, control which email address(es) messages are sent to, and view the form submissions in your dashboard.
When your form is ready, publish your page to share it with the world!
