Make it match your brand

Colours, light and dark, and the universal palette shared by every form.

Your booking form should look like it was built by whoever built your website. Booked gives you seven colours, a shared palette every form can follow, and a live preview so you see the result first.

The seven colours, and what each one paints

The palette is seven values. Every other shade — hover states, the tint behind a selected service, the focus ring — is worked out from those seven automatically. One thing catches people out: the same settings carry short names in the Universal colour scheme card and longer ones in a form's Style tab.

Each field opens a picker with a saturation pad, hue and opacity sliders and a hex box. It accepts 3, 6 or 8-digit hex plus rgb() and rgba(); anything else falls back to the default. In a form's Style tab only Page background carries a None button — in the shared palette card, every field has one.

Set the shared palette once

Go to Booked › Customisation › Booking Form. The first card is the Universal colour scheme — one palette shared by every form set to follow it, so a rebrand is one edit.

• 1The seven fields — click a swatch to open the picker, or type a hex code into the box. Every field here also carries a None button; read the warning below before you press one.
• 2Live preview — a miniature card with a heading, two services and the button. It repaints as you type, so you can judge contrast before saving.
• 3Save colours — saves the palette and nothing else.

Which forms follow the shared palette

Below the palette card sits Your booking forms: a Default form — rendered by the plain [get_booked] shortcode — plus any extra forms ("variants") you have added, each independently styled with its own shortcode. Each variant row also has Duplicate and Delete; a duplicate copies every setting but gets a new id, so it gets a new shortcode too.

• 1Default form — always shows the Inline pill and the bare [get_booked] code.
• 2Custom colours — this pill marks any variant taken off the shared palette; no pill means it follows the universal scheme.

Give one form its own colours

Open a variant with Edit. Above the tabs sits a panel with the variant name and a Colours switch reading Universal or Custom. Choose Custom and the form stops following the shared palette — its colours now come from its own Style tab. Switch back and the preview re-tints straight away.

• 1Save form — nothing auto-saves. Leave this screen without pressing it and the edits are gone.
• 2Colours: Universal or Custom — decides whether this form follows the shared palette. The helper line below tells you which way round you are.
• 3Style › Colours — the same seven values under longer names, plus the tip about dark forms. On Universal, the shared palette wins here.
• 4Live preview — the real widget with your real services, in Desktop or Mobile. It never books; clicking to the end shows GB-PREVIEW.

Presets change the shape, not the palette

The Presets tab's Start from a preset grid holds nine complete looks — Aurora, The Room, Straight Up, Soft Landing, Cool Serif, Sage, Plum, Ultrasound Plus and Minimal — each setting fonts, corners, borders, shadow and density in one click.

While a form is on Universal, a preset deliberately does not touch your colours: the shared palette is laid straight back over it. Click Plum expecting a wine-coloured form and only the shape and typography change. Put the form on Custom first and the preset brings its own colours with it.

It does reset the rest of the Style tab, and the whole Structure card on the Layout tab — progress, summary, options, date picker, density and max width all go back to that preset's own values. Your step order and the toggles in Steps & order survive, as do the Convert and Code tabs.

Above the preset grid, Template offers Classic, Panel and Simple. Panel and Simple each switch several structure settings at once; going back to Classic does not undo them, so reapply those controls yourself or use Reset to default.

Making a dark form

There is no light/dark switch. A dark form is built by hand from the same seven colours, and it works properly because every derived shade recalculates from what you set.

1. Set Card background darkThe surface your service cards, fields and summary sit on — something like #12202C.
2. Decide what sits behind itLeave Page background on None and your own dark page shows through. If the form sits on a light page, set this dark too — that is what the built-in tip means by "page + card".
3. Set Text light and Muted to a mid greyMuted still has to be readable against the card.
4. Lift the Border colourThe pale default border vanishes on a dark card; around #2A3B47 keeps edges visible.

Making it disappear into your site

The aim is that nobody can tell where your page stops and the form starts. Four settings do most of that work:

• Page background left transparent, which is what the None button sets — the default, so your page's own colour or image shows through.
• Frame (in Style › Shape & depth) on None. Panel paints the Page background behind the widget with padding — right for a form meant to read as a distinct card.
• Corner radius, Border width and Shadow matched to your theme's cards — flat, square panels mean radius 0 and shadow None.
• Body font, Heading font and Base text size in Style › Typography. That size slider scales the whole widget at once.

Seventeen of the twenty-two font choices are Google Fonts: pick one and every page carrying the form fetches it from Google. If your site must avoid third-party requests, choose System, Grotesk, Serif, Rounded or Mono — these use fonts already on the visitor's device and load nothing.

For anything colour cannot fix, the Code tab has a Custom CSS box. Keep every rule tightly targeted: it is not scoped to the widget, so a broad rule leaks into the theme page around it — and into the Booked admin screen while you edit, since the preview loads the same CSS.

Saving: two buttons, two jobs

Save colours saves the universal palette; Save form saves the form you are editing. Neither saves the other, and nothing saves itself — so editing the palette and walking straight into a form to check the result loses the palette edit. Reset to default only resets the editor: your live form is unchanged until you press Save form.