Theming with CSS

Most teams should style forms in Appearance, which needs no code and also styles the hosted form link. Use this page when the page you embed the form in needs to control its look in code.

What wins

The embedded form works out each value in this order:

1. The theme attribute on <formwork-form> sets the mode, overriding the mode saved in Appearance.
2. --formwork-* variables set on the <formwork-form> element override the saved values.
3. Values saved in Appearance for the form version apply next.
4. Built-in defaults fill in anything else.

Appearance is part of the form version, so a draft and the published form can look different until you publish. See Drafts and publishing.

Choose light or dark

<formwork-form form-id="FORM_ID" theme="dark"></formwork-form>

Any other value is treated as auto. You can change the attribute at any time and the form updates.

Colour variables

Each colour has a light and a dark version. Replace {mode} with light or dark, for example --formwork-dark-primary.

Hover and tinted versions of the primary and error colours are worked out from these, so you don’t set them separately.

Layout and type variables

These apply in both modes.

Fonts set with these variables must be loaded by your page. FormWork only loads the Google Fonts you choose in Appearance.

Example

<style>
  #support-form {
    --formwork-light-primary: #0f766e;
    --formwork-dark-primary: #2dd4bf;
    --formwork-light-bg: #f8fafc;
    --formwork-light-text-primary: #0f172a;
    --formwork-light-border: #cbd5e1;
    --formwork-radius: 4px;
    --formwork-font-family: Inter, sans-serif;
    --formwork-max-width: 720px;
  }
</style>

<formwork-form id="support-form" form-id="FORM_ID"></formwork-form>
<script src="https://app.useformwork.com/static/client.js" type="module"></script>

Set the variables on the <formwork-form> element itself or on an ancestor. Setting a light value has no effect while the form is in dark mode, so set both versions of a colour if visitors can see either mode.

Shadow DOM and light DOM

By default the form renders inside a shadow root. CSS variables cross into it, but your page’s other selectors don’t, so site styles can’t break the form and you can’t restyle individual controls.

Set render-mode="light" only when the form must be part of the page’s normal DOM. The form still brings its own stylesheet, but broad selectors on your page can now affect it, so test carefully.

<formwork-form form-id="FORM_ID" render-mode="light"></formwork-form>

Class names and the internal structure of the form are not a supported interface and may change. Style through the variables above.

Troubleshooting