Are you still using long forms on your WordPress site? Long, single-page forms can frustrate and overwhelm users and lead to higher abandonment rates.
The solution? Break them into manageable steps. Learning how to make a multi-step form in WordPress can enhance user experience and improve conversions because it keeps users engaged. Plus, it doesn’t require coding skills. With the intuitive Ninja Forms Multi-Step Forms add-on, you can effortlessly design forms that guide users through a step-by-step process.
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 Forms
- How to Create a WordPress Multi-Step Form With Conditional Fields
How to Add a WordPress Multi-Page Form to Your Website
Before we dive into creating a multi-step form in WordPress, let’s quickly break down what a multi-page form is.
A multi-page or multi-step form divides many fields into smaller, easier-to-digest sections or sequential pages. This form includes a progress indicator and allows users to navigate between the steps/pages of the form.
To create multi-step forms in WordPress using Ninja Forms, all you need is our free core plugin and our Multi-Step Forms add-on. Once installed, you’ll see a + icon in the form builder. This will allow you to add multiple pages to your form.
Head to the Advanced tab and click on Multi-Part to access more settings for your multi-page form.
This setting features the following options:
- Validate each part: Enable this to ensure users can’t move on until all required fields in the current step are completed.
- Show breadcrumbs: Breadcrumb navigation adds clickable breadcrumbs at the top of the form so users can easily jump between steps.
- Show progress bar: Shows users how far along they are with a visual progress tracker at the top of the form.
- Show part titles: Displays each section’s title to help guide users through the form.
- Previous button label: Customize the text shown on the “Previous” button for each step.
- Next button label: Change the “Next” button label to match your form’s tone or purpose.
Explore our documentation page to learn more about each feature.
How to Style the Progress Bar on Your Multi-Page Form
The progress bar is like a map for users navigating the form. It shows them 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 pictures below, which grabs your attention more? The progress bar on the left or the one on the right?
The second one definitely feels more dynamic and eye-catching. The first one seems a bit dull by comparison, don’t you think?
The progress bar is an excellent tool to reduce friction for users, so you should consider giving it some style! You can do that and much more with the Ninja Forms styling plugin.
First, you want to make sure the 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.
The video below shows 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’ll want to customize the Progress Bar Container Styles section — that’s the gray background area in the video. It’s what appears before the user starts progressing through 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 a round shape instead of rectangular.
Next, we customized the fill of the progress bar. This is how the progress bar looks as the user moves through the form toward completion. You can do this under the Progress Bar Fill Styles.
While we don’t offer a progress bar with a percentage, you can cheer the user to the finish line using words of encouragement. To do 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 buttons, 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 Forms
When users are moving along the steps on your form, it’s 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 summarize the data on the last step of your WordPress form, which prevents errors or typos that could cost you time and money.
When you combine the Multi-Step Forms add-on with Ninja Forms’ advanced functionality, you can easily add a summary page at the end of the WordPress form. There, users can review and double-check all the existing information prior to submitting the form.
To build 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. Rename your step to something like “Review Your Information” or “Summary.”
Now, click on the HTML field and use the Merge Tag button to include merge tags for all the existing fields on your form.
That’s it! The user will now be able to review their information on one page before submission.
How to Create a WordPress Multi-Step Form With Conditional Fields
Let’s say you’re creating a survey where users select their preferred types of communication. If someone chooses “Email,” you could show them a field asking for their email address. If they choose “Phone,” you can instead show a field where they can input their phone number.
This way, the form adjusts to show only the relevant fields based on the user’s selection — that’s conditional logic functionality in action.
Ninja Forms’ 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 feel confident 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 out their form later with the Save Progress add-on to lower the form abandonment rate on your site.
We’ll 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 allowing users to view and edit their form submissions!
Ready to build the best multi-step form for your WordPress site? Try Ninja Forms today and create dynamic, user-friendly forms in no time.
