In this article, what you will learn today is how to add the ever so desired conditional logic on Elementor forms without having to pay for something extra. As other tutorials I’ve written that involve using code, this one will have examples and the snippets will be available for you to copy and paste.
The issue with Conditional Logic on Elementor Forms
For me to rave about Elementor, I don’t really need much. It’s something I could do for days, because ever since the plugin got launched into the WordPress space, I’ve been crazy about it. It has given me the chance to work with amazing clients on equally amazing projects. And in fact, a huge part of this blog is about me teaching and explaining how to do things on Elementor.
Over the years, what was once started as a simple page builder has become something that a big percentage of the WordPress website design and development industry know or use. Actually, if you take a look at the infographic in their 5 years celebration post, some of the stats are just bonkers.
One of the reasons I was so drawn to the Pro version of Elementor – other than its easiness of use – was the fact that it came with a robust set of widgets, one of them being the Form widget. This widget made it possible for me (and I’m sure for a lot of people as well) to create simple websites with a contact form for lead generation. Even if it was something like a subscription to a newsletter, this widget came with several CRM/Newsletter platform integrations like Mailchimp, Constant Contact, ActiveCampaign and others.
However, the Form widget, even with all of the upgrades that have been made to it in the new versions of Elementor Pro, it still lacks one feature that a lot of people in the Elementor community have asked the team of developers to implement: Conditional Logic.
What is Conditional Logic?
This article from OnTask has a great definition of conditional logic:
Simply defined, conditional logic is the idea that you can set rules, or conditions, that cause your process to change based on input. The above statement relies on the “IF/THEN” conditional statement. IF you give a mouse a cookie, THEN he’s going to ask for a glass of milk. If the mouse is not given a cookie, the condition for the milk request is not met.
Taking this definition to a form is simple, if the visitor inputs or selects something on one field that affects another field. It could be choosing one between yes/no in a radio-based field to answer a question and that answer hiding or showing a different set of question fields.
This is not something we can do with Elementor forms and something I don’t think we will be able to do in the near future, because remember I said the community has asked for it? Well, it’s been 3-4 years since the request has been up on GitHub and other places to little follow-up. One of the only ones I’ve read was from Ben Pines, one of the top people at Elementor, whio said they want to maintain the form widget lightweight.
Does this mean I cannot use Conditional Logic on my forms at all?
Not really, no. What all of that means is you won’t be able to implement it with the Elementor modules like ‘Content’, ‘Style’ or ‘Advanced’ or anything of the sort. There are some workarounds and other plugins (some paid, some free) which do allow you to use conditional logic.
Among the paid ones you have JetEngine from Crocoblock, which is one that I use heavily, not only for its form capabilities but because it also custom post types functionalities, dynamic fields, dynamic conditions for things, etc. It costs $26 per year, which is not really expensive at all, but it’s recommendable to use – or at least I don’t recommend it – to buy and install it only for the form part.
You also have Dynamic.OOO and Piotnet (PAFE) Forms. However, my point stands, these plugins come with a lot of other widgets that, if you’re not going to use, then the investment is not necessarily worth it.
So, how do you do to add conditional logic on Elementor forms?
Introducing DependsON (a jQuery plugin)
If you’re a beginner, before you get freaked out by the word jQuery, please know that it is super simple to implement all that I’m going to write about next. It doesn’t really need to be scary at all.
If you already know how to implement code (either by some of my other tutorials) or just because well, you know how, then this I think a cake walk for you.
This jQuery plugin was developed specifically to facilitate the handling of form field dependencies. So, let’s get to it, shall we?
Step 1: “Install” the plugin
Ok, so the first thing we need to is make our website able to use the functionality and for that we’re going to “install” the plugin. The reason I’m using quotes for that word is because while it is called a plugin, it’s not your typical WordPress plugin where you go to the Plugins tab > Add New and then you install and activate one.
This one is kind of like a bit simpler. In the article I wrote recently about the methods for adding javascript to Elementor sites, you have the information you need to follow this step because either one of the three methods there will work for you to install the plugin.
Once you’ve decided on which one you want to use, you’re going to copy this script:
<script src="https://dstreet.github.io/dependsOn/assets/js/dependsOn-1.0.0.min.js"></script>
The plugin says that jQuery needs to be installed in order for it to work, but pretty much all – if not all – WordPress themes and Elementor come with jQuery. That’s like the easy part, the good stuff comes next.
Step 2: Creating our logic
So, let’s take one of the examples from their website. This one asks the user is they wish to continue and if the user types ‘yes’ or ‘true’, the submit button will appear. If they type anything else, the submit button will stay hidden. It’ll be something like this:
Try typing the word ‘yes’ or ‘true’
This is all the code that’s needed for that to happen:
<form id="valuesTest">
<label>Do you wish to continue?</label>
<input type="text" style="margin-top: 10px;">
<input type="submit" class="subject" style="margin-top: 10px;">
</form>
<script>
jQuery('#valuesTest .subject').dependsOn({
'#valuesTest input[type="text"]': {
values: ['yes', 'true']
}
});
</script>
Ok, so a little breakdown of what’s happening there. The form part is standard HTML, that can be understood pretty easily. I want to focus more on the part that’s between the script tags. If you see after the ‘jQuery’, everything that’s in between the first parenthesis, the ‘#valuesTest .subject’, that’s the selector of the field where you want the action to happen. The whole ‘#valuesTest input[type=”text”]’ is the other part or the other selector, which is going to act as the trigger.
Then, what’s between the braces “values: [‘yes’, ‘true’]” is the condition that needs to happen for the trigger to act.
For the selectors, all you need to know is CSS. In that particular case, the first selector is targeting the element with the CSS class “subject” that’s within the element with the CSS id “valuesTest”.
That’s pretty much all it is, so let’s try it out with an Elementor form. What I’m going to do here is only allow the message field to appear if you click ‘yes’ on the checkbox question field.
For that all I needed was this snippet:
<script>
jQuery('#test-form .elementor-field-type-textarea').dependsOn({
'#test-form input[value="Yes"]': {
checked: true
}
});
</script>
Amazing, isn’t it? Their website, which you can visit here: https://dstreet.github.io/dependsOn/ has a ton of other examples and a great documentation for you maybe get into more deep and thorough logic. What really is limiting here is your imagination.
What do you think of it? Sounds off in the comments below with any questions or doubts! Good luck!
Want to learn about Elementor, web hosting, page speed optimization or web design? Click the button below to view all the articles!
Are you looking to build a new website for your business? One that will stand out amongst the competition? Click the button and start your project now!
Are you an agency owner overworked with web design clients? No need to worry about that anymore! Take a look at my agency plans for website design & development.
