Conditional Fields for Elementor Pro Form

Getting started with Conditional Fields for Elementor Pro Form #

ElementsKit has added a conditional logic feature for Elementor Form. With this addition, now when empowered by ElementsKit, you can hide/show your form fields depending on various conditions. 

This conditional logic feature works on the if-else theory. For example, you can show fields if any (single or multiple) conditions are true. In such a case, the field will be hidden until and unless the conditions you set are true.

You can set multiple conditions based on both AND and OR relationships.

Note: This feature is only available with the Elementor Pro and ElementsKit Pro versions.

Now let’s check how you can use this useful feature in your Elementor form.

How to setup conditional logic in Elementor Form using ElementsKit #

Learn how to add conditional logic to Elementor pro form fields in just 5 simple steps.

Step 1: Enable Conditional Fields For Elementor Pro Form Module #

The first step is to turn on the Conditional Fields For Elementor Pro Form Module. For that, navigate to ElementsKit ⇒ Modules ⇒ Turn on the toggle button of Conditional Fields For Elementor Pro Form, and finally, click on Save changes. 

Step 2: Create a new page and edit with Elementor #

First, step is to create a New Page. For that, Navigate to WordPress Dashboard ⇒ Pages and click on Add New.

Now provide a Title, choose Template as Elementor Full Width, and finally click on Edit with Elementor to edit the page.

Step 3: Drag and Drop Form widget of Elementor Pro #

Search for the Form widget. Once you find the widget simply just drag and drop the widget to create a form in Elementor. The default form that Elementor provides has three fields: Name, Email, and Message.

We are going to use conditional logic on one field as an example to show how this conditional logic works.

Step 4: Apply Conditional logic #

We are going to apply conditions on the Email field based on the input user gives on the Name field. The email field will only be visible when the Name field is not null (the user has input some value).

For that, click on the Email field to expand. You should see a third tab named Conditions. Here are the options you need to utilize to apply the condition:

• Enable Conditions: Turn on the Enable Conditions toggle button.
• Enable Action:  Choose the end result if the conditions are met. You can choose Show If or Hide If.
• Conditions Expressions: Here you need to write the conditional expressions. If you can add multiple conditions.

Example: To make the Email field only visible when the Name field has a value, you must choose If show as Enable Action’s value. After that, you need to copy the ID of the name field. 

Then come to the Email field and on the Conditions Expression write “name != null”

You can use some of the conditional expressions you can use.

Step 5: Publish and preview #

Once you add all the conditions, click on publish and then see the preview.