Form Styling Reference

All styling options available in the form builder's Design tab.

Color options

Option	Values	Default	Effect
Primary Color	Any hex color	`#3b82f6`	Buttons, active states, focus rings, links
Text Color	Any hex color	`#1f2937`	Body text and field values
Background Color	Any hex color	`#ffffff`	Form background
Input Background	Any hex color	`#ffffff`	Background of text inputs, dropdowns, and text areas
Border Color	Any hex color	`#d1d5db`	Borders on inputs, separators, and cards

Option	Values	Default	Effect
Font Family	See built-in list below, or one of your uploaded fonts	`Inter, sans-serif`	Font used across the entire form
Base Size	Number (px)	`16`	Base font size for body text and inputs
Line Height	Number (unitless multiplier)	`1.5`	Line height for body text
Font Weight	`400` (Normal), `500` (Medium), `600` (Semibold), `700` (Bold)	`400`	Base font weight

These fonts are bundled locally and do not require an external request:

Google Fonts are currently not available. Forms that already use a Google font keep it:

If the font is in the built-in list (for example Prompt or Noto Sans), the form shows it as before.
Any other font is shown in a standard fallback font. To change this, pick a built-in font or upload your own font.

You can override styling specifically for field labels without changing the rest of the form.

Option	Values	Default	Effect
Label Font Size (toggle)	on / off	off	Enable a separate font size for labels
Label Font Size	Number (px)	Inherits from Base Size	Label-specific font size
Label Color (toggle)	on / off	off	Enable a separate color for labels
Label Color	Any hex color	Inherits from Text Color	Label-specific text color
Bold	Normal / Bold	Inherits from Font Weight	Bold or normal labels
Italic	Normal / Italic	Normal	Italic labels
Underline	None / Underline	None	Underlined labels
Icon Size (toggle)	on / off	off	Enable a separate icon size for label icons
Icon Size	Number (px)	Inherits	Label icon size
Icon Color (toggle)	on / off	off	Enable a separate color for label icons
Icon Color	Any hex color	Inherits	Label icon color

Option	Values	Default	Effect
Field Gap	Number (px)	`16`	Vertical space between fields
Padding	Number (px)	`16`	Inner padding of the form container
Maximum Width	`480`, `640`, `768`, `1024`, `1280`, `100%`, `auto`	`768`	Maximum width of the form in pixels, or full/auto
Border Radius	Number (px)	`4`	Corner rounding on inputs, cards, and buttons

The Custom CSS field accepts raw CSS that is injected into the form at render time. Use it to override any default style.

The CSS is scoped to the form container.
You can target any element using the CSS class names listed in the builder's CSS Classes panel.
Changes apply immediately in the preview.

Example:

.ef-field-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

The builder includes six ready-made themes you can apply as a starting point and then customize.

Theme	Primary color	Font	Border radius	Background
Default	`#3b82f6`	Inter	4 px	White
Minimal	`#000000`	Roboto	0 px	White
Rounded	`#8b5cf6`	Poppins	12 px	White
Classic	`#2563eb`	Source Sans Pro	4 px	Light gray (`#f3f4f6`)
Dark	`#3b82f6`	Inter	6 px	Dark (`#1f2937`)
Modern	`#06b6d4`	Montserrat	8 px	White

Selecting a theme overwrites all styling values. Any customization you make afterward is kept until you select a different theme.