Are you looking to break a long form into smaller steps? A long form can feel overwhelming and people often abandon it halfway. Splitting it into a few short steps makes it far easier to complete.
With the Form block from Nexter Blocks, you can easily create a multi step form in WordPress.
To check the complete feature overview documentation of the Nexter Blocks Form block, click here.
Requirement – This block is a part of the Nexter Blocks, make sure it’s installed & activated to enjoy all its powers.
Create the Multi Step Form
Add the Form block to the page, then follow the steps –
1. Select Multi Step Form from the form type options.
2. You will get a form with steps already set up. Each step is a Form Step block.
3. Add the required form fields inside each step and customize them as per your requirements.
4. Select a Form Step block to name that step from the Label field. This is also where you can give a step an icon or an image instead of a number.
Note: Each step is named from its own Form Step block, not from the parent Form block.
Choose the Step Navigation Style
Open the Multi Step Progress panel in the block settings. From the Step Navigation Style section, you can choose one of six designs –
- Checkmark Timeline – A line of circles that turn into checkmarks as the visitor moves forward. This is the default.
- Dot Timeline – A simpler line of dots.
- Numbered Tabs – Each step shown as a numbered tab.
- Progress Pill – A single bar that fills up as the visitor moves forward.
- Chevron Steps – Arrow shaped segments pointing forward.
- Icon Tiles – A rounded tile holding the step icon with the label beside it.
Multi Step Progress Options
In the same panel, you will find the following options –
- Show Progress Bar – Turn the whole step indicator on or off.
- Show Step Labels – Show or hide the step names.
- Hide Unavailable Steps – Hide the steps a visitor has not reached yet.
- Space Below Progress – Set the gap between the step indicator and the form fields.
- Connector Line and Connector Thickness – Set the color and thickness of the line joining the steps.
- Back Button Text and Next Button Text – Change the wording on the navigation buttons.
- Space Above Buttons – Set the gap above the Back and Next buttons.
Style the Steps
Below the Multi Step Progress panel you will find three more panels in the same Layout tab – Step Circles, Step Labels, and Step Buttons.
You can set the size, typography, border, border radius, and shadow of the step markers.
You can also set separate colors for the three states a step can be in –
- Upcoming – A step the visitor has not reached yet.
- Current – The step the visitor is on right now.
- Completed – A step the visitor has already finished.
For each state you can set the background, border color, and number color. You can also style the step labels and both navigation buttons, including their hover colors.
Good To Know
- A step is only validated when the visitor moves forward, so people are told about a mistake on the step where they made it.
- Conditional logic keeps working across steps, so a field on a later step can react to an answer given on an earlier one.
- Some options only apply to certain step navigation styles, so the panel hides the ones that do not affect the design you picked.
Now your long form is split into short and simple steps.
