Theming

Control how embedded forms look with the Appearance editor.

The Appearance editor controls how a form looks when shared or embedded. It is the recommended way to style forms because the saved theme travels with the form and is loaded automatically by the embed.

Appearance Editor

Open a form in the builder and go to Appearance.

Use this page to configure:

• Light and dark colours
• Primary brand colour
• Background and card colours
• Text and border colours
• Font choices
• Spacing and corner radius
• Maximum form width

The live preview shows how the form will look before you publish it.

Theme Mode

Theme mode controls which colour set is used.

Use Auto when the form should feel native to the respondent’s device. Use Light or Dark when the form must match a fixed website design.

Colour Presets

Presets are a fast starting point. Apply a preset, then adjust individual colours if needed.

Good uses:

• Quickly match a simple brand palette
• Create separate light and dark looks
• Test readability before publishing

After applying a preset, review required fields, errors, buttons, and long labels in the preview.

Typography

Use typography settings to match your website or brand.

Common choices:

• Use the same body font as your website
• Use a stronger heading font for multi-page forms
• Keep font sizes conservative for long operational forms

Avoid highly decorative fonts on forms used for applications, orders, support, or compliance workflows.

Layout

Layout settings control the form container rather than individual fields.

Use them to set:

• Maximum width
• Overall spacing
• Corner radius

For dense admin-style forms, a narrower width and moderate spacing usually works best. For simple customer-facing forms, a wider and more spacious layout may feel better.

Embedded Forms

Embedded forms automatically load their saved appearance settings.

You can still force a mode with the web component:

<formwork-form form-id="your-form-id" theme="light"></formwork-form>

Use this only when the host page needs to override the saved mode.

Advanced CSS Variables

Most users should use the Appearance editor. CSS variables are useful when a developer needs to fine-tune an embed inside a custom website.

Current theme variables use the --formwork- prefix.

Examples:

formwork-form {
  --formwork-light-primary: #2563eb;
  --formwork-light-bg: #ffffff;
  --formwork-light-card-bg: #f8fafc;
  --formwork-light-text-primary: #111827;
  --formwork-light-border: #d1d5db;
  --formwork-radius: 8px;
  --formwork-font-family: Inter, sans-serif;
  --formwork-max-width: 720px;
}

If your embed uses the default shadow DOM rendering, host-page CSS may not affect inner form elements directly. Prefer saved appearance settings unless you intentionally use render-mode="light".

Best Practices

• Test both light and dark modes if using Auto.
• Check contrast for buttons, errors, and helper text.
• Keep operational forms calm and readable.
• Preview long labels, repeatable groups, file uploads, and validation errors.
• Publish the form after saving appearance changes that should go live.