Conditional logic enables you to show or hide specific content or sections based on certain conditions or user interactions.
This post will introduce you to conditional logic in Elementor Forms.
Installation
Upload the add-to-any directory to the /wp-content/plugins/ directory.
Then, ensure you activated and create a new form.
Getting Started
Here are some ways to set your condition rule.
- Show/Hide: This logic will be shown or hidden when conditions are met.
- Select Field: Which field would you like this logic to depend on?
- Comparison: Options include: is, is not, empty, not empty, contains, does not contain, starts with, ends with, greater than, and less than.
- Select Choice: What value would you like the field to contain for this condition to apply? This field will deactivate if you select empty or not empty from the comparison dropdown.
How to Apply Conditional Logic in Elementor Forms?
You need to create a new form and check on the Enable Conditional Logic option on any field to imply conditional logic on that field.
Using basic conditional logic
The most common use of conditional logic is to show or hide fields depending on what the user selects.
For example, we’ll use conditional logic for Other Profession field. We’ll set the logic to say: Show this field if the What is your profession? radio is set to Other.
- Step 1: First, set up your fields. As we will be using a radio to handle the display of various selections: Graphic Designer, Interpreter, Other.
- Step 2: As we want Other Profession to show up when Other is selected, we will need to enable conditional logic on Other Profession. Open it by clicking on the field, and click on Enable Conditional Logic section.
- Step 3: Copy the ID of What is your Profession and paste it into Field ID of Other Profession, set Operator is, value to compare is Other.
Here is the result, when Other option is selected, the Other Profession field will display.
Using complex conditional logic
In some cases, you can discover that one single conditional logic isn’t complex enough. You can include as many conditions as you want, though.
For example, we’ll ask users if they’d like to receive our discount code. However, we only want to display this option if they’ve selected Yes. Please send it to me and chosen Profession Type is Student.
- Step 1: First, set up your fields. As we will be using a radio to handle the display of various selections:
- Step 2: As we want Coupon Code to show up when Yes. Please send it to me AND Student are selected, we will need to enable conditional logic on Coupon Code. Open it by clicking on the field, and click on Enable Conditional Logic section.
- Step 3: Copy the ID of Would you like to receive our discount code? and paste it into Field ID of Coupon Code, set Operator is, value to compare is Yes. Please send it to me. Copy the ID of Profession Type and paste it into Field ID of Coupon Code, set Operator is, value to compare is Student.
then you can see a preview
Using Conditional Logic Section
In this example, we will use conditional logic to show different sections of a form based on the user’s input.
You can see our example:
- Step 1: First, set up your fields. As we will be using a dropdown to handle the display of various selections: Electrical Stove, Toaster.
- Step 2: We create the 2 sections of Electrical Stove and Toaster with the necessary fields under each section break. Open the options on one of your sections by clicking on the field, and clicking Enable Conditional Logic.
- Step 3: We’ll repeat the process like above. As we want the Electrical Stove section to show up when Electrical Stove is selected. We have set it to only show if the dropdown button field is Electrical Stove. As we want the Toaster section to show up when Toaster is selected. We have set it to only show if the dropdown button field is Toaster.
That’s it! We hope this article helped you learn how to use conditional logic with Elementor Forms.