Have a long form that’s just not getting filled out as much as you’d like? It’s a common problem with an easy solution!
Have you ever been filling out some information online and had the thought, “This is so long! When is this going to end?” Having people complete your forms is incredibly important to a business, but long, intimidating forms will turn a lot of people away. A great solution to boost the number of people completing your forms is to make them bite-size, multi-step forms!
Step 1: Making pages is as easy as clicking a button
First, you will need to download and install the Multi Step Forms add-on. This will add a new button to your form builder window’s that will allow you to segment your forms into parts. Installing and activating the plugin is all the set up you need before your ready to make a Multi-step form!
As you begin adding fields to a new form, you’ll see a little grey circle/+ button appear on your form. Click that button anytime, and a new page is created. “+” turns into “>”, and you can now navigate between pages! If you open any existing form, you’ll also see the “+” button now, letting you turn any existing form into a multi-step!
Step 2: Build out your pages simply by dragging and dropping fields!
Once you have a page or two added to your form, you’ll see options to navigate backwards through the form “<“, forwards through the form “>”. You’ll also see tabs at the bottom of the form that will let you click directly to any page.
Fields can be dragged and dropped to any of these buttons, easily moving fields in between form pages. You can even reorder pages by dragging and dropping the parts tabs at the bottom.
Step 3: Easily add navigation options your users, part titles, validate by part, and more
Once you are happy with your form and its parts, select the Advanced tab and choose Multi-Step. This will allow you to control what the users see as the form is being filled out. It’s ridiculously easy to:
- Add breadcrumb navigation throughout the form
- Add a progress bar
- Display part titles
- Change the Next/Previous button text
- Set the form to validate by part, displaying errors on Next instead of waiting for Submit
With these 3 steps, you’ll be building multi-step forms like a pro in no time!
It doesn’t take a skilled developer or coder to build beautiful, complex forms in WordPress. All you need is a good form builder and the ability to point a mouse at things. It’s really that easy!
Comments are below! Questions? What else would you like to see in a multi-step form builder?
regina says:
I found this post because I have a question about building and publishing. I’m wondering about when you select ‘Publish’ after building a form — what does that mean? What does selecting that do? Is that like hitting ‘Save’? Or does it actually get published somewhere? (I don’t see it on my site anywhere). It would be super helpful if anyone knew this and shared.
Quay Morgan says:
Hey! Sorry that’s confusing. “Publish” in the builder just saves the form. Here’s how to append it to a live page: https://ninjaforms.com/blog/add-a-wordpress-form-anywhere/
For the record, I grumped about that naming convention for exactly this reason, so don’t feel bad 😉
Cheers,
Quay
Daniele says:
What happens when a form is abandoned without the last step?
Will I lose the lead?
Quay Morgan says:
No user entered data is ever recorded until the user submits the form. Submitting the form is considered the user’s consent to transmit that information to you. Collecting data before that point is a questionable practice from a user/data privacy standpoint at best, and depending on where your users live and the purpose of the form, could potentially open you to legal liability.
Charlotte Webb says:
I want to delete a multipage form. I have contracted all fields back to 1 page, but can’t get rid of the multiparts
Quay Morgan says:
Click on the Part’s tab at the bottom of your screen. That will open the settings window for that part, and you can delete it from there 🙂
Renee says:
Did this work for you? I’m having the same issue. But when I click on the parts tab at the bottom of the page, I don’t see anything that will allow me to delete it. It simply states, “Add form fields…”
Kathy Zant says:
Hi Renee, within the plugin itself, click on “Get Help” on the left hand side under Ninja Forms. There, reach out to support and send the diagnostic information so that our team can assist with troubleshooting.
Kyle Huggins says:
Renee – Click on the “Part Title” button again for a second time. When you click once, it displays the “add form fields.” Then when you click on it a second time, it will open a sidebar that says “Remove Part.” This button will delete the page from the multi-page form.
Hille Hackenfort says:
I am creating a multi-step form with some dynamic fields. So far everything has worked out well. Yeah!
The last step is supposed to be a summary of all data entered, which the user can confirm or change before submitting the form.
What is the best way to proceed?
Adam Puckett says:
Same! Subscribe me to this response, please.
Kristi Fazioli says:
Did you ever figure this out? I need to do this as well! Thanks
Lenka Uhliarova says:
Hello,
You can make a “Summary/Confirmation page” by adding an HTML field to the form as an additional Step (Page/Part Title) at the end of the form. Within the HTML field, you can use the merge tag button in order to insert the merge tags of all of the prior fields the form contains. Hope this helps!
Alexandra Fitzgerald says:
Hi there,
I’m having an incredibly frustrating issue that I’ve spent 2 working days on – I can’t change the colour of the previous and next buttons. I know this is a simplistic thing but it’s completely eluding me! I only see a change if I take off opinionated styles, but this seems wrong as every other styling option functions with opinionated styles on. Are these buttons exceptions? If so, why are their styling options displayed?
Zdenek says:
How to show selected options (steps) for example on the right column?
Shaylee Hansen says:
Hi JV,
Please reach out to our customer support team, so we can address this question in more depth: https://ninjaforms.com/contact/
Thank you, 🤓
Marc Moulin Roussel says:
Hello,
I would like to know if it s possible and how track in GGL analytics and GGL TAG manager each step of a multi step form to create a conversion funnel and identify where user may stop the process
Thanks !!
Krissie says:
Is there a way to do a multi-stage form with two submit buttons?
E.g. Page one just gathers super basic contact info and they click submit.
The following screen/s asks them a couple more optional questions they can also choose to submit.
I need their basic data to be able to provide them with a quote, but I want them to use the other questions to qualify themselves a bit more so I can allocate them to the most appropriate team member – but I don’t want the extra questions to deter them from submitting the form.
Shaylee Hansen says:
Hello Krissie,
Our Conditional Logic add-on gives you the ability to show and hide fields like the Submit. Use Conditional Logic to show /hide the submit button if certain conditions are met, aka other fields have the desired responses. Otherwise, you can look into our Save Progress add-on which gives the user the ability to save their work as they are filling out the form.
Berit says:
Hi there,
I have the same question as Marc Moulin Roussel: Is it possible to track break-ups within a multi part form in Google Ananlytics?
I also wonder if it’s possible to send a user one step back once he reached a “dead end”. Example: I let the user choose between two possibilities A and B (radio buttons). He clicks A = he proceeds to the natural next part of the form. He clicks B = he lands on a part with an html-element that tells him “Sorry, we don’t offer B”. How can I provide him the possibility to go back and choose A instead?
Shaylee Hansen says:
Hello Berit,
For questions on Google Analytics, please reach out to our customer support team so that we can further assist you: https://ninjaforms.com/contact. As for your Multi Step Form question, the previous and next buttons appear on all form parts unless they are manually removed. This means your visitor can click “previous” to return to other sections of the form if they run up against a dead-end. For more information, I recommend checking out our documentation.