This article is going to discuss three ways that you can easily add conditional logic to an Elementor Form. Elementor Pro comes with a fairly robust form widget that allows you to do a lot, integrating with marketing platforms, adding multi step functionality, and more.

Unfortunately, the Elementor Pro form is missing an essential component - conditional logic.

Why Do We Want Conditional Logic In Elementor Forms?

When it comes to forms, conditional logic is used to display relevant fields to users. Here's a quick example to help you understand what conditional logic does and why it can be powerful for your Elementor:

Question: I Am A: Dog OR Cat
IF CAT, show “Do You Like Milk?”
IF DOG, show “Do You Like Bones?”Code language: PHP (php)

You can easily use conditional logic to show personalized fields to those who are filling out your forms. Of course, the example above is non professional, but this can be incredibly helpful if you're collecting personalized information about the submitter.

Predominantly, this is a feature that is included in premium solutions like Gravity Forms and Formidable, both costly, but functional. That's probably the reason why this feature is so requested among Elementor users -- it's really the only thing that sets the Elementor Pro form back from the aforementioned premium solutions.

Will We Get Conditional Logic For Elementor Pro Forms?

A repeating trend with Elementor is the lack of developer response to user input. We've seen this on custom breakpoints, webP support, and now conditional logic for elemental forms.

The main GitHub request called “form fields conditional display logic” has been open since 2017.

About a month afterwards, an Elementor developer stated that they would like to keep the form widget lightweight and simple, essentially stating “we don't plan to offer conditional display logic to Elementor form fields anytime soon”.

Now, in 2020, Elementor still doesn't have conditional logic for forms, even after adding powerful features like multi step fields.

Because of this, we can assume that Elementor will not be adding conditional logic to their form fields anytime soon, leaving us to find work arounds and methods to address this set back.

As with all of our Elementor tutorials, we're going to begin with a free method that works around the lack of conditional logic in the Elementor form widget. Because it's free, it requires a bit of work, but you're able to get the desired effect.

The other two solutions come in the form of Elementor add-ons, and they natively integrate with the builder. They also offer a lot of value in the form of additional widgets and functionality that ship with the core features of each.

Method 1: Fluent Forms (Free)

This method actually involves using a completely different form offering then the one included with Elementor Pro. In many cases, this is a great alternative, though for some (we’ll discuss limitations below) you may want to look towards the other two methods.

WP Fluent Forms is a freely available plugin from the WordPress repository, which falls into the category of “super high quality, but relatively unknown”. We really like this tool because it offers professional, powerful features for FREE. We also really like the fact that this has a database, while the Elementor Pro form does not.

Fluent Forms is the perfect choice if you're looking to integrate conditional logic directly into Elementor, and this is bolstered by the fact that it is officially compatible with the page builder. What this means is that you can use the fluent forms interface to build the general structure of the form, but use the native Elementor builder to style it.

We've used this on many client websites, and in all honesty, it's usually a better option than the built-in Elementor Pro form.

Of course, there is a pro version, but if you're looking for conditional logic and not much more, that ships with the free version. The pro version ($59) includes dozens of integrations into marketing platforms, Stripe, and Zapier. Compared to the features that it comes with and the pricing of competing offerings like Formidable or WPForms, the pro version offers more value.

But keep in mind -- If you're looking to add conditional logic to a form in Elementor, you can do this with the free version of WP fluent forms , which is exactly what we're going to do in the next section of this article.

Let's take a look at how to build a form that uses conditional logic to show or hide specific input fields, and incorporate it into our Elementor website.

First, we create our form in the Fluent Form builder, adding the conditional logic capabilities.

In this example, we've added a radio field that asks if the visitor would like to show a hidden field. Using conditional logic, if the visitor selects “yes”, a hidden field will be displayed -- Textbook conditional logic and visibility in form fields.

Now that we have created our form with conditional logic (remember, this plugin is 100% free AND has a database), It's time to add it to our Elementor website and style it accordingly.

This is really simple. First, create a new page, or edit an existing one using the Elementor builder. From the interface, search for the fluent form widget, and drag and drop it onto the canvas.

After setting the form that you would like to display in your Elementor page, Navigate to the style tab, and use the integrated settings to change the colors, typography, borders, and other styling elements of your fluent form.

Then, you'll be able to view and use the form with dynamic conditions on the front end of your Elementor website. As you can see in this video example, we have set up conditional logic in our form (which again, comes from a free plugin that can natively integrate with the Elementor builder), and conditionally toggle the visibility of a field.

As you can see, this is an incredibly simple, easy, and free way to add conditional logic to Elementor forms. At the same time, we are replacing the Elementor Pro form widget with a new Fluent Forms offering.

In many cases, using the Elementor Pro form makes more sense then adding another plug into the mix. This is especially true if you're looking to add integrations and don't want to purchase the $59 Fluent Forms Pro Plugin.

If that's the case, you can take a look at the two following methods, which use dedicated add-on packs for Elementor to add conditional logic to the built-in Elementor Pro form widget.

The benefits of using this are twofold. First, you can use the native widget that comes with Elementor, and second, these add-on packs come with additional widgets and Utilities that extend the functionality of Elementor, meaning you get more value for your money.

Method 2: Dynamic.OOO Dynamic Form Fields For Elementor

Dynamic Content For Elementor is an add-on pack created for developers and power users that helps you add dynamic widgets and content to your website.

This is incredibly powerful and allows you to access advanced development tools, which among others, includes conditional logic for the default Elementor Pro forms.

There are actually 10 utilities that come with dynamic content for Elementor that specifically extended functionality of the default form. These range from everything from a PDF generator of form submissions to form calculations to conditional logic.

Let's take a look at how to use Dynamic.ooo’s conditional logic for Elementor forms to show and hide an form input based on conditions. Again, we want to stress that this tool integrates with the Elementor Pro form – no third party solutions here.

When building your Elementor form dynamic conditions for Elementor automatically adds a “Conditional Visibility” tab to every individual component of the form.

You can choose between always visible, show if, and hide if. From the two conditional statements, you can choose which conditions need to be met (empty, equal to, greater than, etc) for the visibility to be impacted.

If you're looking for an incredibly simple way to add conditional fields to the Elementor Pro form, Dynamic.OOO is the way to do it. Even better, it ships with tons of other widgets and form utilities that help you extend your Elementor website in any way imaginable.

The add-on pack costs 49 euros per year, and in our opinion is well worth it. We happily use this tool to add conditional logic to forms on client websites, as well Several additional widgets to display data dynamically throughout pages and posts.

Method 3: Piotnet (PAFE) Dynamic Forms

Piotnet is another add-on plugin that helps you add conditional logic to the Elementor Pro Form. We really like Piotnet because it ships with tons of helpful but targeted utilities in widgets, and they update it every single week.

This is an interesting way to add conditional logic to Elementor forms, in that you don't actually use the “Elementor Pro Form” widget.

Instead, Piotnet ships with its own form solution. With it, you have access to field widgets, a submission button, and even a booking form.

Essentially, you drag and drop fields on to the canvas, finishing them with a submission button.

On a per field basis, we can toggle conditional visibility on and off.

Of all of the conditional visibility offerings for Elementor, Piotnet has the most robust implementation, with several different actions, the ability to hypertarget individual fields, set up comparison operators, and choose between and or and an and operator.

Piotnet Forms are known to be very powerful, but they require you to sit down and figure out how exactly to use the add-on packs implementation of this functionality. Because of this, method two may be the best bet if you're simply looking to add conditional logic to an Elementor form.

Method 4: JetEngine Plugin by Crocoblock

JetEngine is a full-fledged plugin for Elementor and WordPress, developed by Crocoblock. It is about all things dynamic, which means JetEngine features make it possible to add any type of dynamic content to a development project. 

Custom post types, custom content types, dynamic widgets, query builder, data stores, REST API, profile builder... Can you imagine this much functionality in ONE plugin? More to it, there’s the sought-after Conditional Logic feature, which allows you to configure the visibility of certain form fields. Let’s delve into details and see how it works. 

Conditional Logic operates on a basis of visibility rules that you set on the backend in the form’s Fields Settings. Depending on whether the conditions are met or not, some form fields can either appear or disappear in the front. Basically, when a user selects/types/ticks the intended value, the field is shown. Such an approach makes your Elementor form more:

• User-friendly. Because the displayed fields tick the boxes of those users who actually need to fill in that field;
• Space-saving. Initially, the form doesn’t look lengthy, as the concurrent fields are being added gradually.

Now, to the setup. It takes place on the backend. You are supposed to add as many form fields as necessary to achieve the desired form layout and then configure the conditional visibility rules. Properly set, these rules allow you to show, hide, or pre-fill some of the form fields – all dynamically. 

No need to create just one conditional rule – add as many as you fancy but make sure they do not contradict each other so the form logic is not broken. 

Now, let’s get to practice. In the example above, we have crafted a test form that will suggest the frequency of newsletter delivery – daily, weekly, or monthly. The field will be shown only if the user picks the “Yes” option in the Radio field. If the user chooses “No”, the field will remain hidden. Simple as that!

You’re probably wondering if this stuff comes for free. Nope, JetEngine is a paid tool but not pricey. For as little as $26 per year, you get the plugin, regular updates, and quality support – at least, the website says so. But you know what the silver lining is? You get access to ALL JetEngine features, not just Conditional Logic. 

We got curious and did some digging. Turns out, JetEngine embraces a total of 58 features that can be mixed and matched freely. For instance, we could go further, activate the Custom Content Type module, and save the collected feedback form data to a separate DB table. For a mighty dynamic plugin like JetEngine, a yearly price is more than adequate. 

Condition

Conditional logic is an essential functionality of any form system in WordPress. It allows you to toggle visibility for individual fields and buttons, tailoring a general form and changing it in real time to collect the most relevant information from the visitor.

Unfortunately, the Elementor Pro form, no matter how powerful it is, doesn't come with this functionality built in. This feature was first requested in 2017 and hasn't seen any interest from the development team behind Elementor since then, meaning that we're left finding methods and plugins to work around this drawback.

Luckily, there are three viable solutions to this issue. One is free, one integrates directly with the Elementor Pro Form, and one offers even more power when it comes to conditional visibility.

If you have any questions about how to use any of these solutions, methods, or plugins , feel free to reach out in the comments below. We've used all three on client websites and would love to help you out. Also, if you found this article interesting or helpful, consider linking to it from your website or sharing it on social media.