Styling forms

Every form has a Style tab in the builder. Changes apply to that form only, so a compact sidebar form and a full-width contact page form can look different.

Built-in controls

• Brand colour — used for buttons, focus rings and accents
• Border radius — corner rounding, applied consistently across inputs and buttons
• Maximum width — caps how wide the form grows in a wide container
• Label position — above the field, or floating inside it
• Button style — the visual treatment of the submit button
• Typography — font sizing and weight for labels and inputs

The brand colour you set during onboarding becomes the default for new forms. Change it globally in Sense Forms → Settings.

Custom CSS

The Style tab includes a Custom CSS box for anything the controls do not cover. It applies only to that form.

Every form is wrapped in a container carrying its ID, so you can scope rules precisely:

#pf-form-3 .pf-field-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

Custom CSS is sanitised before output: < characters are stripped, and @import rules and expression() are removed. Only administrators can edit it.

Adding a class from the shortcode

For styling that depends on where a form appears rather than which form it is, pass a class through the shortcode:

[senseform id="1" class="sidebar-form"]

Then target it from your theme’s stylesheet. This lets one form look different in two locations.

CSS custom properties

The form sets several custom properties on its wrapper, which is usually the cleanest way to restyle:

Property	Controls
--pf-brand	Accent colour
--pf-radius	Base corner radius
--pf-radius-sm	Smaller radius, derived from the base
--pf-radius-lg	Larger radius, derived from the base

Overriding --pf-brand in your theme changes every accent in one line.