WordPress Multi-Step Form with Step Indicator

Filling out a significant form can be a tiresome process for the user. 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 the Form Break Field. Name these steps accordingly.
  • Use step indicator. Show progress of completing the form that will notify the user about the number of steps left until submitting the form.
  • Optimize the “Next/Submit” buttons. Change the text of the controls that will let the user know about the progress.

Create a 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 will create a Website Feedback form, so its name will be the same.

There are three types of fields shown by default: Hidden, Text, and Submit Fields. Feel free to delete them if they are unnecessary in your case.

For now, we will delete Hidden and Submit Fields and adjoin a couple of more Text Fields. Don’t forget to enable the Is Required option near desired fields to make completing a specific field obligatory.

It will be the first logical part of the form, thus divide it with the help of the Form Break Field.

Add a Field Label that will change the 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 enable a step indicator and show the step labels.

Write a Disabled 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 our form will consist of the Radio Field and one more Form Break Field.

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 will attach Checkbox, Textarea, and Submit 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.

Pay attention that in order to make this step the last, check that you don’t have any other fields after the last Form Break Field.

 the last 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.

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.

Add a Form to the Page

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 continue to work with other customizations.

adding a multi-step form to the 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 this option on as our goal is to add a step indicator to the form. Now the steps will be visible;
  • 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

Well done, the WordPress multi-step form is ready.