This extension allows you to hide or disable a field based on the content of other fields.
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, go to the Elementor editor, select the specified field, and check its conditions tab.
Examples, by the type of field you want to check
The field is a Number
Is Field1 greater than or equal to 5?
Field1 >= 5
is Field1 equals to Field2 plus five?
Field1 == Field2 + 5
Is the 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 equal 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 the Field value is 10, the following
Field > 5
behaves as expected and evaluates as true. But if both sides of the comparison are fields, it does not work well. Let's say we have a FieldRight that has a value of 5.
Field > FieldRight
This evaluates as false! The system is doing a dictionary text comparison instead of a numeric one. To solve these problems 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 expression 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 skipped. 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.