FLUIDLOGIC

Conditional Logic For

Forms Field  Widget Visibility Form Actions

Fluid Logic is a complete game-changing, all-in-one solution for your logic and visibility needs.

Fluid Logic is here to change the way you define powerful.

What if visibility conditions worked according to human logic, and not computer logic? what if you could work with PHP and JS conditions at the same time, using the same tool, chaining them together seamlessly to fit your needs down to the most precise requirement?

What if form fields hid or displayed according to what was written on the previous field?

With Fluid Logic, explore a vast range of Dynamic Conditions that can be driven by our amazing Gloo Dynamic Tags to work on any Widget, Section, and Column, and the advanced logic options to relate them to one another. Moreover, enjoy a streamlined and clean UI that better lends itself to work along the thought process of the user. Needless to say. Fluid Logic does not add any hidden load when disabled.

Logic Chains for complete mastery on your Elementor web pages.

Introducing Logic Chains, a new way to work with dynamic visibility and dynamic conditions in a way that thinks exactly like you do. All the conditions you’re used to, and more, now able to be connected individually and with one another in an endless, repeater-driven fashion.

Beyond Global Logic, Fluid Logic’s many Visibility Conditions can be chained together thanks to the use of the embedded Repeater which will easily allow you to implement as many conditions for a single item as you might need. This, along with the fact that you can now name each and every condition, makes for a better, more intuitive organization of the settings panel.

The true crowning feature of Fluid Visibility is the logic you can set up between the conditions you’ve selected and created through the aforementioned repeater. You have access to the classic logic terms such as OR, AND, but the real kicker is that these will not necessarily apply to every condition you’ve set regardless of any other preference: you can now use this logic between the conditions themselves. This means, in practice, that you can set a condition to apply only if the previous one doesn’t, or does, at any time during the chain of conditions set with the repeater by using the Next Condition Operator toggle.

Overview Tutorial

Play Video

In Depth Tutorial

Play Video

PHP and JS conditions, together, to serve your visibility needs.

The fundamental difference between PHP and JS conditions is that the former happens server-side while the latter is calculated client-side. PHP conditions print the item in the DOM, while JS hides it and awaits for user input.

Fluid Logic is the only solution to daisy-chain PHP and JS conditions together, as you can allow visibility to only be available if a PHP condition is met, using a Dynamic Tag, and then show or hide the item you’re working on according to user input, using a JS condition.

Fluid Visibility‘s PHP conditions work best when paired with our great collection of Dynamic Tags, but you can use whichever source and method you’re most used to.

Fluid Logic, moreover, finally allows you to set precise conditions for items within a listing, as other solutions can only set conditions for the entire listing grid, while Fluid fetches the ID of the listed items and can operate on each of them independently. You can interrupt the chain at any time, build it once per page, save it, and re-use it on any other item within that page, without having to rebuild it multiple times. 

5/5
"What A Time Saver!"
TobiAS Salami

Conditional Logic For Form Fields to extract the most from your forms.

Hide and show precise Forms Fields according to the pre-requisite PHP condition to enable JS visibility on any single field. In practice, this means that using a Dynamic Tag you can show a text field, for example, only if the user is unregistered, and show a second field only if he writes a specific name within the first.

Paired with the range of features you can find in Forms Extensions +, Gloo‘s solution for even better Elementor forms, you can now enjoy complete mastery over your forms, and which fields show when any condition you may need is met, allowing for creative use of forms to turn them into tools to achieve any form of complex data collection or submission.

This works with Select, Checkbox, Radio fields and any text fields, with upcoming compatibility for media fields. Imagination becomes the only boundary when you’re presented with such a flexible solution.

Fluid Form Actions to control what happens, when, and how.

Not just mastery over form fields, but over Form Actions too. Integrating Fluid Logic with Form Actions Pro means you can rearrange the order at which Form After Submit Actions happen, and then specify conditions under which each and all of those actions should fire.

You can set firing conditions for each action, and specify that the next action should not fire or only fire if the previous one fails. Use a Dynamic Tag to fetch information about the user submitting the form, and only fire specific actions according to the user role or other data gathered by your selected tag.

Create, master and control complex Form Action chains that fit your needs on any given form, avoiding duplicate data submission, streamlining your form-building processes, while allowing for maximum flexibility over your usage of Form Actions.

Beyond Global Logic

No more just Global Logic, Fluid Logic’s many Visibility Conditions can be chained together and each can apply only when another does or doesn’t. Name your conditions, easily and visually keep track of them at all times, and call back to any other logic chain you’ve built on your page. A new way to think about logic-based conditions for your website.

Fluid Logic

Custom Dynamic Visibility on Steroids

Hit The Gloo icon in your elementor editor
Head over to "fluid visibility and start creating conditions
There are two types of conditions
JS Conditions (is form field?) and PHP conditions (dynamic data & tags)
Let Make a Simple Condition
if user name equal to john - we will add the field ID (in our case it will be name) - you can find the field ID in your form under the form field - Advanced.
Time to assign the condition we made in the Fluid Logic Section to a form field
Lets go to our 2nd form field - in our case that is Email. now go to the new tab "Conditions" and just assign the the Logic Chain (of Conditions) and set it to "Show"
Lets Add an image widget next to our Form
in this case we will add an image of a guy - lets imagine his name is John.
Let Apply Fluid Visibility Rules
Under the advanced tab of the widget > go to Fluid Visibility - and assign the Logic Chain - Set it To "Show"
This Is Our Form. if you type "John" you will see our Logic Chain In Action

1. Click on The Gloo Icon

Click on The Gloo Icon

2. Click on Fluid Visibility

Click on Fluid Visibility

3. Check Enable Fluid Visibility

Check Enable Fluid Visibility

4. Add New Condition

Add New Condition

5. Type "Name is John" or any other name to describe your condition

Type "Name is John" or any other name to describe your condition

6. Toggle On Form Field ID

Here we decide we want a JS condition - Meaning a condition that is based on the form field input

Toggle On Form Field ID

7. Type "name"

Type "name"

8. Click on Equal from Condition (JS)

Click on Equal from Condition (JS)

9. Under Return Value - Type "John"

Under Return Value - Type "John"

10. Click on Edit Form

Click on Edit Form

11. Click on Name

Click on Name

12. Click on ADVANCED

Click on ADVANCED

13. Type "name"

Type "name"

14. Click on Email

this is the field that we will add the visibility Logic to

Click on Email

15. Click on CONDITIONS

Click on CONDITIONS

16. Select the Action "Show" and assign the condition

Select the Action "Show" and assign the condition

17. Add A New Image widget Widget

Add A New Image widget Widget

18. Go To The Advanced Tab of that widget and - Click on Fluid Visibility

Go To The Advanced Tab of that widget and  - Click on Fluid Visibility

19. Toggle the Enable switch

Toggle the Enable switch

20. Click on Name is John from Condition Chain

Click on Name is John from Condition Chain

21. Click on Hide from Action

This is our default Image and it will hide once the name John is set on the name in the form field

Click on Hide from Action

22. Now Duplicate the image and add an image of John

Now Duplicate the image and add an image of John

23. Click on Advanced

Click on Advanced

24. Click on Fluid Visibility

Click on Fluid Visibility

25. Check Enable

Check Enable

26. Choose Your Condition Chain

Choose Your Condition Chain

27. Only this time you set it to "Show"

this is the image of john that will appear only when the name is John is typed in the name input form field

Only this time you set it to "Show"

28. Update and Test it. That's All