How To Build a Multi-Step Form with a Progress Bar

Want an easy way to build a multi-step form with a progress bar? Follow this simple guide to make forms clear, user-friendly, and effective.

Approximate read time: 6.5 minutes

A WordPress multi-step form (also called a multi-page or multi-part form) enhances the user experience and boosts form conversions. More on that below.

By the end of this guide, you'll have a multi-step form with a progress bar that encourages users to complete it. We'll show you how to do it step-by-step using one super easy plugin, then make it even smoother with AJAX page transitions, which load each step without reloading the page. Before starting, we'll examine why a multi-step form can increase conversion rates and grow businesses.

Let's get started.

Why use a multi-step form in WordPress?

Nothing kills excitement like a super long form.

We've all been there: ready to sign up for a new website, until the signup form turns out to be too long.

Did you skip it? If you did, you wouldn't be the only one.

The business data experts at The Manifest found that 81% of people have abandoned a form before completing it. They also found that 27% left a form because it was too long.

That's not all, though. The landing page experts at Instapage chronicled a case where multi-step forms increased lead conversion by 214%.

If your forms are too long, stats like these say it's time to split them up.

The problem with long forms is that completing them feels like work to the end-user. Your business (or your client's) solves problems. It shouldn't create new ones. Long forms increase friction, which leads to lower conversion rates.

Friction in a form is like walking in tar. Any part of the conversion process that slows the user down makes them less likely to complete the action. In other words, it's bad news.

So what's the solution? A form with multiple steps.

As mentioned before, splitting forms into smaller parts is great for improving form conversions, but there are other uses.

For instance, you can use multi-step forms for quizzes or longer surveys, which are great tools for learning more about your audience.

And if you sell services online with WordPress, you need multi-step forms to get more customers.

Convinced? Let's take a look at some best practices.

Multi-step form best practices

Noted American statistician Edward Tufte said, "The most common user action on a website is to flee."

When you think of web traffic in those terms, you likely want to optimize every aspect of the website you're building. That's a long but rewarding undertaking. As a first step, let's learn some best practices for multi-step forms.

• Optimize your call-to-action (CTA) button (submit button): Change the text on your form button to show users they will be taken to another page. For example, you could change the text to "Next →".
• Segment form steps logically: Try to group form fields logically. For example, group payment and shipping info together. Always think about the end-user when dividing your form up with page breaks.
• Use a progress bar: It makes navigating between each page and jumping to a different step easier. This also allows users to go back and fix mistakes.
• Include a summary page: Users can preview their submission before submitting, which reduces incorrect submissions.

Following these guidelines will help a lot when it comes to multi-step forms. But don't forget about all the other things you can do to generate more leads on your site.

How to create a multi-step progress bar form

Step 1: Create a form in WordPress

You only need a great WordPress multi-step form builder to start.

A great progress bar plugin for forms will quickly solve the problem.

A few plugins can build multi-step forms, but we'll focus on the top option for now. And that's Formidable Forms.

The first thing we need to do is create a form in the WordPress admin. With Formidable, you can create a registration form, contact form, or any other form you need.

For this tutorial, we'll install Formidable Forms Pro. Then, click Formidable → Add New to create a new form.

You can create any form you want. We'll show you how to create a multi-step contact form to keep things simple. Here are a few multi-step form designs our team built for you. Check out these stepped form templates:

• Create a WooCommerce product
• Travel booking form
• Mortgage application form
• Bakery order form

Step 2: Split up a form with page breaks

Once you've created a form, the next step is to add page breaks. These split one long form into a multi-page form with clear steps!

To add page breaks to a form, use Formidable's drag and drop form builder. Under Advanced Fields, drag the Page Break field into the form.

Step 3: Add a progress bar

After you've split the form into at least 2 parts, you can add a progress bar so users always know how far along they are.

At the top of the form builder, click Click here to set up progress indicator. This opens the Field Options panel for the progress indicator.

From there, set the Rootline dropdown to add the progress indicator and choose how it appears. You get 3 options:

• Show Progress bar: the classic horizontal bar that fills in as users move through each step.
• Show Rootline: a connected line of labeled circles, one for each step.
• Hide Progress bar and Rootline: turns both off.

Once you choose Show Progress bar or Show Rootline, a few more options appear in the same panel. Set the Position, which sits below the form title by default, then fine-tune it with the checkboxes:

• Show page titles with steps: displays each page's name on the bar, so users see labels like Contact Info and Your Message.
• Hide the page numbers: removes the step numbers if you want labels only or a cleaner bar.
• Hide lines in the rootline or progress bar: drops the connecting lines for a more minimal look.

We recommend checking Show page titles with steps and giving each page a clear name, so users always know where they are. On the front end, the progress bar looks like this:

Prefer labeled steps? Choose Show Rootline for a connected line of circles instead:

Step 4: Style the progress bar to match your site

Once your progress indicator is set, you can style it to match your site. Open the Style tab at the top of the form builder and adjust your form's colors.

The progress bar and Rootline update to match as you go, and you can preview every change without touching any code.

Step 5: Publish the multi-step form

Now, add your new multi-step form to any page or post and publish the form.

Before wrapping up, you might consider more optimization, like conditional logic. With conditional logic, you can ensure site users only answer the questions that matter most based on their input.

With multi-step forms, conditional logic opens up a lot of possibilities.

Here's one simple idea: Ask users to choose their request using a dropdown box on the first page. You can then configure the form to show different options based on their selection!

Add AJAX for smooth step transitions

Conditional logic keeps your form short. AJAX is the other upgrade worth making. By default, moving between steps can reload the page, which feels slow and can lose a user's place. With AJAX, each step loads in place without a full page refresh, so the form stays fast and there's no flash or scroll jump between steps.

In Formidable, turn this on in the Form Settings by enabling AJAX submission. It's especially worth doing on longer forms, where smooth transitions between steps keep people moving toward the finish.

Ready to create your multi-step form with a progress bar?

That's it. Now you can see how easy it is to build a multi-step form with a progress bar in Formidable Forms.

For more WordPress wizardry, be sure to follow the Formidable blog!

Read more about multi-step forms with progress bars

• How to Preview Form Answers Before Submitting a WordPress Form
  Read More