Elementor Conditional Logic Form Fields Without Plugin

Elementor Conditional Logic Form Fields Without Plugin

Just launched! Checkout the CSS Course for Elementor users.

Table of Contents

In this tutorial I'm going to show you how you can add basic conditional logic to your Elementor Pro forms, without any extra plugins.

Here is an example of what you can achieve:

Features:

  • Make ANY Elementor form field conditional
  • The logic can be applied to the Radio, Select and Checkboxes form field types
  • There can be more than one condition: when all are met, the related field shows up

Limitations:

While any field can be made conditional, only the Radio, Select and Checkboxes field can have the logic. However, this should easily cover the majority of cases where a conditional field (or many) are wanted.

If you need an even more thorough solution, I suggest looking into Dynamic.ooo's conditional fields for Elementor Pro forms. Dynamic.ooo also has a host of other form features for Elementor Pro, such as calculated fields. Don't have the addon yet? Get a Dynamic.ooo discount here.

With all of this clarified, let's get started!

Watch this great video from Imran, or keep reading!

First, add this code to your page with the Elementor Pro form

Copy paste the code in an HTML element, on the same page as your Elementor Pro form.

<script>

/* Code from https://element.how/elementor-pro-add-conditional-form-fields/
* You are allowed to use on your website and your clients websites
* No sale or redistribution without permission
* Copyright 2022
*/
document.addEventListener('DOMContentLoaded', function () {
function testLogic() {
for (const [conditionalInputID, condition] of Object.entries(showThisFieldIf)) {
let conditionalInput = setInputsElemArray(conditionalInputID);
let match = true;
for (const [conditionID, conditionValues] of Object.entries(condition)) {
let inputs = setInputsElemArray(conditionID);
let selectedInputs = [];
inputs.forEach((input, i) => { if (input.checked) { selectedInputs.push(i); } });
if (inputs[0].tagName == 'SELECT') {
selectedInputs.push(inputs[0].selectedIndex);
}
let adjustedConditionValues = conditionValues.map(e => e - 1);
if (!(adjustedConditionValues.every(condition => selectedInputs.indexOf(condition) > -1))) {
match = false;
}
};
if (match) {
conditionalInput.forEach(e => e.closest('.elementor-field-group').style.display = "block")
} else {
conditionalInput.forEach(e => e.closest('.elementor-field-group').style.display = "none")
}
}
}
testLogic();

/* Add event listeners */
for (const [conditionalInputID, condition] of Object.entries(showThisFieldIf)) {
for (const [conditionID, conditionValues] of Object.entries(condition)) {
let inputs = setInputsElemArray(conditionID);
inputs.forEach(input => {
input.addEventListener('input', function () {
testLogic();
})
})
}
}

function setInputsElemArray(ID) {
let selectors = `[name="form_fields[${ID}]"]`;
let inputs = Array.from(document.querySelectorAll(selectors));
if (!inputs.length) {
selectors = `[name="form_fields[${ID}][]"]`;
inputs = Array.from(document.querySelectorAll(selectors));
}
return inputs;
}
});

</script>

Then, let's create the conditions for a field to show up

By default, the fields you will enter here will be set to display:none; , until the condition is met.

This is the basic format to write your conditions:

let showThisFieldIf = {
    **ID of Field to be shown if condition is met here**: {
        **ID of radio, checkbox or select field that is the trigger**: [**value checked or selected**],
    },
}

Don't worry if you understand nothing just yet, that's normal. We will go through several examples.

The very first thing you need to know is that Elementor Pro form fields have IDs , and these IDs can easily be edited to something easier to read.

Elementor Conditional Logic Form Fields Without Plugin 1

So you will want to give your trigger radio, select and/or checkbox fields a legible name, and the same goes for your conditional fields.

Where to add this new bit of code

You will to add the showThisFieldIf JavaScript object at the very start of your HTML element, right after the <script> tag.

Elementor Conditional Logic Form Fields Without Plugin 2

The examples

Now that you have proper IDs set on your fields, we are ready to go through a few examples.

In this example, we want the field with the ID "myFirstConditionalField" to be shown if the Radio field with the ID "conditional_radio_trigger" has its first option selected.

let showThisFieldIf = {
    myFirstConditionalField: {
        conditional_radio_trigger: [1],
    },
}

In the following example, we want the field "myConditionalField" to be shown if the Checkbox field with the ID "conditional_checkbox_trigger" has its checkbox 3 and 4 checked.

let showThisFieldIf = {
    myConditionalField: {
        conditional_checkbox_trigger: [3,4],
    },
}

Here, we want the field with ID "myOtherConditionalField" to be shown if the select field "conditional_select_trigger" has it's 6th option selected.

let showThisFieldIf = {
    myOtherConditionalField: {
        conditional_select_trigger: [6],
    },
}

Here we have two conditions for a field to show up. A limitation is that the logic in this case is AND, and not OR. In other words, the conditional field will show up if, and only if, both of the conditions are met.

A field with the ID "myThirdConditionalField" is shown when both "conditional_select_trigger" has its 4th option selected, and "conditional_checkbox_trigger" has checkbox 2 and 3 selected.

let showThisFieldIf = {
    myThirdConditionalField: {
        conditional_select_trigger: [3],
        conditional_checkbox_trigger: [2, 3],
    },
}

Important: here, we have the three previous examples, all together. There can be only one "showThisFieldIf" JavaScript object per page, so you need to merge your conditional fields as below.

Be very careful with the syntax. All these commas, colons, brackets and curly brackets are required.

let showThisFieldIf = {
    myConditionalField: {
        conditional_checkbox_trigger: [3,4],
    },
    myOtherConditionalField: {
        conditional_select_trigger: [6],
    },
    myThirdConditionalField: {
        conditional_select_trigger: [3],
        conditional_checkbox_trigger: [2, 3],
    },
}

There can be as many conditional field as you need in the "showThisFieldIf" JS object. Just be careful with the syntax.

A conditional trigger select, checkbox or radio field can itself be conditional, upon another trigger select, checkbox or radio field.

Dealing with the HTML form field

You might notice that the HTML form field doesn't have any "Advanced" tab where you could set the ID.

Elementor Conditional Logic Form Fields Without Plugin 3

The way to deal with this is to wrap any and everything that you want to add in the HTML field in a div with the name attribute as follow:

name="form_fields[conditional_html_field]"

To end up with

<div name="form_fields[conditional_html_field]"> 
your content here
</div>

Refer to the screenshot above. Then, only the part in between the brackets is equivalent to the ID, so that's the part to use in the "showThisFieldIf" JS object. In the example given, this would be "conditional_html_field".

An advantage of that HTML field is that they are quite flexible, and even accept shortcodes. So you can dynamically display any shortcode depending on the value of a checkbox, select or radio field.

Finally, enjoy your conditional Elementor Pro form fields!

I hope you have enjoyed this tutorial!

Don't forget to have a look at Dynamic.ooo if you want something even more powerful, and built in the UI.

Cheers!

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2445 Elements right here:

Checkout the Elementor Addon Finder directly

Comments

24 Responses

  1. So Maxime,
    Just curious, don't Elementro Pro fields have this Conditional Logic on their own, without the above snippets of code??
    I never had to try them before!

    Cheers for this!!!

    1. No indeed, there is no conditional logic at all in the Elementor Pro forms. Unless you get Dynamic.ooo addon, that will add it.

      In this tutorial is an option for without addons.

      1. Just applied your example - with some tweaking of options of my own! Wicked:-) Thank you!!!

  2. thanks a lot,
    I have a case where when the customers want to upload a product photo with its quantity, i tried the code and it a success for one upload,
    but if customers want to upload more than one product photo with its quantity
    what do you think, is there any solution?

  3. How can I show multiple fields on more than one condition of a "select" object?
    My "select-menu" has 4 options.
    Dependent fields Wine1 en Wine2 for option 1, fields Wine2 en Wine3 for option 2 etc.

    I tried this;

    let showThisFieldIf = {
    wine1: {
    select-menu: [1],
    select-menu: [2],
    },
    wine2: {
    select-menu: [2],
    select-menu: [3],
    },
    wine3: {
    select-menu: [3],
    select-menu: [4],
    },
    }

    But I used the wrong approach I guess? Any ideas how to tackle this?

    1. This is a limitation of this piece of code. To keep the usage simple, I had to make a few choices by default, and one of them is the logic. As i wrote in the tutorial:

      A limitation is that the logic in this case is AND, and not OR. In other words, the conditional field will show up if, and only if, both of the conditions are met.

      OR logic can't be used, not without changing the code. Sorry about that! Try Dynamic.ooo!

  4. Hi and thanks for a good walk through.

    I have done this script and it work somewhat perfect.

    The only problem is if I select some of the radio buttons I haven't amended, the form doesn't want to send? What am I doing wrong?

    1. Hey Martn!

      Probably one of your hidden fields is set to "Required". This won't work... all the conditional fields should be set to be optional.

      1. Hey Maxime,

        i have the same problem here - but i need to set the fields to "Required". If not some of my customers forget to fill them out.. Is there an Option to customize the code so that hidden fields are no longer required, but if the fields are visible they are required?

        Thanks

  5. Great walkthrough, but I'm having trouble with this:
    I'm hiding two select fields, then showing one using the conditional logic, BUT I have both selects marked as REQUIRED - I need an option chosen in one or the other. The form won't submit this way because one of the required fields is hidden. Is there additional logic that would make this work?

    1. Hey Kathy!

      Sorry this won't work... you will have to mark these as not required, otherwise the issue is as you describe it. I tried just now to add code to make it work as you wish, however the default Elementor JavaScript in place just won't allow it. It probably register these fields as required on page load, so we can't modify their behaviour afterwards...

      Cheers!

      1. Wow! Thanks for the quick reply. I'll just figure out something to use as a default selection and use that when the visitors don't select something. Thank you again - I wouldn't have gotten this far without this page!

  6. Hi Maxime,

    Really useful and great walkthrough!!! thank you!!!
    I applied it to my forms and it works great, but unfortunately I can’t get it work when the form is in an Elementor popup. Any idea how to fix it?

    Cheers

    1. Hey MHasan,

      This is possible, however the only way this can work with the way I have coded this now is to change the entire logic to this: show field, hide if condition is matched.

      If that's all you need, then in the code, change:

      if (match) {
      conditionalInput.forEach(e => e.closest('.elementor-field-group').style.display = "block")
      } else {
      conditionalInput.forEach(e => e.closest('.elementor-field-group').style.display = "none")
      }
      

      to

      if (match) {
      conditionalInput.forEach(e => e.closest('.elementor-field-group').style.display = "none")
      } else {
      conditionalInput.forEach(e => e.closest('.elementor-field-group').style.display = "block")
      }
      

      Let me know if that works for you!

  7. hii got a Error Uncaught SyntaxError: Identifier 'showThisFieldIf' has already been declared

    Error Uncaught SyntaxError: Identifier 'showThisFieldIf' has already been declared

    1. Hello Dakshay,

      This means that you hvae the code twice on the page... you can only have the "showThisFieldIf" JavaScript object one time in total on your page. See the posts for instructions on how to make it work for multiple fields.

      1. Okay, in this case add the showThisFieldIf part of the code on the page itself (or in the footer template if your popup shows on every page), and the rest of the code in the popup itself.

        The code in the popup will need to have this line removed :

        document.addEventListener('DOMContentLoaded', function () {

        and well as this line at the very end:

        });

        Cheers!

  8. Need help with my form. I have 4 rooms in my selection field and I want to show some extra checkbox only for 2 rooms. I need it like this: If room 3 OR 4 is selected - show the extra checkbox. The selection field is set to "not required".

    I managed to make it work for one room so far, like this:

    let showThisFieldIf = {
    myConditionalCheckbox: {
    conditional_select_rooms: [3],
    },
    }

    When I try this (to include the other room):

    let showThisFieldIf = {
    myConditionalCheckbox: {
    conditional_select_rooms: [3],
    conditional_select_rooms: [4],
    },
    }

    OR this:

    let showThisFieldIf = {
    myConditionalCheckbox: {
    conditional_select_rooms: [3],
    },
    myConditionalCheckbox: {
    conditional_select_rooms: [4],
    },
    }

    It still works just for one room, not for both.
    Why is that? What's wrong?
    Thank you!

Leave a Reply

BRAND NEW

CSS Course For Elementor Users

Become a CSS ninja and design exciting, quality websites that stand out in the crowd.