Conditional Logic with Gravity Forms in WordPress
WordPress’ Gravity Forms plugin allows you to have certain forms appear, based on conditions being met.
However, when a form is complex, it’s not always intuitive how to set up the conditional logic.
This tutorial will show you how and we’ll use an example. Let’s get started.
Example situation
Let’s say that our form is broken up into several pages.
On the first page, there’s a drop down with several options (1 through 6) for the number items that the user would like to purchase.
If 1 is selected, size selection will be shown on the next page for just 1 item. If 2 is selected, size selection will be shown for 2 items. And so on.
Dependent fields need to be told what to do
In this example, the number of item sizes to show is dependent on the number of items the user would like to purchase.
Gravity Forms has decided to put the logic rules within the dependent field. So that means we’d have to go to our sizes fields to configure them.
The principle to take from this is that the dependent field will always be the one that contains the logic rules. It will be told when to show or to hide.
Figuring out how many dependent fields
In our example, I want to show the 6 sizes, when 6 items are selected.
But, when 5 items are selected, I want to only show 5 sizes. And so on.
I can accomplish this task by creating 6 fields. Then I can show/hide each field as needed.
Turn on conditional logic
Gravity forms has conditional logic built into it. We simple have to enable it for each dependent field.
- Edit the form
- Expand the dependent field
- Advanced (tab)
- Checkmark the “Enable Conditional Logic” setting
In my example, the field representing the 1st size will be shown every time. So it is dependent on 6 user choices.
For my settings, I want to show the field when any of the conditions match. I can add more rules by clicking the + icon and I can delete a rule by clicking the – icon.
In the condition, the left drop-down is the independent field. Once selected, the right side of the condition will fill-in with the selection choices. If the independent field is a text input box, the right drop-down will turn into an input field.
Here’s how our example looks when finally set up:
The field representing the 2nd size will be shown every time, except for when only 1 item is selected. So it is dependent on 5 choices. When 1 is selected, it should not be shown. So 1 is excluded from the list:
The same pattern continues for the rest of the field sizes. By the 6th field, only one choice is left:
While it’s impossible to show all the combinations for forms, I hope the above example shows you a way to think about the problem and move forward with a solution.
