Build a multi-step form
Use multiple steps when questions form distinct stages and a single screen would be difficult to understand. This guide focuses on constructing and testing the layout; presentation and post-submit choices are covered separately.
Plan the stages
Give each stage one purpose. For an application:
- Contact details
- Application details
- Supporting files
- Review and consent
Keep the final step short enough that the visitor can understand the commitment before submitting.
Add and arrange steps
- Open the form’s Builder tab.
- In Form Structure, choose Add Step.
- Edit its Step label and optional description.
- Choose Add Row.
- Add columns manually or use Add preset columns.
- Select a column and add fields from Fields.
- Repeat for each stage.
- Drag the handles to reorder steps or their contents.
- Save the form.
Each column offers Desktop width, Tablet landscape width, Tablet portrait width, and Mobile width. Use inherited widths only when the resulting stack remains clear.
Configure navigation
Open Messages/Behavior → Design options:
- Show stepper above the form displays numbered labels.
- Show dots below the form displays one dot per step.
- Show current step text displays progress such as
1 / N. - Previous button, Next button, and Submit button control style, size, width, and icon.
- The final Submit button also has its own label.
Use “Continue” for intermediate progress and a specific final label such as “Submit application”.
Verify step validation
Test:
- Continue with a required visible field empty.
- Correct the error and move forward.
- Move backward and confirm values remain.
- Trigger conditional fields on later steps.
- Hide a previously completed conditional branch.
- Complete the final submission.
- Repeat at mobile width with keyboard navigation.
Required visible fields should block leaving their step; inactive hidden values should not be delivered.
For progress design, redirects, and duplicate prevention, see Multi-step forms and submission behavior.