Conditional Fields for Elementor Form – Display Conditions

Description

How to add conditional logic inside Elementor form to display or hide some form fields?

Conditional Fields for Elementor Form is an addon for Elementor that will help you to dynamically show form fields based on conditional input value inside other form fields.

  • Basically, it follows the “If condition” logic. For example, if condition A is true, then field XYZ will be visible if not the remains are hidden inside the Elementor form.

NOTE: This addon is only compatible with Elementor Pro version because the form widget is not available in Elementor free.

Features

  • User-Friendly Interface: Enjoy an intuitive and easy-to-use interface, ensuring a smooth experience for both beginners and experienced users.
  • Conditional Form Fields: Empower your Elementor forms with the ability to respond dynamically to user input conditions. Customize the visibility of fields based on the logic you define.
  • Supported Field Types: Apply logic to Text, Email, Tel, Radio, Checkboxes, Select, Date, Time, URL, HTML, and Number form field types.
  • Comprehensive Logic: Show fields when conditions are met.
  • No Validation Errors: Submit the form seamlessly even when required fields are hidden.

Screenshots

  • Conditional Fields for Elementor Form plugin preview.

Installation

  1. Search “Conditional Fields for Elementor Form” inside your website wp-admin dashboard >> Plugins >> Add New and install Conditional Fields for Elementor Form plugin by Cool Plugins. You can also install the plugin by uploading a plugin-zip unzipped folder to the /wp-content/plugins directory. You must install the Elementor PRO plugin if you want to use this plugin’s features.

  2. Activate the plugin through Plugins >> Installed Plugin menu inside your wp-admin dashboard.

  3. To start using the plugin, edit a page using Elementor, add a form, and apply conditions to form fields via the conditional tab.

How it works?

Step 1:-

Install necessary plugins: This plugin serves as an add-on for the Elementor Pro plugin. To use it, you must first install and activate the “Elementor Pro” plugin and then add this addon.

Step 2:-

Once you’ve installed this plugin, edit a page with Elementor, and insert a form.

Step 3:-

Choose the field you wish to show based on specific conditions. For example, if you want to show fields based on a person’s login selection either email or phone number then, select the login with the field, click on the “Conditions” tab, and enable the “Conditional Logic” switch.

Step 4:-

After enabling the Conditional Logic switch, you’ll have additional options to apply conditions.

Display Mode:

  • Show:- By default the show Mode is available. The field will remain hidden until the condition is met, and when the condition is satisfied, the field will be displayed.

Step 5:-

Field ID: Enter the ID of the field against which you want to compare the value for the condition (e.g., the ID of the login with the radio field).

Operator: Select the condition you want to apply to the field (e.g., equal to “==” or not equal to (“!=”)).

Value to Compare: Enter the value you want to use for comparison (e.g., email in the email field and phone number for the phone number field).

Step 6:-

Save or Update the Page and See the result

Reviews

February 22, 2024
Exactly where we were looking for, it's a shame Elementor hasn't implemented this themselves. Thank you for adding this without costs.
February 17, 2024
Lightweight, exactly as described. Would love to see the "multiple conditions" feature get added. Thanks for a great plugin
January 16, 2024
At last we have a free plugin that adds conditionality to Elementor forms, in a simple and intuitive way. It does what it says, and it does it good. Thank you!
January 11, 2024 1 reply
I've used other dynamic conditional logic plugins for my forms on previous projects, but they were bloated. I was pleasantly surprised by this 'lightweight' plugin. It did an excellent job for my latest project. My forms look much nicer, allowing me to hide fields and make the form less intimidating while users navigate through it. It only shows them fields based on their selections. There are some features I like in the other bloated plugin. So, if possible, consider a 'low-cost' Pro version with these features. I would switch to it for my other projects, especially for features such as limiting input length, restricting input to characters, integers, sets, etc. Another valuable feature is 'Tool Tips'; I use this frequently as it helps explain the field to the user, providing guidance on what is expected. Anyway, this is a great plugin as it is. Suggestion: As an old software quality engineer, I've reviewed the code of this plugin. While the code does meet the requirements for creating conditional logic based on user inputs, I've noticed areas where errors can be introduced by others who may, from time to time, need to maintain this code. To reduce the risk of error insertion and to make your code more elegant, modular, and improve readability and maintainability, consider refactoring both "class-create-conditional-fields.php" and "chef_loginc_frontend.js." ChatGPT is your refactoring friend, as it can refactor code in just seconds. Try it if you don't have an IDE with refactoring functionality.
Read all 6 reviews

Contributors & Developers

“Conditional Fields for Elementor Form – Display Conditions” is open source software. The following people have contributed to this plugin.

Contributors

“Conditional Fields for Elementor Form – Display Conditions” has been translated into 2 locales. Thank you to the translators for their contributions.

Translate “Conditional Fields for Elementor Form – Display Conditions” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

Version 1.1.0 | Jan 24, 2024

  • Added:- Integrated conditional field support on HTML fields for more versatile form customization.
  • Added:- Implemented a review notice for valuable user feedback.

  • Fixed:- Now correctly sends a value to the form even if the condition is active but no selection is made in the ID field.

  • Fixed:- Ensured proper creation of JSON objects when any condition is ON, preventing the creation of empty JSON objects.
  • Fixed:- Fixed code to trigger change, ensuring it works seamlessly without relying on focus change from the field.
  • Fixed:- Improved functionality by trimming values, preventing comparison issues related to spaces.
  • Optimization:- Removed unnecessary AI-generated text.

Version 1.0.1 | Jan 9, 2024

  • Minor Textual Changes

Version 1.0.0 | Jan 3, 2024

  • Initial Release