Elementor Conditional Logic Form Fields Without Plugin
CSS Course ➜
CSS Course Chapters

Elementor Conditional Logic Form Fields Without Plugin

Check out our CSS Course, made especially for Elementor users.

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.

Elementor Conditional Logic Form Fields Without Plugin 1

<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 2023 by Element.how
* Version 1.1 2023/03/15
*/
document.addEventListener('DOMContentLoaded', conditionalFormFieldFunc);
document.addEventListener('DOMContentLoaded',function(){
jQuery(document).on('elementor/popup/show', (event, id, instance) => {
conditionalFormFieldFunc();
});
});

function conditionalFormFieldFunc() {
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 2

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 3

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 4

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.

Making compatible with popups

I added compatibility with Elementor popups in March 2023 in the code.

You simply need to be careful to add the HTML element on the pages where the popup will show, and not in the popup itself. Then, everything should work.

So if you want this popup available across your website, add the HTML element in the footer template.

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:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

Comments

82 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!!!

  3. 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?

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

      OR logic can't be used, not without changing the code. Here is how you can change the code to get OR logic:

      Change the line:

      if (!(adjustedConditionValues.every(condition => selectedInputs.indexOf(condition) > -1))) {

      to

      if (!(adjustedConditionValues.some(condition => selectedInputs.indexOf(condition) > -1))) {

      Cheers!

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

      2. Unfortunately I have tried to accomplish this and it just won't work. It needs to be built in from the PHP and can't be plugged in at the front end only as we are doing in this tutorial.

        In other words, something that the Elementor devs themselves would need to create. Although I think Dynamic ooo might allow this.

  6. 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!

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

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

      2. 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!

  11. 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!

    1. Hey Atumleh,

      In your code here:

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

      Both fields are the same 'myConditionalCheckbox'. If you want to show another checkbox, it would need to be another ID there, such as 'myConditionalCheckbox2'.

      Hope this helps.

      1. Thank you for the reply, bu no, unfortunately it won't help. It means I'd have to create another checkbox but I need only this single one for both room (same service for both rooms). However, you wouldn't believe it, but ChatGPT offered same solution as you just did. I kept asking ChatGPT for different solution and at the 4th try I finally got the right answer - it finally works as I want. The replaced part of the code suggested by ChatGPT:

        function testLogic() {
        for (const [conditionalInputID, condition] of Object.entries(showThisFieldIf)) {
        let conditionalInput = setInputsElemArray(conditionalInputID);
        let match = false;
        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.some(condition => selectedInputs.indexOf(condition) > -1)) {
        match = true;
        break;
        }
        }
        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'));
        }
        }
        }

        So now this example works as the OR logic

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

      2. Interesting! ChatGPT is really something.

        I believe just chaging the line:

        if (!(adjustedConditionValues.every(condition => selectedInputs.indexOf(condition) > -1))) {

        to

        if (!(adjustedConditionValues.some(condition => selectedInputs.indexOf(condition) > -1))) {

        (changing the word 'every' to 'some') would also get it working the way you want here!

        Cheers!

  13. Hey! I have the following condition

    If Cake, then show 'Layers or Tiers', If layers show dropdown for layers number.

    But if I change the If Cake (first step) to Cupcake, then 'Layers and Tiers' goes away but not the dropdown for layers number.

    Anyone can help?

  14. Hello,

    I want to thank you for the work of posting these codes, and the solution to this problem that Elementor people don't want to see...

    I had a form on my website with conditional logic, which used the Piotnet plugin (Piotnet Addons For Elementor Pro)

    Thanks to your explanation, I was able to remove that plugin (lighten the load of that page) and with very few lines of code, my form works exactly the same as before (if you want to see it, it's at matchdayauctions.com/en/contact)

    Thanks a lot!

  15. Great tutorial, thankyou.

    To improve the UX, I'd love for there to be motion effects for the field that appears. Specifically, i'd like to have :

    transition: 0.3s ease all;

    and for the field to move down at the bottom of the form.

    Is this possible?

    1. Hey Grand!

      Here it is. Add this CSS to your page.

      .elementor-field-group {
   animation: fieldAnim 0.8s forwards ease;
}

@keyframes fieldAnim {
   0% {
      opacity: 0;
      transform: translateY(-10px);
   }

   100% {
      opacity: 1;
      transform: translateY(0);
   }
}

      1. Thank you for sharing! I expected it to work but didn't test it myself yet.

  17. Hello,

    I have used this tutorial in the past without issue when embedding a form on an Elementor page, however, I am trying to use it on a pop-up form but the code is not working. I have tested a copy of the form and HTML code on a test page and it works, but it does not work in the pop-up form where I need it.

    Any suggestions?

    Thanks!

    1. Greetings Kyle,

      At the very start of the code, remove the line :

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

      Then at the very end, remove the line:

      });

      Then, have the code inside the popup, after the form element.

      Let me know if that works!

      1. Hi Maxime,

        Unfortunately that did not work. I removed both pieces of code and moved the HTML section below the form but no luck.

      4. I updated the code provided, and added instructions near the end of the tutorial to make it work in a popup properly.

        Cheers!

  18. Hi Maxime, I think I have done all the steps correclty. But the conditional field stays hidden even when I select the value for which it should show. The control field is 'select' type and the conditional field is a text one. Any suggestions?

    1. Greetings Margarita!

      Maybe you are loading NiceSelect? I answered another reader's query below, who had the exact same issue.

      If not, I'd need to see your page. Cheers!

  19. I'm using this with a select field.
    If I add the code to show option 1 - the page loads with the fields.
    If I choose option 2, the fields never show no matter what I do.

    1. Greetings Paul!
      I'd need more than that to have an idea what might be going on. Would you have a URL to share with me?

  21. Hello,

    Even if I pick option #1, the other options which are not chosen get in my email. Do you have any ideas on how to hide the fields that are not chosen in the confirmation email?

    2. Sorry Zeljko, this is a limitation of this method. The fields are hidden visually only.

      Maybe you can try with Dynamic.ooo, they probably have this working where it won't send the empty fields.

  22. First of all, this is amazing! Thank you!

    I'm hoping you can help me with an issue that has come up. I'm not sure if it's just me and my implementation, but I was wondering if the conditional fields that are hidden should be reset after form submission. I am using your code to control two forms - one for desktop down to wide mobile in a popup and another for mobile on the page.

    Here is the link to the page: https://dev-00.villagecycleshoppe.com/lets-ride-work-11/

    I am using the following code to show the conditional fields:

    let showThisFieldIf = {
    roadmobile: {
    biketypemobile: [2],
    },
    hybridmobile: {
    biketypemobile: [3],
    },
    cruisermobile: {
    biketypemobile: [4],
    },
    groupnamemobile: {
    morebikesmobile: [1],
    },
    road: {
    biketype: [2],
    },
    hybrid: {
    biketype: [3],
    },
    cruiser: {
    biketype: [4],
    },
    groupname: {
    morebikes: [1],
    },
    }

    Thank you for your help!
    David

    1. Hey David!

      What issue exactly are you having? It's not clear to me... I went to your site and filled the form, didn't see anything wrong...

  23. Wow, you're fast!

    For example, if I select "Road" as the bike type, choose a size based on that option, and submit the form, then go through the form again without closing the popup window (for the desktop version) or refreshing the page (for the mobile version), the the bike size field for "Road" is still showing until I select a different bike type. The same thing happens with the "Group Name" conditional field. My assumption is that those conditional fields should be hidden again once the form is submitted.

    1. Hey David!

      Hmm... it's a bit too much of a edge case that someone would fill the same form twice in a row though. I won't author new code to prevent this situation.

      If you really need a fix for this, try a redirection after form submit. If needed, redirect to the same page. That way the form will be reset.

      Cheers!

  25. Hi Maxime,

    Thanks so much for this code, it's brilliant!

    I do have a question though. I have steps on a form I've built, is it possible to hide or show entire steps based on previous fields which are selected?

    Thanks 🙂

  26. Hi there-- this post has been EXTREMELY helpful.

    I have two issues/questions:
    1.) My form is working great when option 2 is selected for a question (which has more conditions to it!), but when option 1 is selected, the submit button stalls and never goes through. Any suggestions here?

    2.) You mentioned we could pull shortcodes into the HTML field and I am not able to get this to work. I am trying to set up a "preview email" screen where a client fills out a referral form that populates an email for them to send to a referral (and in the html section they could preview their email before sending). However the shortcodes just appear as typed with no populated information. Am I missing anything? Any advice?

    1. Greetings!

      1. Do you have something marked as "required" that is hidden? This code can't manage that, and the form won't submit as the hidden required field is not filled. all hidden / conditional fields need to NOT be required.

      2. The shortcode probably won't re render from what people filled earlier. A shortcode from something else (like from a premade section somewhere) should work, but shortcodes for the form itself won't dynamically update their values on the front end.

      Cheers!

  27. Hi. I was able to create my form alright, but in the middle of it, I have a checkbox option. Clicking no should stop the filling of the form, and send them to another page or show an error message saying they can't continue. Is this possible with checkbox?

    1. Greetings Taiwo!

      Sorry this is a bit above the scope of this tutorial. What you want is possible, but not with the code I provide here... you will need some other custom JavaScript on your page for this.

  28. Hi, if i have just one popup in the page everything is fine, but with 2 different popups only one is good, the other gets screwed (even the steps doesn't work - it become single page form) ... do you have an idea about that?

    1. Greetings,

      Do both popups show the same form?
      If you have two popups with different forms, do they have conflicting IDs ?

      Cheers!

      1. Hello,

        i have many buttons (like 8 or ore) that trigger 2 or 3 different popups. Every popups has inside a different form. In any case, just by putting the code inside the page the website get screwed...

      2. I'm not certain why just adding the code to the page would mess the website up... nor what "website get screwed" means here, really. It doesn't show anything? It shows stuff but the styling is broken?

        I can't help with these imprecise qualifications I'm afraid... a URL would be more useful.

  29. Hello and thank you for your great code! Helped a lot!

    One question:

    Is it possible to show something like: If 3 out of 6 Boxes are checked yes (1) show ergebnis 2:

    ergebnis_2: {
    frage_01: [1],
    frage_02: [1],
    frage_03: [1],
    frage_04: [1],
    frage_05: [1],
    frage_06: [1],
    },

    1. Hey Marc!

      This is possible however it requires new code to be written. It's beyond the intended scope of the tutorial too (it's quite specific) so if you would like this it would be custom work, you can reach out to me if interested.

      Cheers!

  30. Hi Maxime. Can you help me make this work. When I select the Landlord option it doesn't show the 2 fields I called. But when I choose the Tenant, it does.

    Here's my code:

    let showThisFieldIf = {
    email: {
    areyoua: [2],
    areyoua: [3],
    },
    phone: {
    areyoua: [2],
    areyoua: [3],
    },
    genbus: {
    areyoua: [3],
    },
    }

    Here's the link : https://test.projectqueens.com/contact-us/

  31. Hi Maxime. I recently updated the code. It shows now the the required fields when I select the Landlord option, but I'm unable to send it. The button is unclickable.

    Here's the code:

    let showThisFieldIf = {
    email: {
    areyoua: [2],
    },
    phone: {
    areyoua: [2],
    },
    email2: {
    areyoua: [3],
    },
    phone2: {
    areyoua: [3],
    },
    genbus: {
    areyoua: [3],
    },
    }

    Here's the link: https://test.projectqueens.com/contact-us/

    1. Hey Kemuel!

      This is simply because your General Enquiry field, which is hidden in this case, is set as required. That won't work. Hidden fields can't be set as required otherwise the form won't send.

      I already tried to change this behavior but from my quick attempt I could not get there. It looks like the way Elementor manages these make them out of reach from a front end snippet.

      Cheers!

  32. Hi Maxime,

    It worked! Thank you.

    The only problem is I need the this code to be converted as an OR logic:

    let showThisFieldIf = {
    email: {
    areyoua: [2],
    },
    phone: {
    areyoua: [2],
    },
    email2: {
    areyoua: [3],
    },
    phone2: {
    areyoua: [3],
    },
    genbus: {
    areyoua: [3],
    },
    }

    OR logic in my idea:

    let showThisFieldIf = {
    email: {
    areyoua: [2],
    areyoua: [3],
    },
    phone: {
    areyoua: [2],
    areyoua: [3],
    },
    genbus: {
    areyoua: [3],
    },
    }

    1. Change the line:

      if (!(adjustedConditionValues.every(condition => selectedInputs.indexOf(condition) > -1))) {

      to

      if (!(adjustedConditionValues.some(condition => selectedInputs.indexOf(condition) > -1))) {

      Cheers!

    1. When you change the line

      if (!(adjustedConditionValues.every(condition => selectedInputs.indexOf(condition) > -1))) {

      to

      if (!(adjustedConditionValues.some(condition => selectedInputs.indexOf(condition) > -1))) {

      (making this change to enable OR logic instead of AND)
      Then, you have to use it this way, with comma separated arrays:

      let showThisFieldIf = {
      email: {
      areyoua: [2,3],
      },
      phone: {
      areyoua: [2,3],
      },
      genbus: {
      areyoua: [3],
      },
      }

      Let me know if that works!

Leave a Reply

Become the CSS ninja your were meant to be with our CSS course for Elementor users!

CSS Course For Elementor Users
Elementor Conditional Logic Form Fields Without Plugin

Awesome new Elementor designs, right in your inbox.

Just fill in your email.

Navigation

Quick links

Social

Make a donation:
Created by
Elementor Conditional Logic Form Fields Without Plugin