Images and custom CSS

Add a cover, logo and other pictures, what happens to uploaded images, and how far custom CSS can go before Formwork removes it.

Cover and logo

On the Design tab, under Images, you can add a Cover and a Logo. The cover is a banner image above the form. The logo appears at the top of the form, on the closed and password screens, and on the ending screen.

Elsewhere in the builder, pictures can be attached to:

the welcome screen;
each ending;
individual options of multiple choice and checkbox questions;
image blocks between questions.

Uploading

Drop a file on the upload area or click it. JPG, PNG, WebP and GIF files up to 5 MB are accepted. Formwork re-encodes every image on the server. That confirms it really is an image, removes hidden metadata such as camera location and device details, and shrinks anything larger than 2,400 pixels on its longest side. A GIF becomes a still PNG.

The welcome screen and ending pickers offer Or start from a sample with three illustrations: Paper shapes, Success and Save for later. Choosing one copies it into your form.

Replace swaps the image and Remove clears it. Saved themes do not carry images; see The Design tab.

Note: Images added in the builder are served from a public address of the form /m/m_…. The name is random and cannot be guessed, but anyone who has the address can open the image. Do not use pictures you need to keep private.

For accessibility, write a description for image blocks in the field that says "Describe the image for screen readers". Cover and logo images are treated as decoration.

Custom CSS

Open Custom CSS at the bottom of the design panel to add styles to the published form. It is meant for small adjustments: letter spacing on the title, a different button treatment, a line under a heading.

Formwork does not paste your CSS into the page as written. It reads it, rebuilds it from an allowed set of pieces and outputs only that.

Kept	Removed
Ordinary rules with a selector and properties	`@import`
`@media`, `@supports`, `@container` and `@layer` blocks	`@font-face` and any other at-rule not listed
`@keyframes`	Anything with `url()`, `image-set()`, `attr()` or `env()`
Custom properties that start with `--`	Values that use `expression`, `behavior`, `binding` or `javascript:`

The limits are 4,000 characters, 200 rules, 400 characters per value, and nesting of at most three levels of @media and similar blocks. Comments are stripped. Because external URLs are removed, you cannot load fonts, images or scripts from another site through CSS. Use the font list, the cover and the logo instead.

The form exposes its colours and fonts as CSS variables, so a stylesheet can follow the theme instead of repeating colours. Some of them:

.fw-title { letter-spacing: -0.02em; }
.fw-btn { text-transform: uppercase; }
.fw-title { color: var(--fw-primary); }

The variables include --fw-bg, --fw-surface, --fw-text, --fw-muted, --fw-line, --fw-primary, --fw-on-primary, --fw-font, --fw-heading, --fw-r and --fw-r-btn. To find the class names for other parts of the form, open it in your browser and use the inspector; the ones the form uses start with fw-. They are not a fixed contract, so look at the form again after Formwork updates.

Custom CSS applies to the published form, its embed and the preview. It does not change the builder itself.

If a rule seems to be ignored, it was probably removed. Check for a url(), an at-rule that is not on the list, or a value with an unusual character.

Plans

A cover or logo needs a plan with full theme control. Custom CSS needs the CSS tier of the theme feature. Both are checked when you publish. See Default plan limits.

Updated Sep 30, 2026