Skip to content

Conditional logic & fields for Elementor Pro’s form for FREE – Step by step guide

Reading Time: 5 minutes
Conditional logic & fields Elementor Pro Form for FREE

You have to know that this is really easy, but you need and must concentrate and follow along with me step by step to get the desired results. Here’s how you can create conditional logic for Elementor pro forms for free

Table of content:

  1. Install & activate the required plugins & preparations
  2. Explaining the process
  3. Create your Elementor form
  4. Set the CSS Classes and form field IDs
  5. Add the JS, jQuery & conditions codes
  6. Understand & customize the conditional code – dependsOn
  7. Conditional logic & fields for multi-step form
  8. The ShortestCut – Sum up in a paragraph

Install & activate the required plugins & preparations

Elementor Pro – The best investment, 49$, you’ll make for your website. It will be used to create the multi-steps form.

Head & Footer Code – This will be used to add the jQuery library to the website, more accurately in the <head> </head> section.

Simple Custom CSS and JS – The plugin is used to add the code of the conditions.

Explaining the process

Alright, stay focused, this is really simple to do, nothing to be overwhelmed for, but you need to follow the steps.

I have written everything step by step.

First, we’ll copy & paste two lines of code as they are. Then we’ll create the form, add a CSS class to the form and IDs to the form fields. And lastly, we’ll add the condition code. A certain field appears when a certain answer is received from another field.

It’s simple, you can do it.

We will get a form like this

Conditional logic for Elementor Pro Form widget

If you’re looking to having conditional fields for Contact Form 7, then here’s how.

Create your Elementor form

Now I won’t talk about designing the form, you can figure it out yourself, right? Right.

  1. Add the form widget
  2. Add/edit fields
Elementor Pro form widget

Set the CSS Classes and form field IDs

First of all set the CSS class of the form

  1. Right click on the form -> Edit Form
  2. Go to the Advanced tab -> CSS Classes
  3. Add a class to your form
Elementor Pro form CSS classes

Now edit the IDs of all the fields that should be hidden before a condition is met.

PAY ATTENTION, add the IDs to the fields that should be hidden before a certain condition in other fields is met:

  1. Go to each field
  2. Go to Advanced and add a unique ID
Elementor Pro form field IDs

Add the JS, jQuery & conditions codes

Before going on, you should have all the above mentioned plugins installed & activated.

Install the JS & jQuery plugins:

From your WP admin dashboard go to:

  1. Tools -> Head & Footer Code
  2. In the HEAD section copy & paste the following code at the top
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script>

<script src="https://dstreet.github.io/dependsOn/assets/js/dependsOn-1.0.0.min.js"></script>
dependsOn jQuery and JS code

Add the JS, jQuery & conditions codes

From your WP admin dashboard go to:

  1. Custom CSS & JS
  2. Click on “Add JS Code”
  3. Copy & paste the following code -> Publish
$('.my_form #form-field-content').dependsOn({
    	'.my_form input[value="Yes"]': {
    		checked: true
    	}
});
Conditional logic for Elementor pro form code

This is it, if you did as I did, then you now have a conditional field, the field with the ID “content” will only appear when the checkbox “Yes” is selected.

Now let’s move on to understanding and customizing the code.

Understand & customize the conditional code – dependsOn

I just showed how to create a conditional field by following my footsteps. Now let me put you on the road to creating your own conditional fields.

So we installed the JS & jQuery plugins in the <head> of the website, this is basically to tell the browser where to look for the JS function we’re using.

Now let’s break down the code.

$(‘.my_form #form-field-content’).dependsOn({

     ‘.my_form input[value=”Yes”]’: {

     checked: true

     }

    });

  • Line 1: So the [.my_form] is the CSS class we gave to our form.
  • Line 1: The [#form-field-content] is the ID we gave to our text area field, which we wanted to be hidden.
    • NOTE: whatever ID you give to your form, in the code you should write #form-field-[the ID that you gave].
    • So if my ID was “blabla” instead of “content” I would write #form-field-blabla
  • Line 2: [.my_form] is again the CSS we gave the element.
  • Line 2: [input[value=”Yes”]] is where we say that the checkbox with the value of “Yes” should be checked for the hidden field to appear.
  • 3rd Line: checked: true is used for checkboxes and radio buttons.

I’m not the owner of the code, just found it by Googling around. Here’s the owners of the code, and you can learn more about the code’s details on their website.

https://dstreet.github.io/dependsOn/

Also, a huge thanks to this article, without it I wouldn’t have found dependsOn, however in the article the process and steps are not complete.

Conditional logic & fields for multi-step Elementor form

The JS & jQuery part don’t change, but what changes is how you should create your form. For some reason, unknown to me, when we do the conditional logic for a multi-step form on Elementor, the hidden field doesn’t disappear after we change the condition.

For example, if I’m asking 1,2 and based on that on the 3rd step I’m showing a result, if the user chooses the answers, the conditional logic will work fine on step 3, but if they click on previous, and then change the answer and come to step 3, the answer will stay the same.

So as a workaround you have to hide the previous step.

From your WP admin dashboard go to Appearance -> Customize -> Additional CSS

Copy and paste the following code

/*Hide the previous button from multi-step forms*/
div.elementor-field-group.e-form__buttons__wrapper.elementor-field-type-previous{
	display: none !important;
}

The ShortestCut

  1. Install & activate the required plugins
  2. Add the JS & jQuery code in the <head> section
  3. Create your form
  4. Add CSS Class to your form
  5. Assign IDs to your form fields
  6. Add the condition JS code

You’ll have a form like this. Enjoy!

Conditional-logic-for-Elementor-Pro-Form-widget

This could be tough, I’ll create a video about this soon to make it simpler, until then write a comment if you have a question.

Leave a Reply

Subscribe, I never spam

Agapi
stepanyanagapi229
Read More
Although I don’t have a restaurant the urge to read it was too strong and didn’t disappoint. I guess if you have a restaurant this is a must-read. Thanks a lot.
Diogo Barros
Diogo Barros
Read More
Thank you !
J
J
Read More
i've been searching everywhere for this solution, you're the first person who gave a simple solution. Ty
Farah I
Farah I
Read More
Thanks. I already have cloudflare and its still slow.. was thinking of how to remove unused js... but found your video instead
BLACK ANT
BLACK ANT
Read More
makes complete sense bro. Thank you
 Tobee Panyasith
Tobee Panyasith
Read More
Thank you for this great video

Table of Content

Subscribe to my mailing list

I never spam