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 any Google Font	`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:

To use a font that is not in the built-in list:

Set Use Google Fonts to Google Fonts.
Pick a font from the searchable Google Font Name dropdown (e.g. Fira Code). Only fonts from the official Google Fonts catalog can be selected. If an older form still shows a custom name, clear it or pick a listed font to replace it.

The form will load the font directly from Google Fonts at render time.

Option	Values	Default	Effect
Use Google Fonts	Local fonts / Google Fonts	Local fonts	Where the font is loaded from
Google Font Name	Font from the Google Fonts catalog (searchable dropdown)	--	Only used when Use Google Fonts is Google Fonts

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.