Multi-step forms come in very handy when you need to break your longer forms into smaller sections. They reduce psychological friction without overwhelming your visitors which leads to more completed forms.
Being so beneficial to your business as they increase your conversion rates, here are 4 quick tips for using multi-step forms in WordPress that will take your form building to another level and help you improve users’ experience, and decrease form abandonment on your website!
Table of contents
1. Hide unnecessary steps on your WordPress form
Your site visitors don’t want to waste their time filling fields on the forms that are not relevant to them. The great news is you can save them from this frustration.
Using our free Ninja Forms core plugin and Conditional Logic add-on, you can show or hide pages of multi-step forms with unnecessary form fields based on the user’s input on the form.
All you need is to break your groups of form fields out into sections and apply conditional logic to the sections rather than individual fields. Here’s what the form will look like broken into parts:
Now that we have our field sections in place, we need to apply conditional logic. We want the Registration, My Food Order, and Register sections to be present for each user, no matter what. The 3 Guest Food Order sections are variable though, depending on the “How many guests will you be bringing?” question found on the first page of the form.
If an invitee is only bringing one guest, we don’t want to show order part options for two or three! We’ll need 4 total conditional statements based on the value of the “How many guests will you be bringing?” field: None, One, Two, or Three.
Conditional Logic can be applied to entire parts of a multi-step, so we’ll display or hide each guest part of the multi step based on that value. In the example below, we hide Guest 2 Food Order and Guest 3 Food Order parts if the invitee selects one guest:
Your form will now hide and display groups of form fields (parts) based on user input! You can also check our step-by-step guide on how to hide and display groups of form fields in this blog post.
2. How to create a summary/preview page
“Measure twice and cut once.” The same is true for multi-step forms, where having a preview form option can help you prevent a lot of errors and weed out the typos that cost you money when they slip through.
Multi-Step Forms gives you the power to add a review page with a custom message at the end of your form where information can be double-checked before submission.
To create a confirmation page, you can use the Multi-Step Forms add-on and an HTML field. You would add an HTML field to the form as an additional Page (Step) at the end of the form. You can also rename this Step 2 (Part Title) to anything you’d like such as Review Your Information or Summary Page.
Within the HTML field, you can use the merge tag button to insert the merge tags of all of the prior fields. The user could review their filled form clearly on one single page before submitting the form.
3. Save progress on your multi-step form
There is no doubt multi-step forms are extremely beneficial when it comes to decreasing form abandonment. But sometimes things get tricky, especially when your customers get interrupted when filling out the form. You definitely don’t want frustrated customers who need to start over filling up your form again from the beginning.
Luckily, you can eliminate the lost valuable submission with our save and continue feature. If your customers didn’t submit the form but they already started filling it out, our Save Progress add-on lets logged-in users save their form in its current state, so they can come back to them where they left off before submitting it.
If you don’t have any method for users to sign in, you can still use the Save Progress add-on. The option Local Browser Storage in the Save Progress settings grants non-registered users the ability to save their work automatically.
This will save the data to the visitor’s browser via a cookie as he moves from field to field. This data would persist for the duration of the browsing session or until the browser cookies/cache are cleared. If users switch to another device or browser, the data on the form won’t be saved if using the Local Browser Storage option.
Presently, a save record is only created once a visitor clicks the Save button. We do not offer a way to collect the user’s data before consent has been provided by sharing the form data via saving or submitting, and we strongly advise against doing so as a general principle for user privacy best practices.
4. Let your users print their submitted form
Now that your users can see the summary of entered data, why not give them the option to print their submissions too? Even though Ninja Forms does not have a print feature built into our WordPress form builder, there are two ways your users can print their form submissions.
However, keep in mind the information on the form can’t be printed prior to submitting the form but only once the form has been submitted.
Printing a CSV file of the form submission
Navigate to the Emails and Actions tab and add an Email Action. (Email Notification) Within the Email Action, you can have a CSV file of the form submission be attached in the confirmation email, which can be printed out.
If you don’t see the option “Attach CSV”, you will need to enable the Developer Mode. This will allow you to access additional advanced settings of our form builder.
Send a PDF copy of the form using PDF Form Submissions add-on
Let’s say your users are filling out a long registration form that consists of multiple sections and you want your users to have a copy after their submission. Using PDF Form Submission, you can give users the option to print, or save the submitted data as a PDF.
Once you install the add-on, navigate to the Emails & Actions tab and create a new Email action. Open up the Advanced settings and enable the “Attach PDF”. This will enable the PDF of the submission to be attached to your Email Actions, and users will be able to save or print out that PDF directly from their email.
The great news is our PDF Form Submission add-on lets you customize the PDF including the header, the footer, document title, document body, and more!
Level up your multi-step forms!
In today’s article, we showed you some great tips to level up your multi-step forms! We hope you learned something new and you feel inspired in your form building!
Whether you decide to pair your multi-step forms with conditional logic, save progress, or other add-ons, your Ninja Forms reach a whole new level of power. So what do you say? Are you ready to explore endless possibilities and unleash the full power of Ninja Forms?
