V4 Extentions Conditional Display Estimated reading: 5 minutes 7 views Show or hide a form field based on what the visitor already filled in. Ask only the questions that matter. No code needed. WORKS ON AAE Form fields USE IT TO Show or hide PLAN Pro BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free ANIMATION ADDONS PRO Active license Tip: Install and activate both Animation Addons plugins before you start. The Form widget comes with the free plugin. STEP 1 Enable the Extension Turn on the extension from your dashboard. You only need to do this once. From your WordPress Dashboard, go to Animation Addon > Extensions. Open the Elementor V4 (Atomic) tab, then click Form. Under Form Extensions, turn on Conditional Display. Click Save Settings. Conditional Display Extension (click to zoom) STEP 2 Open Conditional Display Add a Form to your page. Then pick the field you want to show or hide. Open your page with the Elementor Editor. Select a field inside your form, for example the Message field. In the General tab, open the Settings section. Click the small button next to Conditional Display. Conditional Display in the Settings section (click to zoom) Note: You can use Conditional Display on form fields, on a Flexbox or Div Block inside the form, and on Heading and Paragraph elements. STEP 3 Create a Rule A rule says: show (or hide) this field when another field has a certain value. Choose Show this field when… or Hide this field when…. Under Field, pick the field to check, for example Email. Choose an Operator, for example Is not empty. Type a Value if the operator needs one. Click Save Conditions, then Update your page. The Conditional Display dialog (click to zoom) A finished rule: show the Message field when Email is not empty (click to zoom) Tip: Need more than one rule? Click + Add Rule. To turn conditions off, delete all rules and save. SETTINGS Dialog Options Action Default: ShowChoose Show this field when… or Hide this field when…. Match Default: All rules matchAll rules match means every rule must be true. Any rule matches means one true rule is enough. Field The field to check. The list shows every field in the same form. Operator Default: IsHow to compare the field. See the list below. Value What to compare with. Not needed for Is empty and Is not empty. + Add Rule Add another rule. Use Match to decide how the rules work together. Operators Is The field value is exactly the same as your value. Is not The field value is not the same as your value. Is not empty The visitor typed or chose something. Is empty The visitor left the field blank. Contains The field value has your text inside it. Upper and lower case do not matter. Greater than The field value is a number bigger than your value. Less than The field value is a number smaller than your value. The operator list (click to zoom) Note: For checkboxes and multi-select fields, Is is true when your value is one of the selected options. RESULT Final Result The Message field only shows after the visitor fills in Email. Before: Email is empty Email is empty, so the Message field is hidden (click to zoom) After: Email is filled Email is filled, so the Message field appears (click to zoom) GOOD TO KNOW How It Works Hidden fields are skipped A hidden field is never required and its value is not sent with the form. Checked again on the server The same rules run again when the form is submitted, so a hidden field cannot be sent by editing the page. Hide a whole row Add a rule to a Flexbox or Div Block. When it is hidden, every field inside is hidden too. Editor view Inside the Elementor editor all fields stay visible, so you can still style them. Rules work on the live page. HELP Troubleshooting I do not see Conditional Display Check that the extension is on. Go to Animation Addon > Extensions > Elementor V4 (Atomic) > Form and turn on Conditional Display. Pro must be active. Then reload the editor. The dialog says the field is not inside an AAE Form Conditions need a form to watch. Put the field inside the Form element, then open the dialog again. The Field list is empty The list shows the other fields in the same form. Add the field you want to check first, then open Conditional Display again. My rule does not work on the live page Update the page and clear your cache. Pro must be active. If you changed the ID of the field you check, open the rule and choose the field again. You Did It Your form now changes with the visitor’s answers. If you face any problem, please contact our support team. We are happy to help.
