Appearance

Learn how to adjust the Appearance and Styling of your Form

Every form can be fully styled to match your brand. Appearance settings are found in the form builder under Settings → Appearance.

Logo

Setting	Description
Logo URL	A publicly accessible URL for your logo image (PNG or SVG recommended)
Logo scale	Size as a percentage of the default (0–200%). 100% is the default size.
Logo alignment	Left, centre, or right

The logo appears at the top of the public form page, above the form title.

Layout Mode

Mode	Description
Single page	All sections on one scrollable page
Wizard (multi-step)	One section per step, with Next / Back navigation

Use wizard mode for longer forms or when you want to reduce the sense of length and guide respondents step by step.

Colours

Each colour has a colour picker and accepts a hex code.

Setting	What it controls
Primary colour	Buttons, focus rings, links, checkbox/radio accent
Form card background	The white card area behind the fields
Page background	The area behind the form card
Title colour	The form title and section headings
Label colour	Field label text
Body text colour	Help text, paragraph text, descriptions
Input border colour	The border around text inputs, dropdowns, etc.

Input background and placeholder colours are derived automatically from the form card background colour to ensure readable contrast. You do not need to set these separately.

Typography

Setting	Description
Font family	The typeface used throughout the form. Options include common system fonts and Google Fonts such as Poppins, Inter, and Roboto.

The selected font applies to all text in the form including labels, help text, options, and the submit button.

Submit Button

Setting	Description
Submit button text	The label on the final submit button (default: "Submit")

In wizard mode, this text appears on the final step. Intermediate steps use "Next" and "Back" automatically.

Border Radius

A slider that controls how rounded the corners of inputs, buttons, and cards appear.

• 0 — Square corners

• 4–8 — Slightly rounded (professional look)

• 16+ — Pill-shaped, more casual/friendly feel

Custom CSS

You can inject your own CSS to override any style in the form. This is for advanced users comfortable with CSS.

The CSS is injected inside a <style> tag on the public form page. It applies only to this form, not to the builder UI.

Example — remove the card shadow:

.form-card { box-shadow: none; }

Custom HTML

You can add raw HTML content before or after the form. Use this for:

• A custom header or footer

• Legal disclaimers

• Tracking pixels or analytics tags

• Embedded media

HTML is injected directly into the page, so standard HTML/CSS/JS is supported.

Previewing Appearance

The canvas in the form builder updates in real time as you change appearance settings. You can also open the public form URL in another tab to see exactly what respondents will see.