Overview

Most Toolbox components in the Form Designer support a custom CSS class field in their Layout tab. Adding a class to a component lets you target it precisely with CSS rules — so you can style one specific checkbox group, one particular text input, or one HTML block differently from everything else on the form.

The class name you enter becomes an HTML class on the rendered component's wrapper element, which you then target in your CSS. The CSS itself can live either in the form template's Custom CSS field (affecting only that form) or in the Default survey CSS in Edit settings (affecting all forms across your tenant).

‍

Add a custom class to a component

‍Advanced mode required: The Layout tab — where the custom CSS class field lives — is only visible when the Form Designer is in Advanced mode. Switch to Advanced mode using the toggle at the top of the template editor before editing a field's layout settings.

‍

1. Open the form template and go to the Form Designer in Advanced mode.
2. Click Edit on the component you want to target.
3. Click the Layout tab.
4. In the Add custom CSS class to question field, type your class name — for example, fancy-checkbox or highlighted-input. Use lowercase letters and hyphens, no spaces.
5. Click OK, then click Save.

‍Naming convention: Use short, descriptive class names with no spaces — hyphens are the standard separator. Make the name specific enough to be meaningful but not so specific that it can't be reused. highlight-box is more useful than question-three-box. The same class name can be applied to multiple components, so you can style a group of similar elements consistently.

‍

Write the CSS to target your class

Once the class is assigned to a component, you write CSS rules that target it. Prefix the class selector with #surveyWrapper to keep the styles scoped to the form interface.

/* Example: style a component with the class "highlight-box" */

#surveyWrapper .highlight-box {
  background-color: #f0f8ff;
  border: 2px solid #0052cc;
  border-radius: 8px;
  padding: 20px;
}

/* Example: style the label inside a component with the class "large-label" */

#surveyWrapper .large-label .col-form-label {
  font-size: 1.25rem;
  font-weight: 700;
  color: #032d60;
}

‍

Where to put the CSS

You have two options depending on whether the styling should apply to one form or all forms:

‍

If a class is specific to one form's design, keep the CSS in the template. If it defines a reusable component style that you'll apply across many forms — like a standard info box or a highlighted disclaimer — put it in the Default survey CSS so it's available everywhere.

‍

Which components support a custom CSS class

‍

‍The Layout tab also controls address pre-population: You may have noticed the custom CSS class field is described as "also used for address pre-population" in the Form Designer. When setting up address lookup fields, the class name is what links individual Single Input fields to the address autocomplete logic. If you're working with address fields, make sure any class name you add for styling doesn't conflict with one already in use for address pre-population.

‍

Custom CSS classes give you surgical control over individual components — style exactly what you need without touching everything else. Keep class names consistent and meaningful, decide upfront whether the CSS belongs at the form or global level, and test in Test Form before publishing.

‍