Custom CSS

If you're a third-party design partner to style your website, great news — the new CMS Forms module fully supports custom CSS styling! While the form's HTML structure cannot be modified, you can easily apply consistent design using a linked stylesheet.

What You Can CustomizeLink to this section

Forms are rendered using standardized markup and Bootstrap 5 styles, making it easy to style them to match your website. You can:

• Change fonts, colors, spacing, and button styles
• Adjust input field appearance
• Style grouped or read-only elements
• Support responsive layouts
• Override or extend the default form design
  Important: You cannot modify the HTML structure of forms. Styling must be applied via CSS.

CSS Starter FileLink to this section

To help you get started, we've created a CSS starter file that includes recommended selectors, structure, and tips for targeting form elements using data-el attributes.
Download the starter file:
Forms CSS Starter File (Modern Campus)
This file includes:

• Targeting examples for input types, groups, labels, and error messages
• Use of data-el attributes for stable selector targeting
• Bootstrap-friendly defaults

How to Apply the CSSLink to this section

You can apply your custom styles globally to all forms in Forms > Settings, or apply the CSS to individual forms. In either case you will need to host your CSS file in your institution’s design folder or public web space. Then add the stylesheet URL to the form settings in the CMS. Forms apply your custom styles only on the published/live form view. 

Tips for SuccessLink to this section

• Use specific selectors to override default Bootstrap styles cleanly.
• Don’t rely on form HTML — treat the structure as fixed.
• Test live: Preview your form to confirm styles are applying correctly.
• Avoid !important unless absolutely necessary — use specificity instead.
• Consult the starter file for structure guidance and selector patterns.