Skip to main content

Conditional Fields for Elementor Pro Form

Updated this week

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.

Did this answer your question?