Checkout the best WordPress Black Friday Deals

How to create a multi-step form in WordPress using Formidable Forms

If there’s one thing that we can all agree upon – it is the importance of forms on your WordPress site. Forms play an essential role in generating leads online and helping you build a relationship with your clients and customers through contact forms, questionnaires, feedback forms, and more.

But what if your forms are really long and boring (which most forms are)? What would you do?

People take only a few seconds to decide whether it’s worth their time filling out the form on your website/landing page. And here’s where you lose most of your potential leads in the first place.

The best way to overcome this situation is by using a multi-step or multi-page form, where you can break down the lengthy forms into multiple short forms.

What are multi-step forms

According to HubSpot, a multi-step form is an intentionally long form that is broken down into multiple steps or pages. They are generally used to make long forms, such as shipping or registration forms, less intimidating and daunting to the users. It can also include online quizzes, exams, medical intake forms, school enrollment forms, and more.

By allowing customers and potential leads to fill their information in smaller chunks, you can create a positive user experience and increase your conversions.

Why you should use multi-step forms

Multi-page forms on WordPress can help improve form conversions in more than one way. It allows you to segment the form steps logically which in turn makes it easy for the end-users to understand. This makes your forms more user friendly and less overwhelming.

You can also configure the form to display a different set of options depending on the conditional logic. All in all, it empowers the users to save and continue forms later.

How to create multi-step forms in WordPress

Before you can start creating multi-step forms on your WordPress site, you need the Formidable Forms Pro plugin installed on your site. It is a simple yet powerful WordPress form builder plugin developed with these requirements in mind.

If you are new to Formidable Forms, you should have a look at my Formidable Forms review before you do anything else.

Now, let’s see how you can create a multi-step form with progress bar and time fields in WordPress using Formidable Forms.

Total Time: 15 minutes

Create a new form

Once you have installed and activated Formidable Forms Pro plugin on your site, navigate to the Formidable Forms page from your WordPress dashboard, and click on the Add New button. Now, add all the fields you need on the first step/page here.create a form using formidable forms - add new button

Split forms using page breaks

Now that you have created a basic form with the fields that are required to be filled on the first page, insert a page break. Remember that every page break you insert here from now onwards will result in a new step in your multi-step form. To add a page break to your form, just drag the Page Break field from Formidable Forms’ Advanced Fields and drop it into your form builder screen. Now that you have split the forms, you can give each step its own name.add page break to wordpress forms using formidable forms

Enable progress bar

Go to the form settings tab and under Pagination, choose Show Progress Bar. Once this is done, it will display you a few options to show page titles with steps, hide page numbers, and hide pagination lines. I recommend you to display page titles for each step so that it becomes reader-friendly and makes it easy for people to understand why you need that set of data. For example, you can group all the address-related fields under Shipping Address or Physical Address. Likewise, you can group all the phone numbers and email fields under Contact Information.multi step form settings - formidable forms on wordpress

Customize the progress bar

To customize the look of the progress bar that is displayed above your multi-step form, go to the Formidable Forms settings tab just like in the previous step and choose your style (Progress Bar/Rootline). Once you have picked your style, you can navigate to Formidable → Styles → Progress Bars and customize the colorsformidable forms multi step forms progress bar styles

Update and insert the form

Once you have added all the required form fields, page titles, and are done with the progress bar styling, you can update the form and insert it into the required page. Just add the Formidable Forms block and choose your form from the dropdown. It’s as simple as that.formidable forms pro - visual form styler - updated style

So, that was it. See how easy it was to create a multi-step form using Formidable Forms? Ready to give it a try? Get Formidable Forms today with a 14-day money-back guarantee right away! 👇

Leave a Comment