04 — Customization · Themes

Theme it once, ship it everywhere.

The Form Builder's Design tab maps every visual control to a CSS variable on the rendered widget. Change a value, see it live, save when you're happy.

Available variables

These are the variables the widget reads. You set them in the Design tab; they're exposed here so you understand exactly what's being controlled.

.fp-form {
  /* Colors */
  --fp-color-primary:    #7c5cff;   /* buttons, focus rings, active states */
  --fp-color-text:       #14110a;   /* labels and input text */
  --fp-color-muted:      #6b6558;   /* placeholders, helper text */
  --fp-color-bg:         #ffffff;   /* form background */
  --fp-color-input-bg:   #f5f5f7;   /* input field background */
  --fp-color-border:     #e3e3e8;   /* input borders */
  --fp-color-error:      #d63b3b;   /* validation errors */
  --fp-color-success:    #1aa362;   /* success state */

  /* Typography */
  --fp-font:             system-ui, -apple-system, sans-serif;
  --fp-font-size:        16px;

  /* Shape */
  --fp-radius:           8px;
  --fp-radius-button:    8px;
  --fp-spacing:          14px;

  /* Buttons */
  --fp-btn-bg:           var(--fp-color-primary);
  --fp-btn-color:        #ffffff;
  --fp-btn-padding:      12px 22px;
}

Pasting a starter palette

Common starting points for the Design tab. Pick one, tweak the primary colour, ship.

Soft & modern

--fp-color-primary: #5b6cff;
--fp-color-bg: #ffffff;
--fp-color-input-bg: #f7f8fc;
--fp-color-border: #e6e8f0;
--fp-radius: 12px;

Warm editorial

--fp-color-primary: #c7491f;
--fp-color-bg: #faf6ef;
--fp-color-input-bg: #f3ecdc;
--fp-color-border: #d8ceb5;
--fp-radius: 4px;

Dark mode

--fp-color-primary: #c8ff3e;
--fp-color-text: #ede8dd;
--fp-color-bg: #0b0d10;
--fp-color-input-bg: #15191f;
--fp-color-border: #20262e;
--fp-radius: 8px;

Want to go further?

When the variables aren't enough, drop down to Custom CSS on a per-field basis.