Formidable Forms

Formidable Forms

  • Features
  • Templates
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

Formidable Team / Last Updated September 11, 2023

How to Create a Multi-Step Form with Progress Bars

Long forms not converting? Try a multi-step form with progress bars! We'll show you how to create a multi-page form on a WordPress site.

How to Build a Multi-Step Form in WordPress with progress bars

Approximate read time: 6.5 minutes

Do you want to build a multi-step form on your WordPress site? You're in the right place!

Get Better Forms FREE!
 

Multi-step forms (also called multi-page forms or multi-part forms) enhance user experience and boost form conversions. More on that below.

Before we get started, let's take a look at some great reasons why a multi-step form can increase conversion rates and grow businesses.

Formidable Forms pro plans

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, but wait! The signup form is 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% of those people left the 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 business is supposed to solve problems. Not 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? You guessed it! A form with multiple steps.

Splitting forms into smaller parts is great for form conversions, as we mentioned before. But there are other uses too.

For example, multi-step forms can be used for quizzes or longer surveys - both of which are great tools to learn 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

Multi-step form with progress bar best practices

Noted American statistician Edward Tufte has said that "the most common user action on a website is to flee." Yikes! Nobody wants that...

When you think of web traffic in those terms, it likely makes you 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 CTA button (submit button): Change the text on your form button to show users that there will be another page. You could change the text on your button to say "Next →", for example.

Segment form steps logically: Try to group form fields together 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: A multi-step form with a progress bar is easy to navigate between each page and jump to a different step. This also allows users to go back and fix mistakes.

Include a summary page (when needed): When combined with multi-step forms, a summary page is powerful. Before submitting their info, users can preview their submission, which is also a great way to reduce incorrect submissions.

Forms Summary page in a multi-step form with progress bar

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!

Are you building multi-step survey forms?


Great news! Formidable is the best WordPress survey plugin on the market!

Step 1: Create a form in WordPress

To get started, all you need is a great WordPress multi-step form builder.

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

We have a list of the best multi-step form WordPress plugins, 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. Whether it's a registration form, contact form, or any other — you can create it with Formidable.

And for this tutorial, we'll install Formidable Forms Pro.

After that, click Formidable → Add New to create a new form.

Add a new form with no code

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

  • Create a WooCommerce product
  • Travel booking form
  • Mortgage application 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 break the form into multi-step forms!

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.

In this example, we divided the form after the First Name and Email Address fields onto multiple pages.

Add a page break to a form

Step 3: Add a progress bar

After you've split the form into at least two parts, you'll be able to give each part a name.

This is done by going into the Form Settings and switching the Pagination option to Show Progress Bar.

You could also adjust the Page Titles, hide the Page Numbers, or hide the Pagination Lines. We recommend checking the box titled Show page titles with steps and label each page. This helps users know which page they are on when looking at the horizontal progress bar.

In our example, we are going to name the pages Contact Info and Your Message. Remember, naming your pages in multi-step forms can help users know where they are in the form submission process.

Design progress bar for multi-step forms in WordPress

Step 4: Choose the progress bar design

Now that you've set up a form, you might want to make sure the WordPress progress bar matches the site and your form design.

But first, make sure you choose the progress bar style you're after. There are two options to choose from in the Form Settings tab as your default progress bar.

These are the Progress Bar:

multi-step progress bar (more customizable than Gravity Forms multi-step form)

And the Rootline:

Rootline in WordPress with no code

Once you've chosen the one that best fits the site design, it's time to tweak the colors for the progress bar.

To do this, head to Formidable → Styles → Progress Bars and set any color scheme you want.

As you make adjustments to the progress bar background colors, text colors, and circle sizes, you'll be able to preview them immediately. And by the way, using this time-saving visual styler doesn't require any coding at all!

Formidable visual form styler you won't find for Gravity Forms progress bar design

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 want to consider more optimization, like conditional logic, for example. With conditional logic, you can make sure site users only answer the questions that matter most based on what they input.

Page Break Conditional branching

In the case of multi-step forms, the possibilities with conditional logic are endless!

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

Wrapping up

That's it! Hopefully, this has shown you just how easy it is to create a multi-step form and how to create a multi-step progress bar.

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

Read more about multi-step forms with progress bars

  • Best Multi-Step Form WordPress Plugins 9 Best Multi-Step Form WordPress Plugins
    Read More
    How to Create an Ajax Multi-Step Form in WordPress How To Create an Ajax Multi-Step Form in WordPress
    Read More
    How to Preview Form Answers Before Submitting a WordPress Form How to Preview Form Answers Before Submitting a WordPress Form
    Read More

Not using Formidable Forms yet? Get started today with easy and flexible WordPress multi-step forms.

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

Get Email Updates

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Comments

  1. kalanit says

    January 22, 2017 at 12:58 am

    This is totally awesome, Steph! Thank you.

    Reply
    • Steph Wells says

      February 6, 2017 at 10:24 am

      You're welcome! Glad you are enjoying it!

      Reply
  2. subhan hamid says

    January 22, 2017 at 7:28 am

    Thank you. It is really a big improvement. Formidable is powerful and flexible.

    Reply
    • srwells says

      February 3, 2022 at 2:09 pm

      Thanks for sharing!

      Reply
  3. Nathan Graham says

    January 23, 2017 at 6:54 am

    excellent

    Reply
  4. Steve says

    January 27, 2017 at 4:01 pm

    Wow! Formidable Forms raises the bar again! Great work everyone!

    Reply
  5. Tim says

    February 3, 2017 at 9:49 am

    Amazing new upgrades! Well done Steph + FF team!

    Reply
  6. Mike says

    February 3, 2017 at 10:18 am

    Awesome! Thank you.

    That is exactly what I am looking for in a recent project.

    I also like the styling (radio buttons) of the form in the video. How can I accomplish this? Is there a certain stylesheet for this?

    Thanks again.

    Reply
    • Steph Wells says

      February 3, 2017 at 10:27 am

      Perfect timing. Those radio buttons are actually the default in Chrome.

      Reply
  7. Steve Dillon says

    February 3, 2017 at 1:12 pm

    Great work again. Always improving!

    Reply
  8. Paul says

    February 5, 2017 at 7:16 pm

    Ste 3 Porgress Bar...
    You insert Page break then ...flip the switch???
    What does 'flip the switch' mean?

    Reply
    • Steph Wells says

      February 6, 2017 at 10:26 am

      The rest of that paragraph explains, but it means to turn on the progress bar for your form. The setting is included in the screenshot above. If you still have questions about this, can you please open a ticket in the help desk? Thank you!

      Reply
  9. NCR IT SOLUTIONS says

    March 17, 2018 at 4:22 am

    Nice progress bar thanks a lot

    Reply
  10. Focus group says

    November 13, 2019 at 6:25 am

    thanks for sharing this.
    i am looking for this type of progress bar
    again thanks

    Reply
  11. Matthias Nielsen says

    December 5, 2020 at 6:13 pm

    Is it possible to make it switch between steps even though you have not filled the required fields??

    Reply
    • srwells says

      December 7, 2020 at 12:37 pm

      Nope, Required fields are just that, required, so you can't jump to the next page or any other page in the form until the required fields on the page are completed and pass validation.

      Reply
  12. Change The Rules says

    February 2, 2022 at 8:02 pm

    Very nice tutorial and easy to understand! FormidableForms Rocks!

    Reply
    • srwells says

      February 3, 2022 at 2:10 pm

      Thanks for the kind words! glad you like it!

      Reply
  13. alberg says

    June 8, 2022 at 11:46 am

    Thank you for this great and clear tutorial. Only one question - does this approach allow for the data to be saved at each step (if so, automatically or manually)? And can it also allow for a user to come back in and finish the form at a later time? Thx-ab

    Reply
    • srwells says

      June 28, 2022 at 11:58 am

      Hi Alberg,

      Our form data doesn't automatically save on each step. There are options to allow users to come back and finish at a later time.

      Reply
  14. [email protected] says

    August 20, 2022 at 6:08 am

    I'm trying to make a multistep form, but in a popup.. Trying to get to step two closes my popup - any idea how I can get around that?

    Cheers 🙂

    Reply
    • [email protected] says

      August 20, 2022 at 6:58 am

      I figured it out - had to enable ajax...

      Reply
  15. Samuel Sturdivant says

    February 22, 2023 at 4:33 pm

    Looking for documentation on why steps are bringing the window to the top of the page. Both AJAX options are enabled.

    Reply
  16. Mick Harrison says

    June 18, 2023 at 9:33 am

    Split forms is a 'life saver'.
    I have a form with name and address plus over 60 checkbox options! If there is an error in an address field all the checkboxes are ticked when the page is refreshed to correct the error. ( is this a bug?)
    By having the page breaks each section is validated before displaying the next page.

    Reply
    • srwells says

      June 19, 2023 at 4:57 pm

      Hi there,

      Glad to hear the page breaks have made your form work better, however what you are describing with your form's checkboxes all being checked when there is a validation error doesn't sound normal. We'd like to dig into this more. Could you contact our support team directly from https://formidableforms.com/knowledgebase/ so we can get more information and dig into this?

      Reply

Leave a Reply to Paul Cancel reply

Your email address will not be published. Required fields are marked *

Popular Resources

    • How To Create a Searchable Database on a WordPress Site
    • How To Create a Custom Calculator in WordPress [6 Steps!]
    • How To Create a Fitness Tracker in WordPress
    • Formidable Views: The Best WordPress Custom Application Plugin
    • How To Require Email To Download Files in WordPress
    • How to Create a WordPress Forms Drop Down List
    • Best Gravity Forms Alternative for WordPress: Formidable Forms vs. Gravity Forms
    • WPForms Alternative: Formidable Forms vs. WPForms Compared

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Plugin
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directory Plugin
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • WP Tasty
  • Nutrifox

Copyright © 2023 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews