---
title: "Form-Specific CSS (Custom Styles)"
slug: "form-specific-css-custom-styles"
updated: 2026-03-09T22:50:45Z
published: 2026-03-09T22:50:45Z
canonical: "knowledge.technolutions.net/form-specific-css-custom-styles"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://knowledge.technolutions.net/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

## 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](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/360035186472.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/360035186472.png)

## 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:

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

to:

```css
#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:

```css
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:

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

[![](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/360035241792.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/360035241792.png)

## Stylizing Required Form Fields

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

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

[![](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/360035241752.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/360035241752.png)