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.

jetformbuilder add new form

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 part of the website feedback form

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.

button action type dropdown

Also, we switch off the Enable “Next” Button toggle in the Form Break Field settings, as the buttons are already displayed above.

the second part of the website feedback form

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.

NOTE! If you want to make a step the last, check that you don’t have any other fields after the last Form Break Field.
the third part of the website feedback form

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.

jetstylemanager settings

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.

adding a multi step form to the gutenberg edited page
  • 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.

multi step form on the page

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.

jetformbuilder add new form

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.

the main part of the multi-step form with conditional logic

Set the values while clicking the “Manage Items” button, as we may need them for implementing the conditional logic.

radio field manual options

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.

conditional block for the yes option

Set conditions by clicking on the Conditional Block.

conditional block button

Define conditions for the “yes” option.

conditional logic 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.

the second part of the conditional block for the yes option
NOTE! This time, change the Last Page Name of the Progress Bar in the Conditional block settings.
conditional block for yes option last page name

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.

conditional block for the no option

Click on the Conditional Block to set the conditions.

conditional logic for the no option

Update the Conditional Logic by hitting the same-named button.

We finalize the form with the paragraph and the Action Button.

the second part of the conditional block for the no option

Don’t forget to change the Last Page Name in the Conditional Block settings.

conditional block for no option last page name

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.

website feedback form on the gutenberg edited page

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.

form on the front end yes option

If the “no” value is chosen, other fields are displayed.

form on the front end no option

Well done. Now you know how to build various WordPress multi-step forms using the JetFormBuilder plugin.