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!
