FormWork FormWork

FormWork documentation

Appearance

Style a form with saved colour, typography, spacing, and theme settings.

The Appearance editor saves presentation with the form version. Its live preview updates as you change controls, and normal shares and embeds load the saved result automatically.

Start quickly

  1. Choose Auto, Force Light, or Force Dark.
  2. Apply a colour preset.
  3. Pick body and heading fonts.
  4. Choose a rounding preset and maximum width.
  5. Simulate light and dark devices in the preview.

Changes save automatically after a short delay. The status shows Saving…, Saved, or an error.

Theme mode strategy

ModeResult
AutoFollows the respondent’s browser/system preference
Force LightAlways uses the saved light colours
Force DarkAlways uses the saved dark colours

The preview simulation—System, Prefers Light, or Prefers Dark—changes only the test environment. It does not change the saved strategy.

Presets

Colour presets are Default Blue, Navy Blue, Professional Green, Creative Purple, Modern Slate, Warm Orange, Energetic Yellow, and Fresh Teal.

Rounding presets are:

  • Fully Rounded — 16 px controls, 50% repeater buttons
  • Standard Rounded — 8 px controls, 50% repeater buttons
  • Small Rounded — 4 px controls, 50% repeater buttons
  • No Rounding — 0 px controls and 0% repeater buttons

A preset changes the relevant controls but does not lock them. Fine-tune anything afterwards.

Every colour control

Each colour has independent Light and Dark values, editable with a picker or hex input:

  • Primary
  • Background
  • Card Background
  • Primary, Secondary, and Tertiary Text
  • Border and Border Light
  • Error and Error Background

Check buttons, helper text, disabled controls, borders, and error messages in both modes—not just the empty form.

Layout controls

  • Spacing in pixels
  • Border Radius in pixels
  • Repeater Buttons Radius as a percentage
  • Max Width in pixels

The default values are 8 px spacing, 8 px radius, 50% repeater radius, and 680 px maximum width.

Font choices

Body and Heading fonts are selected independently. Both offer Default System; Georgia, Times New Roman, and Courier New; plus these Google Fonts:

  • Sans-serif: Inter, Roboto, DM Sans, Manrope, Plus Jakarta Sans, Montserrat, Poppins, Raleway, Quicksand, Open Sans, Lato, Nunito, Work Sans, Source Sans 3, Ubuntu, Arimo
  • Serif: Merriweather, Lora, Playfair Display, Roboto Slab, PT Serif, Crimson Text
  • Display/headings: Oswald, Bebas Neue, Anton

Selected Google Fonts are loaded by the public client. Consider page performance and character coverage when choosing them.

Reset to default

Reset to default asks for confirmation, removes saved custom theme variables for this version, and restores Auto mode. It is not an undo button for one property.

Version and embed behaviour

Appearance belongs to the form version. A draft preview uses the draft’s saved theme; the public link uses the published version’s theme. Publishing moves the complete draft appearance live with the rest of the version.

An embed can override the mode with theme="light|dark|auto" and developers can override individual variables. Precedence is:

  1. Explicit theme attribute for mode
  2. CSS variables supplied by the host embed
  3. Variables saved on the form version
  4. FormWork defaults

For the variable reference and light/shadow DOM details, see Advanced Theming.