The Form-Specific CSS (Custom Styles) tool allows you to adjust the display of form or page elements using CSS, such as:

• Stylizing all form field labels

• Appending asterisks to all required form fields

Configuring the CSS

1. Navigate to the form/event/interview

2. Click Edit Form

3. Click Edit Scripts/Styles, and then click the Custom Styles tab

4. Enter the desired valid CSS, and then click Save

Constraining Styling to the Form/Event/Interview

To prevent the custom style/CSS from affecting other objects on the rendered page, you can begin your rule set with an additional CSS 'id' selector that targets the specific form (using the form's GUID, which is the 32-character string in its URL). For instance, a form tag will always have a particular id in this pattern form_afefd9d9-c8d9-450e-bcfa-dbc88d574b7b_container (i.e. form_**GUID**_container). You can then limit the CSS rules to elements of just that form by changing the code from:

.form_question[data-required="1"] .form_label::after {
  color: red;
  content: " *";
}

to:

#form_afefd9d9-c8d9-450e-bcfa-dbc88d574b7b_container .form_question[data-required="1"] .form_label::after {
color: red;
content: " *";
}

Note that the 'afefd9d9-c8d9-450e-bcfa-dbc88d574b7b' string in this case is the form's GUID.

If you are applying CSS at the template level, you can modify the CSS to not contain a specific form GUID by combining 2 complex CSS selectors like this:

form[id^="form_"][id$="_container"] .form_question[data-required="1"] .form_label::after {
color: red;
content: " *";
}

Example CSS

Stylizing All Form Field Labels

The following code will bold and italicize all form field labels:

.form_label {
  font-weight: bold;
  font-style: italic;
}

Stylizing Required Form Fields

The following code will append a red asterisk (*) to the end of all required field's labels:

.form_question[data-required="1"] .form_label::after {
  color: red;
  content: " *";
}