Back to contents

JetEngine: Conditional Visibility Rules for Form Fields Overview

This overview reveals the details of conditional visibility mechanics. You will learn how to set the visibility of any form field according to your needs.

JetEngine Forms functionalities give you the opportunity to create an astonishing form. Not only will it look glorious but it also can be made dynamic and flexible. With the help of Conditional Visibility Rules, you can dynamically show, hide, or fill with pre-set data any of the form fields. It is possible to set one or multiple rules for every part of the form.

To set conditional rules, go to JetEngine > Forms and open the one you would like to change (to learn how to create a form, check our Form Layout tutorial). On the right side of a form field tile, there is a conditional rules button (the one with the crossed arrows). Click it.

button

To add a new conditional rule, hit the “New Rule” button.

new rule

Here’s how the conditional rule table looks like:

rule settings

Let’s take a closer look at its features.

Type

This row has a drop-down menu with three options:

  • Show this field if – the field will be shown if the conditions you set are met.
  • Hide this field if – the field will be hidden if the conditions you set are met.
  • Set value for this field if – in this case, if the conditions are met, the field will be filled with the data you type into the Value to set text area.

Let’s assume you’ve chosen the first option, Show this field if.

Field

In the drop-down menu, you will find the names of all fields you’ve already added to the form. The field you are setting a rule for will be dependent on the one you choose in this row.

Operator

Here you can choose the comparison rule. The value of the field that you have chosen (in the previous row) will be somehow compared with the data you place into the Value to compare bar.

  • Equal. If the field value is similar to the one you put into the Value to set text area, the dependent field will be shown. For example, let’s assume that the second field of your form has to appear only if the value of the first field is 5.
equal

Here’s how it will look like in the front:

  • Greater than. If the value of the chosen field is bigger than the one you type into the Value to set bar, the dependent field will be shown.
  • Less than. The opposite case. If the value of the chosen field is lesser than the one you type into the Value to set bar, the dependent field will be shown.
  • Between. In this case you don’t set a singular value but a range. If the value of the chosen field fits that range, the dependent field will be shown.
NOTE. The values have to be separated by commas. The range has to be set from the lowest value to the highest (“1,5” not “5,1”). The range includes the mentioned values (“1,5” range will work on “1,2,3,4,5” values).
  • In the list. This operator works with the Radio, Checkbox, and Select field types. If the option that a user selects is similar to the value you type into the Value to set text area, the dependent field will be shown. For example, let’s assume that the first field of your form has to appear only if the user selects the value “2” from the list.

Here’s how it will look like on the frontend:

  • Contain text. It is a special operator for fields with text information. If the value that a user inserts into the field contains data you type into the Value to set bar, the dependent field will be shown.
NOTE. You can use the Contain text operator for Media fields too. For example, if you type “.png” in the Value to set text area, the dependent field will be shown when the user inserts a PNG file to the Media field.

You can add as many conditional rules for every field as necessary. Just make sure they don’t contradict each other. As you can see, setting the rules allows you to build a form that dynamically changes as you fill it in. That’s not only a cool feature; it is also very convenient for users because they don’t need to scroll down a huge form. User-friendly, isn’t it?