How to Build a WordPress Multi-Step Form With Conditional Fields

Your form keeps growing, with one set of questions for new customers, another for regulars, and a quick question from everybody else. So why is every visitor clicking through every page, even when an earlier answer makes a whole step pointless? And can a WordPress multi-step form with conditional fields even work, or does one half break the other?

Maybe you’ve tried hiding fields one at a time, only to end up with an empty page that still shows its title and still wants a click on Next. Search around and you’ll find a tutorial on conditional logic, a separate one on multi-step forms, and not much on making them work together. Meanwhile every extra page is one more place for someone to give up and close the tab.

Yes, it’s a bit of a puzzle the first time. But it’s also a lot simpler than it looks. Below, you’ll build a conditional multi-step WordPress form that skips whole steps based on one answer, with one rule per step and no code at all.

What you’ll need

• Ninja Forms (free)
• The Multi-Step Forms add-on (standalone, or included with memberships)
• The Conditional Logic add-on (standalone, or included with memberships)

Multi-Step Forms splits your form into steps, and Conditional Logic decides which of those steps each visitor sees. Both sell standalone. The Plus membership includes both of them plus more than a dozen other add-ons, and is probably the better buy.

How a WordPress multi-step form with conditional fields skips a step

In Ninja Forms, you split the form into parts with Multi-Step Forms, then give each optional part one conditional logic rule. The rule shows the part when the visitor picks the matching answer and hides it when they don’t. A hidden part disappears from the route completely, title, breadcrumb and all, so the visitor never lands on it.

We built a little example to walk through: a service request form for an axolotl tank care business. It has four steps, About You, New Tank Setup, Maintenance Visit, and Final Details. One dropdown on the first step, “What can we help with?”, decides the route:

• New tank setup goes to New Tank Setup, then Final Details.
• Maintenance visit goes to Maintenance Visit, then Final Details.
• Just a question skips both and goes straight to Final Details.

Only need to hide a few fields on a single page? You don’t need steps for that, and our guide to conditional logic in WordPress forms has you covered. And if your real goal is getting more people to finish a lead form, build a multi-step lead form instead.

Split the form into steps, with the deciding question up front

Everything starts with the fields in your WordPress form. Put the question that decides the route on the first step, because a step can only be skipped once the visitor has answered it.

Give that question a blank first choice, like “Select one.” Without it, a real answer is already selected when the page loads, and your rules fire before the visitor has picked anything.

1. Open your form on the Form Fields tab and click the blue (+) icon to open the Fields window, then add your fields.
2. Add a blank first option, such as “Select one,” to the deciding question.
3. Click the last step’s tab along the bottom of the builder, then click the grey (+) circle on the right edge of the builder to add a new part.
4. Click a part’s tab to open it and type the title visitors will see.
5. Drag each field onto the tab of the part it belongs in.
6. Keep the Submit button on the last part.

That’s all there is to it. If you get stuck, the Multi-Step Forms documentation walks through adding and moving parts in more detail.

Show visitors where they are with breadcrumbs and a progress bar

Before you start hiding steps, give visitors a map. Breadcrumbs and a progress bar tell people how far they’ve come and how far they have to go, and both update as steps drop out of the route.

1. Click into the Advanced tab.
2. Click Multi-Part. The add-on is called Multi-Step Forms, but its settings live under this name.
3. Switch on Show Breadcrumbs and Show Progress Bar.
4. Switch on Show Part Titles.
5. Switch on Validate Each Part.

Validate Each Part is the one that keeps people honest. With it on, a visitor can’t click Next past a required field they left empty; they stay put and see “This is a required field.” under it. You can also rename the Previous and Next buttons here with the Previous Button Label and Next Button Label settings.

Now for the fun part.

Skip a whole step with one Show Part and Hide Part rule

Each optional step gets one rule, and every rule watches the same question: show this part when the answer matches, hide it when it doesn’t. Got three or four optional steps? Add one rule per step and it works the same way.

1. Back in the Advanced tab, click Conditional Logic.
2. Click Add New Condition.
3. Under When, pick “What can we help with?”, then Has Selected, then New tank setup.
4. Under Do, open the first dropdown and choose New Tank Setup from the Parts group, then choose Show Part.
5. Under If the Condition Is Not Met, click the blue (+) icon and add New Tank Setup again, this time with Hide Part.
6. Click Add New Condition again and build the same rule for Maintenance visit and the Maintenance Visit part.
7. Click Done, then Publish.

Notice there’s no rule for “Just a question.” It doesn’t match either rule, so both middle steps stay hidden and that visitor goes straight from About You to Final Details. You get that route for free.

Go ahead and mark the fields inside your optional steps Required, just like you normally would. When a step is hidden, its required fields don’t stop the form from submitting.

Worried about visitors changing their minds? No worries: if they go back and change their answer, the route changes with them. That’s what the Hide Part line in each rule is for.

Keep every visitor on track when the route changes

Skipping steps is a kindness to your visitors, as long as nobody gets lost along the way. Someone using a screen reader or a zoomed-in page can’t glance ahead to see what just changed, so tell them in words. A few habits cover most of it:

• Say up front what the form will ask. Our axolotl form opens with an HTML field: four short steps, and we skip any that don’t apply.
• Keep progress visible on every step. With breadcrumbs and the progress bar on, a hidden step drops out of both, so visitors only see the steps on their own route.
• Reveal a step right after the question that reveals it. With this setup that happens on its own, because the revealed step is always the next one.
• Say when an answer changes what comes next. The deciding question’s Description setting reads “Your answer decides which step comes next.”
• Never ask twice. Name and email live on the first step, so Final Details doesn’t ask for them again.

For more ideas, the W3C’s tutorial on multi-page forms is a friendly read, and a form that’s easy to follow is one more people finish.

Test every route before real visitors do

A conditional WordPress form has more than one way through it, so walk every one of them yourself. It takes two minutes, and it’s a lot less stressful than finding a broken route in your inbox.

1. Open your form with Preview Form, or on a page where it’s published.
2. Pick New tank setup, click Next, and check that you land on New Tank Setup.
3. Click Previous, switch to Maintenance visit, and click Next again.
4. Start over with Just a question and check that you go straight to Final Details.
5. Submit once on each route and look for the entry under Submissions.

Don’t worry if the progress bar sits at 50% or 67% on the last step. It shows where the visitor is, not what they’ve finished, and it only counts the steps on their route.

Give every visitor a shorter route through your form

Like we said at the top, nobody wants to click through a page that has nothing to do with them. Now your WordPress multi-step form with conditional fields asks one question and sends each visitor down the route that fits, with a quick question going straight to the end. Skip whole steps rather than hiding fields one by one, and your form stays short for everyone who fills it out.

In Ninja Forms, Multi-Step Forms splits your form into steps with breadcrumbs and a progress bar. Conditional Logic decides which of those steps each visitor sees.

Ready to stop making everyone read every page? The Plus membership puts both add-ons in your hands, along with more than a dozen others, so pick it up and build your first shortcut today.