When creating a form in Forms Manager, you may want to hide certain form elements from the user until and unless the user makes a particular selection on another, visible element. This technique is known as conditional formatting, and the ability to implement it is built into Forms Manager. This article will explain when to use conditional formatting and how to implement it on a form.
Consider a registration form for a summer conference event. Participants who sign up for the conference online may elect to receive either a coffee mug or a t-shirt. Those who decide on a t-shirt might be asked what size shirt they would like to receive, whereas those who want a coffee mug don't need to select a size. In this case, the field in the form which specifies shirt size can be made conditional, so that it will not appear unless the user specifically chooses to receive a t-shirt. Let's look at how we would create such a form in Forms Manager.
In this section of the form, we have placed two radio button elements: one for participants to select which gift they'd like to receive, and another to select t-shirt size, if applicable. Note that the "Select Free Gift" element has a green border, while the "T-shirt Size" element has a blue border. The blue border indicates that the "T-Shirt Size" element has conditional formatting applied. (Conversely, the green border indicates that the "Select Free Gift" element has an associated, dependent conditional element.) We will look next at the Element Properties for the "T-Shirt Size" element to examine how to configure conditional formatting; open the Element Properties window by clicking the pencil icon when hovering over the element in Forms Manager.
At the bottom of the Element Properties window is the "Conditional Settings" section. This section will appear in the properties for any element on a form once a selection element (i.e., radio buttons, checkboxes or a select list) has been added to that form. Any selection element can serve as criteria for conditional formatting.
To turn on conditional formatting for the "T-shirt Size" element, open the Element Properties window, and scroll down to select the "Only display this question when..." checkbox. Click on the next dropdown menu and click on "Select Free Gift" - this is the condition which must be set (to either "coffee mug" or "t-shirt") in order to trigger the "T-shirt size" selection. Use the checkboxes below to indicate that when the answer to "Select Free Gift" is set to "T-shirt," the "T-shirt Size" element will be displayed. The dropdown menu will automatically be populated with any radio button, checkbox or select list which has already been placed on the form - be sure to choose the correct selection element when establishing the conditions used to make the conditional element appear.
When the user views the form on a webpage, the "T-shirt size" element will be hidden from the user unless and until the user selects "T-shirt" as the answer to "Select Free Gift."
Note that it is also possible to nest conditional fields one inside another. By setting one selection element to be conditional upon another selection element, which itself is conditional upon yet another selection element, etc., etc., you can create multi-layered forms which appear very straightforward when first viewed, but expand to suit any necessary level of complexity.