Conditional Fields for Elementor Pro Form (formerly Conditional Fields v2)

This extension allows to hide or disable a field based on the content of other fields. It replaces an older version that will no longer be supported in the future.

Check this page to see some simple examples of usage.

New: Automatic Generator for the condition expressions

Things to Keep in Mind

Conditional Fields are case-sensitive. As such when writing conditions "option" is not the same as "Option".
When an error is shown, it will also say the field id of the field that is wrong. To fix the error you have to go to the Elementor editor, select the field specified, and check its conditions tab.

Examples, by the type of field you want to check

The field is a Number

Is Field1 greater or equal than 5?

Field1 >= 5

is Field1 equals to Field2 plus five?

Field1 == Field2 + 5

is Age between 18 and 45?

Age >= 18 and Age <= 45

The field is Text

Is the field equal to Joe?

Field == "Joe"

is the Field equal to either a or b or c?

Field in ["a", "b", "c"]

Does the field contain the word hello?

Field matches "/hello/"

The field is a Checkbox

Was the option "option" selected in the Checkbox field?

"option" in CheckboxField

The field is a Radio or a Select without multiple select.

Was option "option" selected?

Radio == "option"

The field is a Multiple Select

Was the option "option" selected in the MultipleSelect field?

"option" in MultipleSelect

The field is an Acceptance field

Was the AcceptanceField checked? Easy, just write the name of the field!

AcceptanceField

The field is a date

Is the selected date between 6 April 1453 and 29 May 1453 inclusive?

date >= "1453-04-06"
date <= "1453-05-29"

Generic

Is the value set in the field Email equals to one set in the field ConfirmEmail?

Email == ConfirmEmail

Conditions Syntax

Conditions are inserted in a text area. Each condition is written on a separate line. The conditions on each line are all logically and-connected. So

Field1 == "option1"
Field2 == "option2"

is equivalent to:

(Field1 == "option1") and (Field2 == "option2")

Where Field1 and Field2 are the IDs of the fields you are interested in. If you want to connect conditions with a logical or, use the or operator:

(Field1 == "option1") or (Field2 == "option2")

Comparing two numeric fields

Due to HTML limitations all fields real type is text. This is not a problem when comparing a field with an explicit number. For example, let's say that Field value is 10, the following

Field > 5

behaves as expected and evaluates as true. But if both side of the comparison are fields it does not work well. Let's say we have a FieldRight that has value 5.

Field > FieldRight

This evaluates as false! The system is doing a dictionary text comparison instead of a numeric one. To solve these problem at least one of the field should be put inside the following syntax, it will convert the type from text to number:

(Field | 0)

thus, the experssion becomes

(Field | 0) > FieldRight

which evaluates correctly as true.

Jumping over empty Steps

If all the fields in a step are invisible according to conditionals the step will be automatically jumped over. Notice that this is not possible with the first and last steps.

Required Fields

A required field that is invisible according to its conditions is ignored. A required field that is visible will not be accepted unless filled, this is not only verified by the browser but by the server too.

Please note that for this to work reliably the conditions of a field should contain only fields that precede it in the form.