Skip to main content

Form Styling

Set workspace-wide styling defaults for your forms. New forms start with these defaults.

What you can configure​

  • Theme presets -- pick a starting point for your form look. Presets include light, dark, and custom themes so you can get started quickly.
  • Layout -- spacing between fields, inner spacing, maximum width, rounded corners. These are your workspace-wide defaults for spacing, font size, and border radius.
  • Colors -- primary color, text, background, input background, borders.
  • Fonts -- choose between a local font or a Google Font. Pick a font from the Google Fonts dropdown (e.g. Inter or Roboto) when using Google Fonts.
  • Field labels -- font size, color, icon size, icon color, weight, style, and decoration.
  • CSS classes overview and custom CSS -- for advanced customization.

Fonts in detail​

  • Pick local fonts or Google Fonts as your font source.
  • When using Google Fonts, pick a font from the searchable dropdown (e.g. Inter or Roboto). Only fonts from the official Google Fonts catalog can be selected.
  • Switching back to local restores the default local font.

Custom fonts​

Upload your own WOFF2 brand fonts and reference them in any form's Style panel.

Upload a font​

  1. In Form Styling, scroll to Custom fonts.
  2. Pick a .woff2 file. Only WOFF2 is supported, maximum 500 KB per file.
  3. Enter the Family name (e.g. Acme Sans). This is the name your forms will reference.
  4. Pick the Weight (100 to 900). Upload Regular (400) and Bold (700) as separate files if you need both.
  5. Pick the Style (Normal, Italic, or Oblique).
  6. Confirm the licence checkbox. You must hold a valid web-font licence for the file -- Eventyflow stores the confirmation with the upload.
  7. If the file is a variable font (one WOFF2 that exposes a weight axis), enable Variable font -- a single upload then covers weights 100 – 900 for that style. Keep it off for static WOFF2 files that contain one fixed weight.
  8. Click Upload font. The file is stored on cdn.eventyflow.io and attached to your workspace.

You can upload multiple weights and styles for the same family so forms can switch between them. For static WOFF2 files that means one upload per weight; a variable font replaces those with a single upload for the whole axis.

Use the font on a form​

  1. Open the form builder for the form you want to restyle.
  2. Open the Styling panel.
  3. In the Font Family dropdown your uploaded fonts appear at the top under Custom fonts.
  4. Pick your family. Save the form.

The form renderer loads the font from cdn.eventyflow.io and applies it to every field. Browsers that download the file for the first time show the fallback font briefly, then swap to your brand font once it is ready.

Delete a font​

  1. In Custom fonts, find the font in the Uploaded fonts list.
  2. Click the delete button on the row and confirm.

Forms that still reference the deleted font fall back to your default form font automatically.

Good to know​

  • You must hold a valid web-font licence -- the licence confirmation records who confirmed the upload and when.
  • Font files are served over HTTPS from Eventyflow's CDN. Your form visitors never see a third-party request.
  • Changing your brand fonts later is safe: upload a new version with the same family name and weight, then delete the old one.

How defaults apply​

  • Every new form starts with these workspace defaults.
  • In the Form Builder, click Apply Team Styling to apply your workspace styling values to the form. If the workspace default uses a custom font family, that custom font is applied to the form with the matching uploaded font files.
  • After applying defaults, you can still adjust individual settings per form.