If you’ve ever bought something online, chances are you have used a multi-step form. In this article we will tell you how you can create a multi-step form with progress bar in WordPress website.
Are you worried about your long forms not converting? If you have a single long form then it leads to decision fatigue and users tend to abandon your form because it is too long. Long forms have too many fields to be answered and tend to increase the abandonment rate and that is why you need multi-step forms.
If you want to build a multi-step form on your WordPress site then you are in the right place.
Benefits of Using a Multi-Step Form
By dividing a form into multiple steps, there are a lot of benefits:
- Increased conversions
- Less form abandonment
- Improved user experience
In order to build a multi-step form with progress bar on your WordPress website you would need a WordPress form builder plugin which has multi-step form creation functionality as well as a progress bar functionality and one such popular WordPress plugin which will get this work done for us is Formidable Forms
Why you Should Make use of Multi-step forms on your WordPress website
Let’s assume users come to your website and wanted to sign up for your form but found that it is way too long and then they tend to abandon your website either because it was too long or was too complicated to fill out, either way they abandoned your form and ultimately you lost a prospect and eventually a customer.
The business data experts at The Manifest found that close to 27% of the people abandoned the form because it was way too long.
Even if you have plans to create long forms make sure that you split them up into multiple short forms. One problem with long-forms is that users tend to see it as a tedious task to complete.
Whenever a user lands on your website form they see these fields which ask them for a lot of information which they might be skeptical in giving away. Now imagine if your form is long enough then you are adding to the trouble and kind of indirectly forcing the users to flee which would result in loss of sales.
You as a business and website owner should make your user’s journey easier and smoother and not make it hard. By making use of Long forms you are increasing the friction and making the buyer’s journey even more difficult which is exactly what you should avoid. Long forms increase time spent which results in less conversion.
Friction basically means the hurdles, the obstacles the user might feel while filling out your form and carrying out any kind of online transaction.
The best solution to all of these problems is making use of multi-step form with Progress bar and we are going to explore the exact steps which explain how to create Multi-step forms with Progress bar by making use of Formidable Forms
What can you do with multi-step forms?
Take a look: –
- Quizzes or exams
- Registration forms
- eCommerce forms
- Job application forms
- Website signup forms
- Medical in-take forms
- School enrollment forms
- Surveys (especially longer ones!)
As you can see you can create surveys and quizzes which are long form content and you can learn more about your audience by making use of multi-step forms
With that being said it is important to make use of multi-step forms effectively. Let’s have a look at some of the best practices for creating a multi-step form
Best practices for creating a multi-step form
1. Collect name & email on the very first step:
Let’s assume that your visitor came to your landing page where your form is placed. They filled out the first step which was entering the name and Email but for some reasons abandoned the form.
Now in this scenario the user left your website without completing the form. But you can surely email the user on the email ID they had provided in the first step. So you can make use of Email Marketing to reach out to them and promote your business without being salesy and sleazy. Without a Multi-step form, this would not have been possible.
2. Optimize your CTA button (submit button):
You can inform your users that there’s a next page once they fill out the current page. You can do so by giving a label like “Next page” or by making use of symbols like → (right side arrow) to indicate that there’s a next step involved. This gives the user an indication that there’s something more data to be filled in on the next page.
3. Segment form steps logically:
Logically try to group form fields. When creating a multi-step form try to group and place those similar pages one after another. E.g Payment related and Shipping related pages can come one after the other.
While making use of progress bar you can make use of three different sections – something like Basic information, personal information, Professional information
4. Use a progress bar: With a progress bar in place users can easily come back and forth to any page and also correct their mistakes if they want. With a progress bar in place the users get an idea of the percentage of completion of their form
Below we have shown an example of how Dribble.com makes use of Progress bar and has divided their multi-page form into different categories.
Make sure that you follow the above mentioned best practices while creating your multi-step form
Now let’s proceed to the next step and create a multi-step form in WordPress using Formidable Forms
These Guidelines will help you a lot when building multi-step forms.
Step 1: Install and Activate Formidable Forms Plugin
In order to create a multi-step form we will have to install and activate the Formidable Forms plugin. Follow the steps to install the Formidable Forms Pro version and unveil multi-step forms.
In order to install and activate the Formidable Forms Plugin navigate to the WordPress Dashboard.
Go to the Plugins section –> Add New
Once you click on Add New you will come across a screen similar to the one shown below. In the search box type “Formidable Forms” and then you will come across a screen similar to this one.
Now click on “Install Now” and then Activate the Plugin
Once you have activated the Plugin you will come across a screen similar to the one shown below
In order to use the Premium license you will need to first install and activate the Lite version of Formidable forms
The Lite version of Formidable forms has already been installed in the previous step so you can safely proceed further.
Refer to this article which takes you through Installation of the Premium license of Formidable Forms
Step 2: Create a form in WordPress
In order to create a form navigate to your WordPress dashboard –> Click on Formidable → Click on Add New to create a new form.
Step 3: Split your form into more steps with page breaks
Once the form is created, the next task is to add page breaks. These page breaks will allow us to create multi-step form. To add page breaks to your form, use Formidable Forms’ drag and drop form builder.
When you start building the form you will find all the elements (e.g slider, signature, Page Break, Address, Section etc) inside the drag and drop form builder interface as shown in the below screenshot. You can drag different elements and drop them on the workspace as shown on the right hand side in the below screenshot.
Once you have split your form into at least 2 parts, you can give each part a name.
Inside Formidable forms this is achieved by going into Form Settings and changing the form pagination settings to show the progress bar.
You could do modifications like adjust the page titles, hide the page numbers, hide the pagination.
While making use of progress bar in a multi-step form it is a good idea to name your sections of the form can help the user get more idea about which section details they are filling.
Check the box titled show page titles with steps and add a label to your pages. This will help the user to know on which page one is on by looking at the progress bar and also naming your pages in multi-step forms will help the user to know where they are in the form submission process.
Step 4: Design your progress bar
Since you have set up the form, now it’s time to design the progress bar. Choose the right style of pagination of your choice.
There are 2 options to choose from in the form settings tab in order to display the Progress Bar:
- The Progress Bar
- The Rootline
Once you are done choosing the one you like, now head on to design it.
For this, head to Formidable → Styles → Progress Bars and set the color scheme of your choice. In the progress bar section, you can adjust the colors and also preview them immediately. This time-saving feature is the visual-styler and it does not require any sort of coding!!
Step 5: Add multi-step form to your site
Now the only thing left to do is to add the multi-step form to any page/post. There are several ways which you can use to publish the form in formidable. Below are some of the options given. You can choose any of these options to Add the multi-step form to your site.
For the sake of this tutorial, we will go ahead with the Form Block method to add the Multi-step form to a page or a post. You can choose any of the above methods you want. We chose Form Block method because it was the easiest to proceed with
Adding a Form to a Page/Post Using the Form Block method
Inside your WordPress Page or post you will see a “+” which is used to add different elements inside the Gutenberg editor. We have shown the example of the + sign below.
Whenever you see a + sign like the one shown above inside your Gutenberg/ WordPress editor click on it and you will come across a search box. Inside the search box type in “Formidable”. You will come across the Formidable Forms Widget, click on it
Step 6: Configure Optional Form settings
Before finishing let us consider some more options. We will have to do two more things
Configuring your form settings
The form settings need to be configured based on your requirements. Suppose you want the users to be redirected to a Thank You page, you can do so in the form settings. In short, you are basically customizing the actions that will take place after the user submits the multi-step form.
You can either show the user a simple message like “Thank You [username] for filling out our form. Our representatives will soon get in touch with you for further discussion”.
Besides this if you want to redirect the user to a separate Thank you page you can do so by making use of the Redirect feature.
You can also take them to any of your website’s important page like Case Studies or Success Stories by making use of the “Show Page Content” feature.
Whatever are the form settings that you wish to configure you can do so by visiting this form settings article.
Configure your form notifications
Whenever a user fills out a form, an automatic or customized notification should be sent to the user informing them that they have filled out your form.
If you want a detailed tutorial on how to configure form notifications you can check out this article
You can try out advanced features like conditional logic to show users next steps depending on the user’s input.
The possibilities with conditional logic are endless with multi-step forms.
A quick tip: Take user requests by using the dropdown on the first page of a multi-step form. You can modify the form to show different options depending upon the selection.
Finishing up. We hope this blog showed you the easiest way to create a multi-page form with Progress bar in WordPress.