Use the Step Break field to divide a long form into separate pages. Each step can contain a group of related fields, with navigation buttons that let visitors move through the form. The first step begins at the first Step Break field, so place that field before the questions intended for the first page.
Create the steps
- Open the form in the visual editor.
- Add a Step Break field from the field picker and move it to the beginning of the form.
- Place the fields for the first page after the Step Break field.
- Add another Step Break after that group, then place the next group of fields after it. Repeat for each additional step.
- Save the form and check the frontend preview. The editor displays a placeholder for the step field, so verify the actual navigation and layout on the frontend.
Set each step’s title and buttons
Select a Step Break field and use its Content tab, under Step Settings, to configure the available labels:
- Step Title: an optional title for the step.
- Next Button Label: the text on the button that moves forward. The default is Next.
- Previous Button Label: the text on the button that moves back. The default is Previous.
The first step does not display a Previous button. The final step hides its Next button and displays the form’s submit button.
Choose a progress indicator
In the form’s style settings, open Steps Field and choose Indicator Type. The default is Numbers & Labels. To configure the indicator’s line style, marker size, spacing, typography, and colors, see Customize Multi-Step Form Indicators.
- Numbers & Labels: show numbered steps and their titles when titles are set.
- Progress Bar: show progress and text such as “Step 1 of 3”.
- Dots Only: show a dot indicator for each step.
- None: hide the step indicator.
Review the completed flow
- Group related questions together and keep each step focused.
- Use clear step titles and button labels that describe what visitors should do next.
- Try Next and Previous, and confirm entered values remain when moving between steps.
- Test the required fields on each step and the final submission. See Validate Multi-Step Form Submissions.
Screenshot to add: Form editor with two Step Break fields and the Steps Field indicator setting