Form-Specific CSS (Custom Styles)

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

At present, this functionality is not applicable for (simple or dynamic) embedded forms.

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

form_specific_css.gif

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: " *";
}

Was this article helpful?
25 out of 25 found this helpful