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.
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.