Are you still using long forms on your WordPress site? Well, you shouldn’t! Long forms lead to frustrations and decrease the attention span of your visitors which leads to form abandonment.
What you should be doing is breaking your long forms into multi page forms. Believe or not, splitting your form into multiple steps can improve conversion rates by 87%.
You might be worried that in order to create multi page form in WordPress you need to be some kind of coding wizard and know HTML, CSS, and JavaScript. You are mistaken.
All you need is the multi step form WordPress plugin and luckily, Ninja Forms offers an easy no code solution Multi-Step Forms add-on. So, if would you like to see your forms’ conversions rates go up, become a master in breaking your long forms into digestible steps today!
Table of contents
- How to add a WordPress multi page form to your website
- How to style the progress bar on your multi page form
- How to make a summary page on multi part form
- How to create WordPress multi step form with conditional fields
How to add a WordPress multi page form to your website
Before we show you how to add a multi page form to your WordPress site, let’s clarify what a multi-page form is.
The multi-page form, often referred to as a wizard is when you break a long form with multiple fields into several sequential pages (or parts). This form includes a progress indicator and provides users with the option to navigate between the steps/pages of the form.
To create multi step forms in WordPress with Ninja Forms, you need our free core plugin and the Multi-Step Forms add-on. Once you install the add-on, you will see a plus sign in your form builder. This will allow you to add multiple pages to your form.
You will find additional settings for your multi-page form under the Advanced tab > Multi-part.
This setting features the following options:
Validate Each Part: When toggled on (green), users will not be able to move between parts until each required field or confirmation field has been completed.
Show Breadcrumbs: Displays breadcrumb navigation at the top of each part. This lets the user click between parts themselves.
Show Progress Bar: Displays a progress bar at the top of each part.
Show Part Titles: Displays the Part Title at the top of each part for the user.
Previous Button Label: Changes the text of the Previous button on each part.
Next Button Label: Changes the text of the Next button on each part.
To learn more about each feature, we encourage you to explore our documentation page.
How to style the progress bar on your multi page form
The progress bar is like a map for your users navigating the form. It shows where they are and gives a heads-up on how much more time they need to wrap up the whole form. It’s the silent guide making the process smooth and efficient.
When you look at the picture below, what is grabbing your attention more? The progress bar on the left or progress bar on the right?
Probably the second one represents the advancement much better as it is more vibrant and engaging. The first one seems a bit dull. Don’t you think?
The progress bar is an excellent tool to reduce friction for users so you should consider giving it some style! With Ninja Forms styling plugin, you can do that and much more.
First, you want to make sure your progress bar on your multi-step form is enabled. Then navigate to Advanced tab > Multi Part and click on the Styles settings to start customizing your progress bar using the Layout & Styles add-on.
In the video below, you can see what else besides the progress bar can be customized on your multi-step form using our styling plugin.
In our example below, you can see the progress bar we customized with our styling plugin.
If you want to replicate the same style, here is the setting you need to implement:
First, you want to customized the Progress Bar Container Styles section. This is the grey area on the video. What shows before the user starts progressing on the form.
We customized the background color, border width, and border style. Then, we wrote our own CSS rules to give the progress bar extra styling such as the linear gradient and making the progress bar rounded instead of rectangle.
The next, we customized the fill of the progress bar. This is what happens with the progress bar after the user is moving forward on the form to the finish. You do this under the Progress Bar Fill Styles.
While we don’t offer a progress bar with percentage, you can cheer the user to the finish line using the words of encouragement. For this you can add an HTML field on each step of your form to add your personalized text.
Besides styling your progress bar with the Layout & Styles add-on, you can do so much more. Customize your previous and next button, edit the font size, or font family, customize breadcrumbs…the possibilities are endless. So be creative, and have fun with it!
How to make a summary page on multi part form
When users are moving along the steps on your form, it is natural to double-check the information they enter. Making them go back and forth and review each step individually is not the best solution.
That’s why you should provide a summary of the data on the last step of your WordPress form. This will help you prevent a lot of errors or typos that could cost you time but also money.
Combining Multi-Step Forms add-on with Ninja Forms advanced functionality, you can easily add a summary page at the end of your WordPress form. There, users can review and double-check all the existing information prior submitting the form.
To create a confirmation page, add another part (step) to your form by clicking the blue circle icon on your form. Next, add an HTML field as the only field to this last part of your multi-step form. You can rename your step to something like “Review Your Information” or “Summary”.
Now click on the HTML field and insert the merge tags of all o the prior existing fields on your form clicking on the Merge Tag button.
That’s it! The user will be now able to review their information on one single page before submitting the form.
How to create WordPress multi step form with conditional fields
Imagine you have a registration form where you need additional pages of information if a user indicates they’re bringing three guests to your event.
You probably don’t want to show to Guest 1 all the group of fields related to Guest 2. Instead, you want to hide these pages so you don’t display irrelevant data. This is where the conditional logic functionality comes in.
The Conditional Logic add-on lets you show or hide a group of form fields so you can be sure users only see the form sections that are relevant to them.
Keep in mind, when you create your conditional logic triggers, only use If the Condition Is Not Met to show and hide form parts. If you use it to show or hide form fields, it will not work.
Want to learn more about the conditional logic functionality with Ninja Forms? Explore our in-depth article How to Use Conditional Logic in WordPress Forms!
Fight form fatigue with a WordPress multi-page form!
Congrats on completing our tutorial on using multi-step forms on your WordPress website. We hope you now feel confident about using the Multi-Step Forms add-on from Ninja Forms. We encourage you to start breaking your long forms into efficient multi-step ones to fight form fatigue!
You should also check our article Quick Tips for Using Multi Step Forms in WordPress to learn some additional tips on multi-page forms. You’ll discover how you can allow users to save and continue filling their form later with the Save Progress add-on to lower the form abandonment rate on your site.
We will also show you how to print your form as a PDF and attach this PDF to the email notification for your customers.
Additionally, if you’re in need of a user registration plugin for various forms, whether it’s a job application or registration form, explore our User Management plugin! You’ll love you will be able to allow users view and edit their form submissions!
