USE CASE

Elementor Forms + Fluid Logic

Fluid Logic for Form Fields

Dynamic conditions and visibility for form fields and for widgets according to form values.

Fluid Logic lets you rethink Dynamic Visibility

Fluid Logic is Gloo‘s new engine for dynamic visibility and logic conditions for Elementor elements. What makes it truly unique is that it goes beyond widgets, columns and sections, as it lets you work on your visibility logic even on single form fields within an Elementor form. The best part? it’s as simple to set conditions for the form fields as it is for anything else.

Here we’ll be taking a look at a simple application for this feature that can be extended, with a little imagination, to achieve extremely complex forms connected to other widgets within the same Elementor page using dynamic visibility with Fluid Logic.

Let’s take a look.

In this Short Showcase we’re looking at a simple form with some basic logic that can actually be extremely useful to show certain elements according to user input on the form.
We have three simple form fields:

  • Text Field
  • Email Field
  • Radio Select Field

As you can see in the video, typing “Myname” in the first field makes the second show up, and in this other one, if we type in a gmail address, the last field appears. Then, depending on the user selection on the radio field, different widgets of different colors appear.

How did we achieve this?

After having created the form with the fields we need, we head to the page options in the Elementor editor where we will find Fluid Logic in the advanced tab. We’ve created two conditions for the fields and one for each color. In the first condition, we’ve targeted the first field using its unique ID, to check if the user input contains the value “Myname” Here we’ve toggled on Is Form Field because we’re working with a form.

We’ve done the same for the second condition except this one is only true if the input contains “@gmail.com“. We’re essentially setting up conditions we want to be true for the next field to appear. Little bit different of a set up for the third field as we’ve set the condition to be true if the selection is equal to the specified color.

Once the logic’s done on Fluid Logic’s part, all we have to do is connect each condition with its field. Let’s go to the email field and connect it to the first condition by going to the conditions tab in the field settings. Let’s set the action to show: this means that the field will only show if the selected condition returns as true.

Let’s do the same for the following fields, and on refresh, we will see that the form works as intended. It’s that simple!

New
updated
Fluid Dynamic
Play Video

How to use Fluid Logic for Elementor dynamic visibility

Got A Question ?

We Are Here to Help
More Cases
Dynamify Repeaters + Fluid Logic
Use Cases

Repeaters for Elementor

  • Dynamify Repeaters
Feed widgets dynamic information from backend repeaters and then show or hide them according to the number of items thanks to Dynamify and Fluid Logic.
Fluid Dynamic
Forms Extensions + Fluid Logic
Use Cases

Elementor Forms + Gloo

  • Fluid Logic
More options for your Elementor forms thanks to forms extensions and fluid logic, together.
Forms Extensions
interactor - replacing sections use case
Interactor Use Cases

Replacing Sections

  • Interactor Engine
Replace sections with other sections entirely using the Interactor engine.
Interactor
Show or hide sections on command with Interactor
Use Cases

Elementor Sections

  • Interactor Engine
Interactor gives us multiple ways to show and hide entire sections at the click of a button.
Interactor
Interactor Dom Manipulation Use Case
Use Cases

DOM manipulation

  • Interactor Engine
Accessible frontend DOM manipulation set up from the Elementor Editor thanks to interactor.
Interactor