Columns and Multi-Step Forms
Column layouts
Use the One Column to Six Column fields (under Container Layouts) to put fields side by side.
- Drag a column layout, for example Two Column, onto the form.
- Drag fields into each column, or click the + inside a column.
- Select the layout to change its options.
Column options
| Option | What it does |
|---|---|
| Columns | The width of each column. Use Equal widths to reset them. |
| Column Gap | None, Small (8px), Medium (16px) or Large (24px). |
| Stack on mobile | Puts the columns under each other on small screens. |
| Container CSS Class | An extra class for the row. |
| Conditional Logic | Hide the whole row, with all its fields, based on other answers. |
A column layout cannot be placed inside another column layout.
Multi-step forms
Long forms are easier to fill in when they are split into steps.
- Drag a Step Break field to where the next step should start.
- In its options, set:
- Next step title: the title of the step that starts here (shown in the progress indicator).
- Next button text and Previous button text.
- Add more Step Breaks for more steps.
Multi-step settings
Open the form’s Settings › Multi-step:
| Setting | What it does |
|---|---|
| Progress indicator | Numbered steps, Progress bar or None. |
| First step title | The title of the first step. Each Step Break sets the title of the step after it. |
| Check each step before moving on | Visitors must fix errors on a step before they can go to the next one. |
Tip: Combine multi-step forms with Save Progress so visitors can finish long forms later.