Layout, steps and pickers

Choose which steps customers see, how they are laid out, and how times are shown.

The Layout tab decides what a customer walks through — which steps appear, in what order, and how the form is furnished around them. Open Booked › Customisation › Booking Form, press Edit on a form, then click Layout. Nothing here reaches your live site until you press Save form.

Choose which steps customers see

The Steps & order card holds the three choosing steps: Location ("Which branch"), Service ("What they're booking") and Team member ("Who they see"). Arrows reorder them, switches drop the ones you don't need. Date & time and Your details are always last and cannot be moved or removed.

• 1Move up / Move down — reorders the three choosing steps. The running summary lists rows in this same order.
• 2Always on — the Service step has no switch. It can be moved, never removed.
• 3Team member switch — off means staff are assigned automatically. Same setting as Let customers choose staff lower down the card.
• 4Service picking — Category then service adds a "What are you booking?" step first: worth it once your menu is long, but with a handful of services that extra click costs you bookings. Single list drops that step and shows every service in one list under category headings.
• 5Show a map on the location step — greyed out until Show location step is on. It embeds a map under each branch, built from the address you entered under Locations.

Booked also drops steps on its own when there is only one sensible answer: the location step disappears when only one branch can take the booking, and the category step when only one category has bookable services — even though both settings still read as on. The team step is the exception. It still appears when only one person can do the job, showing "Any available" plus that one name; switch Let customers choose staff off to skip it.

Staff names set to First only shows "Priya" rather than "Priya Sharma" on the team step and in the summary — friendlier for a salon, less so for a clinic. The map is a third-party embed, so check it against your cookie policy first.

Structure: progress, rails and the summary

The Structure card holds the form's furniture — the step indicator, where the steps sit, the running summary, how options are drawn, which date picker customers get, heading alignment, spacing and width.

• 1Progress — Dots, Pills and Numbers draw a step indicator. Bar replaces it with a slim bar reading "Step 3 of 6" plus the step's name. None hides it. Completed steps stay clickable.
• 2Steps position and Rail style — Left rail moves the steps and the running summary into a left column. Rail style only appears once Left rail is picked: Grey block tints it, Dark block paints it with your Text colour.
• 3Summary — the live receipt of what has been chosen. Side, Top or Hidden. Rows follow your step order and end with a Total once a service is chosen, plus Deposit due today where one applies.
• 4Date picker — five ways of showing your availability. See the table below.
• 5Max width — caps the widget between 560px and 1200px in 20px steps; it centres inside whatever container it sits in.

Options is the sleeper here: a single bordered list is far faster to scan once you offer more than about six services. Hiding the summary shortens the form but removes the reassurance of seeing the branch, the service, the duration and the total sitting there before confirming — hide it only on very short flows. On a phone the left rail collapses above the content, so check both previews.

The five date and time pickers

Whatever you pick, the times are real availability and only free slots are ever shown — the form never reveals who is booked. Most styles group a day's times into Morning, Afternoon and Evening; Next free is the exception and lists each day's times in one run. Times print in 24-hour or 12-hour form per Settings Region & currency › Time format.

For services with group bookings, "How many people?" comes before the date and time — a party of three needs a longer appointment, so availability can only be worked out once the number is known.

What the customer ends up with

The same form on the front end, with Left rail, a side summary and Cards options.

• 1The step rail — completed steps are ticked and clickable, and a Back button sits on every step except the first.
• 2The running summary — inside the rail, because Steps position is Left rail. Before anything is chosen it reads "Your appointment details will appear here as you go."
• 3Options as cards — "Any available" is always first on the team step. Switch Options to List and these become one divided list.

What quietly overrides your layout choices

These are the usual reasons a setting "won't stick".

• Hero card forms ignore most of this tab. The summary is hidden, the template is Panel, density is Compact, the picker is Week, options are a List, and the width is capped at 460px — because the type exists to fit a narrow column.
• Short form forms ignore even more — progress, summary, date-picker style, density, heading alignment and max width all do nothing. They follow only your colours, fonts, shapes and Service picking.
• The Simple template is capped at 640px however far you drag Max width.
• Switching the template back to Classic does not undo what Panel or Simple changed — Frame, Summary, Progress and Options stay where they were put, along with the 640px width and 14px corner radius Simple sets. Put them back by hand, or use Reset to default.
• Applying a preset rebuilds the whole Structure card from that preset's own defaults — progress, summary, options, date picker, density and width all move. Your Steps & order choices survive. Pick the preset first, then do the structure work.

Preview, then save

1. Watch the live previewThe right-hand pane renders the real widget with your real services. Switch between Desktop and Mobile — most people book on a phone.
2. Click all the way through itIt never creates a booking; it ends on a confirmation showing the reference "GB-PREVIEW", and no email is sent.
3. Press Save formNothing auto-saves; leaving the screen loses every change. Reset to default only resets the editor — the live form is untouched until you save.