When creating a form in Forms Manager, you may want to hide certain form elements from the user until the user makes a particular selection on another, visible element. This technique is known as conditional formatting, which is a built-in feature of 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 will 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 that specifies shirt size can be made conditional, so that it will not appear unless the user 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.
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.
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 that 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.
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.
When the user views the form on a web page, 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 that appear very straightforward when first viewed, but expand to suit any necessary level of complexity.
Other conditional settings
In addition to question-based conditional settings, options are also available for date- and admin-based conditional settings. These are also located in the Element Properties window.
For date-based conditional settings, the field you apply it to will only be available if the person fills out the form within a date range you specify. This feature is useful for an early-bird discount to an event, for example.
Admin-only conditional fields, as the name suggests, will only appear if the form is being filled out by an admin user.