Multi-step forms allow you to create a form that has multiple steps, so that the user completes some fields, click Next, complete some more, click Next or Previous, and so on. until the last step is completed, at which time the form can be submitted.
Steps are special form fields that act as separators and allow users to:
- Choose pacing indicator (for example, next / previous)
- Icon
- Text
- Icon + Text
- Number
- Number + Text
- Progress bar
- None
- Add icon per step
- Customize the appearance of the steps
- Control over the next and previous items
- Validate the fields of each step immediately
Content
See the form widget documentation for additional form elements.
Form fields
Form name: Enter a name for the form
Form fields - A list of the fields on your form. You can duplicate, add or delete fields as you like. You can drag and drop to change their order.
Click on a field to view its settings. For pass fields, specifically, the following options are available.
- Type - Choose Step to create a new Step field
- Label - The name of the field, which is shown in the form and in the email received from the user.
- Previous button - Enter the button label (for example, Previous, Back, etc.)
- Next button - Enter the button label (for example, Next, Continue, etc.)
- Icon - Select button icon, none, upload SVG or select from icon library
- Inlet size - Set the height of the fields.
- Label - Show or hide the labels on the form.
Steps configuration
- Type: Select the layout of the Steps indicators, selecting from None, Text, Icon, Number, Progress bar, Icon and text or Number and text
- Shape: Select the border around the step indicator, either Circle, Square, Rounded, or None
Style
Steps
Typography: Change the font options for Steps numbers
Spacing: Sets the amount of space between steps and form fields
Filling: Sets the amount of padding around the number of steps
Inactive | Active | Finished
Primary color: Sets the color of the Steps numbers, for inactive, active and completed states
Secondary color: Sets the background color of Steps, for inactive, active and completed states
Divider width: Sets the thickness of the dividing line that separates each step number
Divider space: Sets the space between the dividing line and each step number
