In this article, you will learn how to setup a multi step form by Piotnet Forms.
Multi Step Forms allows you to divide a long form into many steps. Users should complete each form and click Next until they finish the last step and Submit.
In this example, we have a travel questions form. We will divide this form into 3 steps.
To divide the form, you need to use the Form Step widget.
Drag and drop the widget into places where you need to put an end for each steps. In this example, I put 2 Form Step widgets between the 3 questions to divide the form to 3 parts.
Since the Form Step widget automatically creates submit button, you can remove the primary submit button.
Basically your multi step form is completed now.
There are many options in the multi step form feature for the demand of customization.
Edit the Multi Step Start widget to open these options:
– Disable Progress bar: Show/hide the progress bar.
– First Step Title: Name the first step.
– Scroll To Top: Auto scroll to top of the form step after click next – useful for long forms.
Negative Offset Top: Setup default distance to top of page after auto scroll triggered.
Edit the Form Step widget to open these options:
– Disable buttons: Disable the Next and Previous button. Activate this option if you choose to use alternative button.
– Press enter to go to the next step: Enter instead of click button to move to next step.
– Next step title: name the step after the Form Step widget.
– Buttons tab: Show/hide and change text inside the buttons.
Edit the Multi Step End widget to open similar options and to set action after submit.
Still more in Style and Advanced tab of the control for your choice.
Beside our default multi step form Next/Previous buttons, the feature also offer Alternative button: set other elements to play the role of Next and Previous buttons. The elements could be text, image, icon, etc.
Back to the example, I will replace the default next/previous buttons by arrow icons:
– Firstly: Edit Form Step and Disable Buttons, Edit Multi Step End and Disable Previous Button.
– Afterward: Add arrow icons into the positions
– Finally: Edit the icons, in advanced tab, Enable Next/Previous Multi Step Form, set suitable actions for the icons: Next or Previous.
Now I have this result in step 2 (the same for other steps):
Alternative button is very useful for customizing multi step form style.