How to Add Dynamic Fields with Conditional Logic

Smart watches, smart phones, smart TVs… everything we buy is becoming so smart that smart is just about cliché. But, there’s a reason for the trend. People love things that anticipate their needs. Things that tailor-make themselves to you on the fly. It’s not common knowledge, but you can deliver this experience to users via your WordPress forms. Learn what your users need as they fill out the form… and have the rest of the form mold itself to that need as they work. Let us introduce you to dynamic fields in Ninja Forms! 🙂

What are Dynamic Fields?

It’s a term we kick around to mean fields that change based on user input. Usually that’s a field appearing or disappearing based on whether or not a user has indicated they need it or not. It could also be a field that changes composition based on earlier input. Whatever you need.

Perfect example: we’ve all seen the checkout pages that ask you if your billing address is the same as your shipping address. If you check the box that indicates that it’s not the same address, a new set of fields appears for you to enter the billing address into. The billing address fields are dynamic fields. There when you need them, gone when you don’t.

Let’s look at how to build these out for your WordPress forms!

Creating Dynamic Fields: An Example

All you need is one specific tool in your toolbox to make this happen: Conditional Logic. The Conditional Logic extension allows you to introduce the kind of if/then logic that dynamic fields depend on.

We’ll demonstrate this with a mockup of a reservation form. Say you’re letting users book reservations with you and you want to give them the ability to bring additional guests. If they aren’t bringing guests, you don’t want to clutter their form with fields related to the guests they aren’t bringing… right? Seriously, look at this mess:

no dynamic fields make people sad (a really unnecessarily long form)

That’s gross- way too long for a user who isn’t bringing guests to have to scroll past. Let’s look at how to make those guest fields dynamic.

Conditional Logic Makes All the Difference

See the field “How many friends will you bring along?” That’s going to be the keystone field that determines how many other fields we’re going to display. By writing conditional statements for that field, we can hide all of the guest fields by default, ask them how many guests they’re bringing, and then display only that many field groups.

This process may look (and feel, your first time through) a bit daunting, but the upgrade to user experience it brings to your forms, and thus how often your forms are submitted/convert, can’t be overstated. Head over to your Conditional Logic options under the Advanced tab of your form builder (review the basics here if needed) and let’s get started!

1. Set a Default Conditional

When a user first visits the form we don’t know if they are bringing guests or not. So, we want the guest fields hidden by default. To accomplish this, we first need to make a conditional statement defining the default state as hidden. It’ll look like:

When: “How many friends will you bring along?” “Has Selected” “None”

Do: “Guest 1 Email” “Hide Field” , “Guest 1 First Name” “Hide Field” , etc

Set your default conditional statement to look like the above, and be sure to delete the “If Condition Is Not Met” rules below it! If you leave those in place it’s going to gum up the whole works.

2. Write a Conditional Statement for Each Option Defining What Will Be Shown and What Will Remain Hidden

We’re talking again about the “How many friends will you bring along?” field here and its 3 options: One Guest, Two Guests, or Three Guests. You need to write a separate conditional statement for each that defines what fields will be shown and what fields will be hidden when each triggers. For example,

When: “How many friends will you bring along?” “Has Selected” “One”

Do: “Guest 1 Email/First Name/Last Name/Phone” “Show Field” , and then set all the Guest 2 and Guest 3 fields to “Hide Field”

Again, be sure to delete the “If Condition Is Not Met” rules below it! If not it’ll throw everything off (we know this is a pain in the butt and will be making adjustments to Conditional Logic soon).

Repeat this process for Two Guests, showing Guest 1 and Guest 2 fields, hiding Guest 3 fields.

Repeat again for Three Guests, showing all Guest fields and hiding none.

You should now have a total of 4 statements: 1 to set the default state for the dynamic fields, and 3 that modify the default state based on the option selected by the user.

What does the finished product look like to users on the front end? Check it out:

Learn to use dynamic fields in Ninja Forms to create a custom made visitor experience!Click To Tweet

TL;DR

Just as an overview/recap: You need to make 3 things happen to successfully pull off a set of dynamic fields:

  1. A field that accepts the user input that will affect the fields we want to behave dynamically
  2. A default conditional statement that sets all dynamic fields to the state you want them to appear in initially
  3. A separate statement for each dynamic option that defines specifically what happens when that option is selected

With those three factors in place, you should be able to make fields appear and disappear based completely on what your user tells you they need. That makes for happier users and, perhaps even more importantly, more users who are willing to fill out your form in the first place!

Do you have questions about this process? Interesting ways that you use dynamic fields in your forms? Please feel free to share in the comments!