Long forms not converting? You need multi-step forms! We'll show you how to build a multiple page form with a progress bar on your WordPress site.
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!
Multi-step forms (also called multi-page forms or multi-part forms) enhance user-experience and boost form conversions. More on that below.
To get started, all you need is a WordPress form builder plugin with the features needed to create a multi-step form.
Before we get started, let's take a look at some great reasons why a multi-step form can take your website to the next level.
Why use a multi-step form on your site?
Nothing kills excitement like a super long form.
We've all been there. Ready to signup 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 is supposed to solve problems, not create new ones! Long forms increase friction, which leads to lower conversion rates.
For those who don't know, friction refers to any part of the conversion process that makes a user less likely to convert. In other words, it's bad news.
So what's the solution? You guessed it! Multi-step forms.
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.
Learn more: 10 Tips For Creating A Customer Survey Form
Multi-step form 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 makes you want to optimize every aspect of your website. 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 & shipping info together. Always think about the end-user when dividing your form up with page breaks.
Use a progress bar: With a multi-step progress bar, users can easily navigate between each page and jump to a different step if they wish. 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 a powerful thing. Before submitting their info, users can preview their submission, which is also a great way to reduce 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!
🌟 Are you building multi-step survey forms?
You need Formidable - the best WordPress survey plugin on the market!
Step 1: Create a form in WordPress
The first thing we need to do is create a form in your WordPress admin. To get started, install and activate the Formidable Forms plugin then follow these instructions to install Formidable Forms Pro version and unlock multi-step forms.
After that, click Formidable → + Add New to create a new form. You could create any kind of form you want. To keep things simple, we'll show you how to create a multi-step contact form.
Learn more: How to create a form in WordPress
Step 2: Split up your form with page breaks
Once you've created your form, the next step is to add page breaks. These are what allow you to build multi-step forms!
To add page breaks to your form, just use Formidable's drag and drop form builder. Under Advanced Fields, drag the Page Break field into your form.
In our example, we divided our form after the First Name and Email Address fields.
After you've split your form into at least two parts, you'll be able to give each part a name.
In Formidable, this is done by going into the Form Settings and setting the Pagination setting 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 your pages. This helps users know which page they are on when looking at the progress bar.
In our example, we are going to name our pages as 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.
Step 3: Design your progress bar
Now that you've set up your form, you might want to make sure the progress bar design matches your site.
Before that, make sure you choose the right style of Pagination. There are two options to choose from in the Form Settings tab.
These are:
- The Progress Bar
- The Rootline
Once you've chosen the one you like the best, it's time to tweak the design. To do this, head to Formidable → Styles → Progress Bars and set any color scheme you want.
You can adjust the colors of your progress bar in this section. As you make adjustments, you'll be able to preview them immediately. This time-saving feature is called the Visual Styler.
And by the way, using our visual styler doesn't require any coding at all!
Learn More: How to Use the Formidable Form Styler
Step 4: Add your multi-step form to your site
Now all that's left is to add your new multi-step form to any page or post.
To publish a form in Formidable, there are a few simple ways:
- Using the shortcode builder
- Inserting the form shortcode manually
- Using a form block
- Use the Formidable Form widget to display a form in the sidebar
Advanced users may also insert forms using PHP.
Step 5: Configure optional form settings
Before wrapping up, you might want to consider a few more form options:
- Configure your form settings
- Configure your form notifications
There are also advanced features to try, like conditional logic, for example. With conditional logic, you can make sure your users only answer the questions that matter most based on the data they input.
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 your form to show different options based on their selection!
Wrapping up
That's it! Hopefully, this exercise has shown you just how easy it is to create a WordPress multi-page form. For more WordPress wizardry, be sure to follow us on the Formidable blog!
Read more about multi-step forms
Not using Formidable Forms yet? Get started today with your own WordPress multi-step form.
This is totally awesome, Steph! Thank you.
You're welcome! Glad you are enjoying it!
Thank you. It is really a big improvement. Formidable is powerful and flexible.
Thanks for sharing!
excellent
Wow! Formidable Forms raises the bar again! Great work everyone!
Amazing new upgrades! Well done Steph + FF team!
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.
Perfect timing. Those radio buttons are actually the default in Chrome.
Great work again. Always improving!
Ste 3 Porgress Bar...
You insert Page break then ...flip the switch???
What does 'flip the switch' mean?
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!
Nice progress bar thanks a lot
thanks for sharing this.
i am looking for this type of progress bar
again thanks
Is it possible to make it switch between steps even though you have not filled the required fields??
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.
Very nice tutorial and easy to understand! FormidableForms Rocks!
Thanks for the kind words! glad you like it!
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
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.
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 🙂
I figured it out - had to enable ajax...
Looking for documentation on why steps are bringing the window to the top of the page. Both AJAX options are enabled.