Conditional Fields for Elementor Form – Display Conditions

Deskripzioa

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.

Check Live Preview

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.

Pantaila-argazkiak

  • Conditional Form Fields Elementor Pro forms Previews.
    1. Conditional Form Fields Elementor Pro forms configuration steps.

Instalazioa

  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 Enable Conditionals switch, you’ll have additional options to apply conditions.

Display Mode:

  • Show / Hide The default mode is set to “Show.” In this mode, the field remains hidden until the condition is met. Once the condition is satisfied, the field becomes visible. Alternatively, the “Hide” option functions oppositely to “Show” by hiding the field until the condition is met.

Step 5:

Conditional Trigger The default value is set to “all (AND)”, allowing you to use multiple conditions with the relation of the AND operator.

Step 6:

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, such as “is equal” (==) or “is not equal” (!=). You can also use the greater than (>) and less than (<) operators.

Value to Compare: Enter the value you want to use for comparison. For example, input “email” in the email field and “phone number” in the phone number field.

Step 7:

Save or Update the Page and See the result

Berrikuspenak

2024(e)ko martxoaren 18(a)
This plugin is so long overdue, over the years I've seen many others that are over complicated and difficult to use, this is lightweight, powerful and anyone can use it. Thank you.
2024(e)ko martxoaren 12(a)
It seems to be working great! One field type you can support is the Acceptable field and checking whether it is checked.
2024(e)ko martxoaren 8(a)
Simple and efficent! Support ready to solve issues and on the road on improving and implementing new feautures! Thank you for your help
2024(e)ko martxoaren 20(a) 3 replies
Update to review: After posting the review, the plugin was updated within a few days to remedy the issues below. Changed from 3 to 5 stars.It's a great plugin, one which has been needed for a very long time - the reason as to why Elementor doesn't have this built-in is beyond me - but a great plugin. I've encountered one issue upon installation where the Form Settings Panel was blank. I had to refresh a couple of times and the settings came up. It also doesn't give the File Upload choice the condition logic which is a bit annoying - hopefully it'll be implemented in a future update.
2024(e)ko martxoaren 2(a)
I searched the whole internet for this. Most Elementor Add Ons you have to pay for don't have it, but Cool Plugins did it. It's super easy and directly integrated in the Elementor interface and form. Thanks a lot! Great Jobs, Guys!
2024(e)ko otsailaren 22(a)
Exactly where we were looking for, it's a shame Elementor hasn't implemented this themselves. Thank you for adding this without costs.
Irakurri 11 berrikuspenak

Laguntzaileak eta Garatzaileak

“Conditional Fields for Elementor Form – Display Conditions” software librea da. Ondoko pertsonek egin dizkiote ekarpenak plugin honi.

Laguntzaileak

Conditional Fields for Elementor Form – Display Conditions 2 eskualde-ezarpenetara itzuli da. Eskerrik asko itzultzaileei beraien ekarpenengatik.

Itzul zaitez Conditional Fields for Elementor Form – Display Conditions zure hizkuntzara.

Garapena interesatzen zaizu?

Araka kodea, begiratu SVN biltegia edo harpidetu garapen erregistrora RSS bidez.

Aldaketen loga

Version 1.2.2 | Mar 27, 2024

  • Fixed:- Multiple checkbox field conflict issue.
  • Optimization:- Bug fixes and code improvements.

Version 1.2.1 | Mar 18, 2024

  • Added:- Conditions for Acceptance field support added.
  • Optimization:- Bug fixes and code improvements.

Version 1.2.0 | Mar 5, 2024

  • Added:- Integrated conditional field support for File Upload fields, enhancing form customization.
  • Added:- Multiple field conditions with the All (AND) operator.
  • Added:- Greater than (>) and less than (<) operators.
  • Added:- Show and Hide options for form fields based on conditions.
  • Added:- Dynamic tags for easier usage without copy and paste (No Navigator required).

  • Fixed:- Correctly sends a value to the form even if the condition is required and hidden.

  • Fixed:- Navigator Issue.
  • Fixed:- Default value sent to the form when the form field is hidden.

  • Optimization:- Bug fixes and code improvements.

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