Show/Hide elements

In either global forms or individual forms, you can make specific elements show/hide based on conditional rules.

 

Situation for usage example:

If you’re selling plain shirts, you may add a ‘Customize my shirt’ tick box. When customers check the box, a text input field appears letting customers enter their wanted text content to be printed on their shirt. This is better than displaying the options all the time because it keeps the page uncluttered for customers who don’t require them

 

Basically, this advanced function has 4 properties:

  1. Enable: This option is to enable/disable all options below it.
  2. Display: Show/Hide the selected element based on the rules configured below this selection.
  3. Relation: Choose the relation for the rules below, this option is important especially when you have many rules.
  4. Rule: A basic rule will include:
    • Element: Select the target Element for the rule. The target CAN NOT be: Section, Divider, Heading
    • Operator: Particular types to run the rule along with the value. The operator changes dynamically based on the target Element.
    • Value: Target Element value, this field also changes dynamically based on the target Element and the Operator.

 

To demonstrate the example above, the advanced rule settings could be as followings: Make the field “Add your text here” show when the field “Print text on your shirt” has the value “Yes” (this field is checked box, which means when the option “Yes” is checked). Otherwise the field “Add your text here” will be hidden.