Want to break your long form into multi-step forms in WordPress? Splitting a WordPress form into multiple pages is one of the easiest ways to increase user engagement and improve form conversion and, that too using just one plugin. You read right.
The fastest way to create multi-step page informs is by using the Formidable Forms plugin. It is one of the most advanced WordPress form builder plugins in the market. For more information, see my full Formidable Forms review.
Table of contents:
- Create a WordPress Forms
- Break Your Form into Multiple Parts
- Customize Progress Bar
- Configure Your Multi-Step Form Settings
- Add it to Your Website Using Shortcode
Before we get started, let’s take a look at what are the benefits of using multi-step forms.
Why Use Multi-Step Forms?
A study by TheManifest found that 81% of people have abandoned at least one form before taking any action, just because of long-form.
In fact, after breaking a form into multiple parts, the team at InstaPage found that there is an increment of 214% and users converted well.
Here’re some of the major reasons to use multi-step forms on your WordPress website:
- It improves user experience
- Less form abandonment
- Helps increase in conversions rate
How To Create a Multi-Step Form in WordPress?
Ready to begin? Let’s start our tutorial on how to create a multi-step form in WordPress using the Formidable Forms WordPress plugin.
Step 1: Create a WordPress Forms
The very first thing you’ll need to do before you create multi-step forms in WordPress is to install and activate the Formidable Forms plugin (Affiliate link).
Next, log into your WordPress admin panel and click Formidable » Add New to create a new form. You can create any type of form you want but in this tutorial, we’ll be creating a simple multi-step contact form.
Step 2: Break Your Form into Multiple Parts
After creating a form, it’s time to add the Page Break to split it into multiple pages and that’s how you can create multi-step forms on your site. To do this, you can drag the Page Break field under Advanced Fields and place it where you want the form to split, and give a name to each of the split parts.
You can see the screencast below for a better understanding:
Step 3: Customize the Progress Bar
Under form settings, click on pagination. There is a dropdown menu which will show you three options:
- Hide the progress bar and Rootline
- Show Progress Bar
- Show Rootline
Choose “Show Progress Bar“.
You can also add page titles, hide page numbers or hide the root lines. This will help your users to know which page they are on now when they see the progress bar so I’d recommend you check the box and add the page titles.
Once you’re done with the above steps, the next thing you’ll need to do is design your progress bar to match the style of your brand. But before that, you need to select the right Pagination. To do this, go to the form settings tab where you will see two types of pagination:
- Progress Bar
- Root Line
You can select the one you like and head over to Formidable » Styles » Progress Bars to give them a professional look. You could adjust the background colour, progress bar size, border etc.
When you’re done with the designing part. Click on save.
With that let’s move on to the next step.
Step 4: Configure Your Multi-Step Form Settings
To begin, go to Settings » General.
If you’re creating a form for the first time, you will be asked to enter a name and description inside the form builder. Here’s how you can configure your form settings.
- Form Title: Enter a name for your form.
- Form Key: This is automatically generated when you enter the form title. You can skip this.
- Form Description: Enter a description for your form. It could be anything like notes, instructions etc.
Once you’re done, click on the Save button.
There are several other features and form notifications that you can try, and customize your form according to your requirements.
Step 5: Add it to Your Website Using Shortcode
You’re almost done. The only thing left is to add a multiple-step form to your site, so let’s do this too. Formidable Forms allows you to add multi-step forms anywhere on your site including blog posts or pages.
We have multiple ways to add forms to our site but the most popular and easiest one is by using shortcodes and we’re going to add them with the same method. Here’s the step-by-step process:
To start, go to Formidable » Forms where you’ve already created your multi-step forms and copy the shortcodes as shown in the screenshot below.
Now, open blog posts or pages where you want to insert this form. Let’s assume, I want to add this to my contact us page. Now what I’ll do is open my contact page and paste the shortcodes that we copied. Have a look:
When you’re finished, click on the blue button (that says either update or publish) in the top right corner of the page so that your forms can be visible on your site.
And there you have it!
If you’re looking to insert your form in some other way (different from the above method), then check out this official guide from Formidable Forms.
Wrapping Up!
If you are with us till the end, I’m pretty sure you’ve now a better idea about how easily you can add multi-step forms in a WordPress site using Formidable Forms.
We hope you found our tutorial helpful, and if it did then do us a favour and share them on Twitter. If you’ve any questions, feel free to leave a comment below and I’d be happy to help you out.
Click right here to Sign up for your risk-free Formidable Forms account today!
