Looking for an easy way to show and hide your form fields without the help of a developer? In this article, we will show you how easy it is to turn a large form into a conditional WordPress form using our Conditional Logic and Multi-Step Form add-ons.
Fun fact, as the number of form fields increases, conversion rates decrease. In cases where you are required to gather lots of user data, reducing the number of form fields isn’t always an option.
So how do you go about collecting your required user information without removing necessary fields and still maintain a high conversion rate?
That’s easy! By creating a dynamic multi-step form.
Learn how to create a multi-step conditional WordPress form with our nifty form builder and two add-ons: Mult-Step Form and Conditional logic, in just three easy-to-implement steps. Let’s get started!
Create a Multi-Step Conditional WordPress form ( 2 Steps )
To turn your form into a conditional multi-step WordPress form, you will need three things: our free Ninja Forms core plugin, the Multi-Step Forms, and Conditional Logic add-ons.
- Break your WordPress form fields into parts or steps
- Show or hide your WordPress form parts conditionally
Step 1. Break your WordPress form fields into parts or steps
Splitting your form fields into sections reduces the cognitive load for users by removing irrelevant information
To begin, install and activate the Multi-Step Forms add-on. Head back to your form and look for the plus sign to the right of your form fields. Click it to add a new form “part.” Do this over and over again until you have all the form parts you need.
To move your fields into the different form sections, drag and drop them by clicking and holding down on the field while dragging it into the newly created part. That’s it.
For step-by-step instructions, see our Multi-Step Form documentation. Now that we have our form fields broken into sections, we need to apply Conditional Logic.
Step 2: Show or hide your WordPress form parts conditionally
Install and activate the Conditional Logic add-on, and then return to your form ( Ninja Forms > Dashboard ). From the form builder, click on the Advanced tab and then click on the Conditional Logic section. This is where we will make a good form great by assuring users see only the form sections that are relevant to them.
When creating your conditional logic, 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. So don’t do it! Otherwise, you will experience a lot of unnecessary stress and frustration 😜
As you can see, using conditional logic helps you streamline your forms and save visitors from a lot of frustrations. Your form visitors don’t want to waste their time filling fields or groups of fields that are not relevant to them, and you probably don’t want to lose valuable submissions. The Conditional Logic add-on is the perfect solution to streamline your WordPress forms and make sure your visitors are completing them.
Congrats! You are a Multi-Step WordPress form master.
You’re now well on your way to becoming a pro at using the best WordPress form builder out there! In this article, you learned how to create a smart multi-step form in just three steps with our multi-step form and Conditional Logic add-ons. Now it’s time for you to give it a try.
Conditional logic helps you build smart forms with interactive dynamic fields, so you only show users fields that are relevant to them. But the conditional logic functionality does not stop here! You can also create conditional actions in WordPress based on form choices, including:
- conditional redirects
- customized success messages
- modified lists
- send a conditional email and subscriptions
- and much, much more!
Get the Conditional Logic and Multi-Step Form add-ons separately in a 1.5 or 20-site license, priority support included. Or, for the best deal, I recommend our Pro Membership, as it includes the File Upload and Layout and Styles add-ons too. So what are you waiting for?
We hope this article has helped you improve your website and furthered your understanding of WordPress and Ninja Forms. If you have any suggestions or advice for things not discussed here, please remember to share them in the comments below!
Daniel Secomb says:
This is good functionality, but there needs to be a way in which you can hide/reveal entire forms.
Eric Parkinson says:
Is there a way to do this by grouping form elements within the same page (e.g., Group 1: Name, Gender, Meal Options checkboxes, Group 2: Name, Gender, Meal Options checkboxes) and then revealing those based on conditional logic on a number of guests drop-down?
Or do we have to create separate parts of the multi-form based on the maximum number of guests (e.g., if 15 max, then 15 separate parts)?
Jason says:
@Eric Parkinson,
I’m trying to solve the same problem. I have 10 repeating field sets, and using the method in the guide would either crash the form or make the conditional events not fire.
Marla Brown says:
I’m having the same issue, I have a multi part form and using conditional logic I’m experiencing lagging and conditional events sometimes not firing.
Emily says:
Hello,
How can I hide the pages after submit.
The idea will be that the client can see only the successfully message.
Thank you.
Kathy Zant says:
Hi Emily, if you have extra content within the page that you would like hidden after the form is submit by the user, use the paragraph text, single line text, or image form fields and wrap the content as a part of the form. In this way, once the form is submit, the user will only see the success message on submission. I hope this helps!
Mans Thelander says:
Is there any way to check for data in another system and present the form depending on the answer?
Example:
Send a webhook to system X and check if the email already exists, and if it does, pop a form that says “This email is already in use” and if it is not used, just proceed with the form.
Rob Egan says:
I’ve split my form into different parts, with the expectation that a customer will select an option and it shows them the next step depending on what they selected. The issue comes in with the required fields. I have required fields on each part of the form, including the ones that end up being hidden. To complete the form though, it still forces the customer to fill out the required fields for the hidden parts, which no customer will figure out on their own, and isn’t ideal. Is there a way to make required fields required as long as that option is selected, but unrequired when that option is not selected/deselected?
I have no coding experience, so would be grateful for any support.
Lenka Uhliarova says:
Hi Rob,
Required fields, if hidden, will not be treated as required. Instead of marking the field required in the form, you can set it to be required using conditional logic. If you need any further help, please reach out to us at https://ninjaforms.com/contact/.
Eric says:
I am a bit confused about if this is what I need – Logic & MultiPart or just the Logic. I want to display 3 different text fields based on the user’s selection from two drop-down select fields. The form isn’t getting submitted – I am using it to display options based on the choices from the two drop-down select fields.
Lenka Uhliarova says:
Hi Eric,
if you have a single-page form and you only want to dynamically change the form fields that display on the form you only need Conditional Logic. If you have a multi-step form that consists of multiple pages (parts) and you want to show or hide entire groups of form fields on a specific step of your form, you need both of the add-ons.
Jendayi says:
Hi, I think there’s a typo in this article. In the original conditional logic page, it says to only use “IF CONDITION IS NOT MET” with parts, not fields: https://ninjaforms.com/docs/conditional-logic/
This blog post says the opposite for some reason. Can you confirm which version is correct?
Shaylee Hansen says:
Great catch! The blog post has been updated to reflect the Conditional Logic documentation. 🙏🏼