Get access to free tutorials, exclusive content and more.

How to Create Conditional Fields in WordPress

Have you ever asked yourself how to show or hide fields on your WordPress form based on the user’s answer? The conditional fields in WordPress are the answer you’ve been searching for.

You no longer need to drive your users crazy with unnecessary fields that are irrelevant to them. Ninja Forms brings you an easy solution to create conditional logic forms and conditionally show or hide fields without any coding experience or help from the developer. Let’s dig in!

Table of content

  1. What are conditional fields?
  2. How do you create conditional fields?
  3. Calculation and conditional fields in WordPress
  4. Bonus: How to style conditional logic fields in WordPress

1. What are conditional fields?

Conditional fields in WordPress are fields that change based on user input on the form. These fields present dynamic field choices, turning your WordPress forms into smart and dynamic forms.

 

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 using our Conditional Logic add-on!

2. How do you create conditional fields?

All you need is our free Ninja Forms core plugin and the Conditional Logic add-on to create a dynamic form with conditional fields. This functionality on your forms saves your visitors time and delivers better UI making your forms faster. This means more completed forms and less form abandonment.

Step 1. Install and activate Ninja Forms

First, install the Ninja Forms free core plugin by navigating to your WordPress Admin Menu, clicking Plugins > Add New.  Locate the Search Plugins field, type “Ninja Forms,” then click the Install Now button and Activate.Add Ninja Forms plugin with WordPress

Otherwise, you can upload the plugin by navigating to Plugins > Add New > Upload Plugin  > Choose File.

Step 2. Install and activate the Conditional Logic add-on

Once you have access to the Ninja Forms conditional logic, you can download it from your Ninja Forms account, and upload it to Plugins. For a complete overview, see our installation guide for step-by-step instructions.

If you successfully follow the installation instructions, you should see the Conditional Logic tab under the Advanced tab of the Ninja Forms form builder.

using conditional logic with wordpress forms

If you don’t, make sure to enable the Developer Mode in your Ninja Forms settings. You can learn how to enable Developer Mode here to unlock advanced settings on your Ninja Forms.

using conditional logic with wordpress forms

Let’s look at our example below. You can see how certain fields are hidden for users, who select option No. On the other hand, when users select the option Yes, the content will change dynamically and another Radio list of options will appear.

 

In order to set this up on your form, you want to first create form fields with your options using the Radio list fieldMake sure the Value of your form fields is filled out.

radio list fields

Then you’ll want to head to the Advanced tab and select Conditional Logic. Here you can add conditions for your form fields.

That’s it! You’ve just learned how to create dynamic fields and show the fields based on the user’s input on your form.

Hide and display list options, or pre-select them conditionally

Any list field option can be hidden or displayed in Ninja Forms using Conditional Logic. You can show/hide submit button if you don’t want all users to submit your form or if you want to disable specific users to submit their submission entries due to spam.

Another popular way to use conditional logic with your fields is by offering a custom response on your form. Let’s say your user does not choose a specific answer from multiple choices and chooses the option Other. You want to collect more data than just “Other” so, in order to let your visitors write their personalized answers, you can use a Single Line Text field.

Let’s assume, you created your Radio List field and Single Line Text field on your form. Now head over to Conditional Logic under the Advanced tab and set up the conditions as below:

dynamic fields on your form

This is what it will look like in your form preview:

 

Similarly, you can have list options conditionally selected or deselected for the user without requiring their interaction. Just create a logic statement that’s based on earlier user interaction with the form.

Please note, that your conditional trigger options will change based on the form field types. As you can see from the screenshot below, the options are not the same for Single Line Text Field as they are for Radio List Field.

conditional logic trigger options conditions in wordpress form

Show and hide the entire page on a multi-step form

Above, we showed you can easily set WordPress form logic to target form fields. The same logic can be applied to entire steps/pages of your form if you’re using Multi-Step Forms. You just use conditional logic statements on the individual pages instead of (or in addition to) fields.

Using our free Ninja Forms core plugin and Conditional Logic add-on, you can show or hide pages of multi-step forms. 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 groupings/sections in place, you’ll want to apply the Conditional Logic add-on. Here’s an example conditional that will hide Guest 2 Food Order and Guest 3 Food Order parts if the invitee selects one guest:

if you would like to see a step-by-step article on how to hide or display entire pages on your multi-step form, you can visit our article to get into the specifics.

As you can see, using conditional logic help 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.

3. Calculation and conditional fields in WordPress

Unlike other form builders, the Calculations is a free feature of Ninja Forms. You can use calculations to collect payments, calculate a quiz score, create a quote form without making a payment, and much more!

But before we get to show you how to work with calculations and conditional fields, we will quickly demonstrate how to create calculations without using WordPress form logic. There are two primary steps you need to follow when creating a calculation:

Step 1. Creating the fields on which to base the calculation

Each of our list fields (radio, dropdown, select, image, etc.) has a Calc Value setting for each list item. That’s where your price goes. 

You can assign each list item option a Calc Value, and then calculate a running total for all of them as the person fills out the form. This value will be sent to any calculations referencing this field.

In our example, we assigned Calculation values to options under the Select Image field:

select image field featuring grumpy cat, smudge cat, and pizza cat with the calc value setting highlighted to the right of each list option

If you want to create a calculation that includes a Quantity field, we recommend you to use our Number Field as it only supports numeric characters.

Step 2. Creating the calculation itself

Navigate to your form builder and click the Advanced tab. If the Developer Mode is enabled, you will see the Calculations option.

calculations wordpress

To create a new calculation in your WordPress form, click Add New and give it a name (Variable Name). Decimals are set to 2 by default. Add your fields by clicking the Merge Tag Icon within the Equation box.

Just choose your fields from the list that opens and that will place the merge tag of the field into the calculation’s equation. You can add (+), subtract (-), multiply (*), and divide (/) field values this way. Exponents (^), parentheses, and Order of Operations are respected, too.

In our example below, we created a calculation named Total. Using the merge tag icon we added the Select Image field to the Poster Size field and multiplied it with a quantity field to create a calculation that totals the combined prices.

calculations and conditional fields in wordpress

Now if you want to display your total on your WordPress form, you add the HTML field to your cost calculator form. This field is located under the Layout Fields in your form builder.

HTML field wordpress

Click on the merge tag button and place the calculation’s merge tag into the HTML field’s text editor.

display calculated total on your form

if you want to add a currency symbol or any text to your calculation, you can add it before or after the merge tag as shown below:

Total: $ {calc:Total}

How to use calculations with conditional fields

Now here comes the cool part! Applying calculations to conditional fields lets you change the output value of your form fields. The perfect example of using calculations with conditional logic is offering discounts for volume pricing. Let’s say you want to offer different pricing based on the quantity your customer wants to purchase.

Here is an easy example:

You are selling a book that costs $30 but you want to offer a 25% discount to customers who purchase more than 5 books.

The hidden field is used to be the discount rate. For percentage discount, set the Default Value to 1. For a flat discount, set the Default Value to 0. As we want to offer a percentage discount we set the Default Value to 1.

Discount rate hidden field

Using a hidden field and conditional logic you can change the value of the hidden field to change the outcome of the calculation. 

calculations and conditional fields in wordpress

Want to explore our calculations feature further? Take a look at our article 3 Easy Steps to Use Coupon Codes in WordPress Forms to find out how to change the value of the total field based on conditional fields and calculations.

You can also check our following blog posts: How to Build A Request A Quote WordPress Form (Template) and How to Create a WordPress Payment Form with Calculations to learn how to create powerful cost calculator forms in WordPress.

4. Bonus: How to style conditional logic fields in WordPress

For any WordPress forms, including conditional logic forms, the form design is critical to earning more conversions. Whether you want to customize the entire look of your form or fields in WordPress, the styling plugin can do the hard job for you.

Our Layout & Styles add-on gives you the opportunity to tweak the appearance of your form to better match your site. You can easily create rows and columns, resize fields, change the font or color of your field labels, and much more.

Did we mention you don’t need to have coding skills? Say bye to manually editing your files with CSS code. With our styling plugin, you will save yourself frustrations and style conditional fields in WordPress in a matter of minutes!

Want to learn more about form styling? Make sure to visit the How To Style Your WordPress Forms (Easy Examples) and How to Customize WordPress Forms (Font Styling) articles to learn how to turn an ugly duckling into a beautiful swan without mastering CSS!

You’ve just learned how to hide and show form fields with conditional logic!

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!

Additionally, you can create WordPress forms conditional notifications or apply calculations to conditional fields to change the output value of your form fields.

conditional fields in wordpressIf you are searching for powerful WordPress forms which support conditional logic, you can’t go wrong with our Conditional Logic add-on.

So what do you say? Will you give this conditional plugin a try? Unlike our competitors, you can buy the Conditional Logic add-on individually, or it comes included in all our membership plans. With a 14-day money-back guarantee, you have nothing to lose!