Home / Features / Custom CSS

Developer-friendly

Pixel-perfect forms with CSS

Themes get you 80% of the way. Custom CSS handles the rest. Override fonts, colors, spacing, animations — anything the theme can't express. Save your overrides per form.

Get Started Free See Themes

form-design.css

/* Brand fonts */

@import url('https://fonts.googleapis.com/css?family=Inter:400,600,700');

.fb-form {

font-family: 'Inter', sans-serif;

--brand: #5B47FF;

}

.fb-input {

border-radius: 14px;

border: 1px solid #E3E8EE;

transition: border-color .2s;

}

.fb-input:focus {

border-color: var(--brand);

box-shadow: 0 0 0 4px rgba(91,71,255,.12);

}

Where themes stop, CSS starts

Built-in themes cover the common cases. Custom CSS unlocks the long tail — brand-specific quirks, custom typography stacks, micro-interactions, layout tweaks.

Inline editor

CSS editor lives inside form design settings. Edit, save, see changes in the live preview side by side.

Override anything

Fields, labels, buttons, error states, focus rings, transitions — everything is targetable with standard CSS selectors.

Theme + CSS workflow

Start with a theme for the heavy lifting, layer your CSS on top. Best of both worlds — quick setup, full control.

Saved per form

Each form has its own CSS. Different brands, different forms, different rules — no global side effects.

Designer + dev together

Designers tweak themes visually, developers handle the CSS edge cases. Both workflows in one form.

No build step

Save and the styles apply instantly to your live form. No deploy pipeline, no rebuild, no waiting.

Style anything on your form

Common targets — and how to think about them.

Custom fonts via @font-face or Google Fonts imports
Brand color tokens applied to inputs, focus rings, buttons
Border radius, shadows, depth treatments
Field spacing, label position, multi-column layouts
Hover and focus animations, smooth transitions
Custom error states and validation messaging
Print stylesheets for paper-form workflows
Mobile-specific overrides via media queries

FORM PREVIEW

Email address Message

Frequently asked questions

Where do I add custom CSS?

Open your form, go to Design → Custom CSS. The editor appears with syntax highlighting. Save and your styles apply to the live form immediately.

Can I import external fonts?

Yes. Use @import url(...) at the top of your custom CSS to pull in Google Fonts, Adobe Fonts, or any web-served font. The form respects the import on load.

Will custom CSS break if you update the form renderer?

We treat the form's public CSS class names as a stable API and avoid renaming them in routine updates. Major redesigns are documented in the changelog with migration notes.

Can I override theme styles, or are themes locked in?

You can override anything. Custom CSS loads after theme styles, so your rules win in the cascade. No `!important` needed for most cases.

Is custom CSS available on the free plan?

Custom CSS is included on paid plans. The free plan supports the full theme system; check pricing for the exact tier.

Can I share my CSS across multiple forms?

Each form has its own CSS today. For shared styles across many forms, copy and paste the snippet — or save it to your team's notes/snippets system.

Style your forms exactly how you want

Pick a theme, layer your CSS, ship a form that looks like nothing else.

Get Started Free