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

5 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.

  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?

Leave a Reply

Just launched

CSS Course For Elementor Users

Offer incredible value to your clients by becoming a CSS ninja!