Advanced Form Features: Adding Toggles
When you create a form in CQ, there may be cases where you want to hide and show form elements, descriptive text, or instructions based on a user's input before they submit the form. This can be achieved by adding toggle classes to checkboxes, radio buttons, inputs and other components.
There are two required pieces for any toggle:
- The trigger >> this activates and sets the content to be displayed.
- The content >> this is shown when the trigger is activated.
The trigger and content form a unique set. Each trigger must be given a class with the global tfc-trigger and the set- prefix to its unique name. i.e. tfc-trigger set-[unique name]
Take a look at the example form below. When you select one of the options under the "Which semester are you applying for?" heading, the corresponding Text component appears. The checkbox group has been given the following class in the CSS field, which is located in the Styling tab for all form elements:
tfc-trigger set-deadline
The set name is arbitrary, but it must be unique and, ideally, should describe its collection of content items and their trigger. Each item in the checkbox group is given a unique value as well. In this example, the values are:
fall2012=Fall 2012
spring2013=Spring 2013
fall2013=Fall 2013
Each checkbox item has a corresponding Text component that is revealed when the option is selected. Within the CSS class field of the Text component, the following classes are required:
tfc-target set-[unique-name] [unique-value].
In the example below, the Text component that is to be revealed when the Fall 2012 option is checked is given the following set of CSS classes:
tfc-target set-description fall2012
For the Spring 2013 Text component, the classes to be applied are:
tfc-target set-description spring2013
You can add as many items to the set as needed, just remember that each value must be unique and must match the selection option defined in the checkbox group.
Example Toggle Form
The application deadline for FALL 2012 has passed.
The deadline for Fall 2012 applications has already passed. Please consider applying for a future semester or contact your undergraduate advisor for more information.
The application deadline for SPRING 2013 is January 1, 2012.
In order to process your application, we recommend that you submit it prior to this date. Late applications will only be considered under extenuating circumstances.
The application deadline for FALL 2013 is May 1, 2012.
In order to process your application, we recommend that you submit it prior to this date. Late applications will only be considered under extenuating circumstances.
You don't need to apply again.
Thank you for your interest. If you've applied in the past, we will have your application on file. Please contact your undergraduate supervisor to discuss your options.
Please provide us with your contact information.
Please fill out the fields below. We will contact you within 24 hours.
Applying toggles to multiple elements
A single trigger can activate multiple components. In the above form, a set of radio buttons under the "Have you applied to our program before?" heading allows the user to choose one of two options. If "Yes" is selected, they are presented with a single Text component. If "No" is selected, they are presented with a Text component as well as three Text Field components. Each of these components has the same set of classes applied to it in the CSS field of the Styling tab:
tfc-target set-prior no
Required Fields must be visible
When using triggers, be careful how you use them together with required fields. A un-filled field set as "required" will prevent the form from being submitted even though it is not visible. Only set fields to "required" if they will always be visible to the person filling out the form. If a required field is not filled and not visible when a site visitor fills out your form, neither the required field nor the error message indicating that the field must be filled out will be visible to the site visitor and they may be confused by the form not successfully submitting.