Custom CSS

Style the hosted form with your own CSS against a stable set of formbear-* class hooks and design tokens (Pro).

Custom CSS is edited in the Customize panel and injected on the public form page only. Like every design change it goes live on publish. To target elements reliably, use the stable API below, never the internal hashed class names (they change without notice).

The contract

formbear-* class names and data-formbear-* attributes are the stable API.
The CSS custom properties below are stable too: they are the same tokens the design knobs set.
Everything else (element nesting, DOM order) is an implementation detail and may change.

Key selectors

Target	Selector
The form panel	`.formbear-panel`
One field, by type	`.formbear-field[data-formbear-type="email"]`
Question label	`.formbear-label`
Text inputs	`.formbear-input`
An option pill	`.formbear-option`
Selected option	`.formbear-option:has(input:checked)`
Submit button	`.formbear-submit`
Thank-you screen	`.formbear-thank-you`

Overriding tokens

Override design tokens on a descendant of the page (the theme sets its values inline on .formbear-page, so a rule on .formbear-panel or deeper wins):

css

.formbear-panel {
  --action-primary-bg: #0f766e;
  --field-border: #99f6e4;
}

What gets sanitized

CSS is sanitized on save and again on render, so a form can never harm a respondent:

< and backslashes are stripped; write characters literally, not as \2014-style escapes.
@import and @charset are removed.
Any URL outside https://cdn.formbear.app/is removed wherever it appears, so respondents’ browsers never call third-party servers.
Capped at 10,000 characters.