CM Registration (CMREG) - How To - Hide or Display Fields Dynamically (Conditional Logic)
Hiding or Displaying Fields Dynamically (Conditional Logic)
What Is This Feature
Starting from version 2.8.0, it's possible to hide or display fields based on certain conditions.
Use Case ExampleThe registering user can choose between "Free User" or "Premium User"
- Choosing "Free User" displays the fields
- Choosing "Premium User" displays the fields
- Premium Plan
You can add one logical condition to either a required field or an optional field.
In both cases, the first option will hide the desired fields and the second option will display all. If there are three or more options, they will also display all fields.
Using This Feature
You must add certain tags to the CSS class of the relevant fields.
First, edit the fields that will affect the conditions:
- Optional fields - add hide_show_optional to the CSS class. Note: don't make affected fields Required!
- Required fields - add hide_show_required to the CSS class
Then, edit the CSS class of the fields that will be affected.
- Affected fields - add hide to the CSS class
Use Case Example - Part 2Using the example from above,
- Field User Type (Free User/Premium User) - is an optional field, so you should add to the CSS class hide_show_optional
- Email - Will always appear, so the CSS class won't change
- Password - Will always appear, so the CSS class won't change
- Referral - Should be affected by the condition, so add hide to the CSS class
- Premium Plan - Should be affected by the condition, so add hide to the CSS class