WordPress Multi-Step Form with Step Indicator
Filling out a significant form can be a tiresome process for users. Some of them don’t even complete the form as it is so time-consuming.
Optimize the process by creating a multi-step WordPress form with a step indicator using the JetFormBuilder plugin and its features. This multi-step free WordPress plugin allows customizing a form and making it more user-friendly.
Let’s learn some tips on how to make the form more convenient for filling it out.
Upgrade the Form
- Group fields logically — divide the form fields into coherent sections with the help of Form Break Field. Name these steps accordingly;
- Use the progress bar — show a step indicator of completing the form to notify the user about the number of steps left until submitting the form;
- Set visibility conditions — enable certain fields to display under the specified conditions;
- Optimize the “Next/Submit” buttons — enable the controls to make the form more user-friendly.
As an example, we’ll create two forms that differ in the form break logic. One of them is made with just form breaks, while the other one implies conditional visibility.
Multi-Step WordPress Form
To add a form with the help of our multi-step WordPress form builder, proceed to JetFormBuilder > Add New.
Give a title to the form. For instance, we create a Website Feedback form, so its name is the same.
There are three types of fields shown by default: Hidden, Text, and Action Button Fields. Feel free to delete them if they are unnecessary in your case.
We delete the Hidden and Active Button fields and extend a Progress Bar with some more Text Fields. Don’t forget to enable the Is Required option near desired fields to make completing a specific field obligatory.
It is the first logical part of the form, thus divide it with the help of the Form Break Field.
Set a Field Label that will change the default name of the button. Pay attention that there is also a Label of progress option available, so fill this field in if you want to show the step labels below the progress bar.
Write a Validation message and navigate to the Advanced Settings to enable Prev Page Button and add a CSS Class Name if desired.
The first segment of the form is ready. Form Break Field indicates that the part is complete, and the next section will be displayed after completing the first one.
The second part of the form consists of the Progress Bar, two Action Buttons, a Radio Field, and one more Form Break Field.
This time, we add Action Buttons that represent Prev and Next buttons and lead the user to the previous/next part of the form when clicked.
Also, we switch off the Enable “Next” Button toggle in the Form Break Field settings, as the buttons are already displayed above.
After all the customizations, we can add one more part that will be the final before submitting a form. This time, we attach one more Progress Bar, Checkbox, Textarea, and Action Button Fields.
To change the last label of progress, we should add one more Form Break Field. By default, it will be shown as “Last Page.” So if you want to write your custom label, you can do it in the Form Break Field Block settings.
Please note that you can customize the fields with the help of the JetStyleManager plugin. Just click on the “brush” icon in the top right corner of the Gutenberg block editor screen.
Once you are done with all the customizations, click on the “Publish” button. Let’s add our form to the page and check how it looks.
Go to Pages > Add New or open one of the existing pages. Now we need to use a JetForm block. Choose a form that you have just created and customize its settings.
- Fields Layout — choose how the label will be related to the bar. It can be either “Column” or “Row” options;
- Required Mark — type a symbol that will be displayed near the required fields;
- Submit Type — pick from the “Post Reload” and “AJAX.” The second option will not reload the page after submitting a form, while the first one will;
- Enable form pages progress — toggle to add a step indicator to the form. It works as the Progress Bar field. However, this step indicator is displayed above all the fields. While the Progress Bar can be placed in any desired part of the form;
- Additional CSS class(es) — put the supplemental CSS classes if needed.
When you are done with the editing, click on the “Publish” button. Now you can check the form on the front end.
The WordPress multi-step form is ready. If you want to make the form even more user-friendly, check the next steps to create a multi-step form with conditional logic.
Multi-Step WordPress Form with Conditional Logic
To build a multi-step form with conditional logic, head to JetFormBuilder > Add New. We show an example, while you can create any other form suitable for your needs.
Name the form and delete the default Hidden, Text, and Action Button Fields if you don’t need them.
We delete the default fields and add one Radio Field. In this particular case, options will be filled in manually. Feel free to use other sources in the Fill Options From drop-down menu.
Set the values while clicking the “Manage Items” button, as we may need them for implementing the conditional logic.
This part of the form will be the main one. Depending on the answer given in the Radio block, the following fields will be changed. Let’s build this logic with the help of a Conditional Block.
We add Conditional Block to the page and place the Progress Bar, Checkbox, and Form Break Field inside.
Fill in the Label of progress in the Form Break Field settings to change the default Progress Bar label.
Set conditions by clicking on the Conditional Block.
Define conditions for the “yes” option.
After adjusting all the Conditional Block settings, push the “Update” button.
The following part of the form is also placed in the same Conditional Block.
We add one more Progress Bar, Textarea, and Action Button Fields.
Let’s add one more Conditional Block for the “no” value.
To complete this part, we add the Progress Bar, Textarea, and Form Break Fields.
Click on the Conditional Block to set the conditions.
Update the Conditional Logic by hitting the same-named button.
We finalize the form with the paragraph and the Action Button.
Don’t forget to change the Last Page Name in the Conditional Block settings.
Once the form is fully completed, click the “Publish” button and go to the page where you want to place the form. We proceed to the default WordPress pages by going to the Pages > Add New.
Place a JetForm block onto the page. Choose a newly created form in the similarly named drop-down menu and adjust all the following fields.
When everything is ready, update or publish the page and check out the result.
Once the “yes” value is picked, the form looks like in the picture presented below.
If the “no” value is chosen, other fields are displayed.
Well done. Now you know how to build various WordPress multi-step forms using the JetFormBuilder plugin.