How To Add Conditional Logic to an Elementor Form

Authored By: James LePage
Published On: July 30, 2020

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, Elementor, why?

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?”

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.

Use Conditional Logic to Create Forms Based on Input | Gravity Forms
A Conditional Logic Diagram by Gravity Forms

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.

<span itemprop="name">WP Fluent Forms Pro Add-On: The Fastest & Most Powerful WordPress Form Plugin</span>

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.

Fluent Forms Builder acts like a $100 plugin - it's free.

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.

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.

✌️ Peace Sign Emoji Meaning with Pictures: from A to Z

Join Our Growing Mailing List Of Design Crazed Individuals

Expertly curated emails that will help you generate more income through good design.

You're in the club 💪.

Something went wrong.

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Jan
Jan
1 month ago

great article! thanks!

do you have any idea if it's possible to create conditional steps?
for example in the first step the form asks for "do you want to go left or right?" and depending on the answer it shows step 2 or step 3.
but it would be great to have the first step only have two buttons (radio) "left" and "right" but not "next step" button.

i hope your get what i am trying to achieve 😉

James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!

Social Share

Crafting Stunning Digital Appearances & Assets Out Of New York.
Get In Touch
Syracuse, NY | Charlotte, NC | New York, NY
© 2020 Isotropic, LLC
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram