Customize your form

Themes, colours, fonts, logo, cover and layout.

Open Customize from the editor top bar (or from the hover row above the form title). Everything you change applies instantly to the editor canvas, the Preview and the published form, and every option is saved with the form's version history so you can roll back a design.

Theme

Choose Light for the default white theme or Custom to pick your own colours. Custom exposes Background, Text, Button background, Button text and Accent. The accent colour is used for links, selected options and focused inputs. Colours accept any hex value; the picker also shows the contrast of button text on the button background so you do not ship an unreadable button.

Font

Pick a font family from the list (Inter is the default). The choice is applied to every text block, question title and input in the respondent view through the --fl-font CSS variable, so custom CSS can build on it.

Logo and cover

Add a logo and a cover image from the hover row above the form title. Upload an image or paste a URL; the cover can be repositioned vertically by dragging. Logo width, height and corner radius and the cover height live in the Advanced section of Customize.

Advanced options

The Advanced section is free on every plan. Layout: page width and base font size, logo size and radius, cover height. Inputs: fixed width, height, background, placeholder colour, border colour and width, corner radius, margin below and horizontal padding. Buttons: fixed width, height, alignment, font size, corner radius, background, vertical margin and horizontal padding. On the free plan you can open the section to see the options; changing one shows the upgrade prompt and the value is not saved.

Where the values go

Every option is stored in the form document's theme and rendered as CSS variables on the .fl-form root: --fl-bg, --fl-text, --fl-accent, --fl-btn-bg, --fl-btn-text, --fl-input-bg, --fl-input-border, --fl-font, --fl-font-size and --fl-page-width among others. Embeds inherit the same theme; the Standard embed can additionally use a transparent background and hide the title from its own options.

Going further

If the built-in options are not enough, Custom CSS (Solo and above) lets you target the renderer's classes directly. See Add custom styles.

Still stuck? Contact support.