Booking Form

A form for taking booking requests — a consultation, a site visit, a design session.

The shopper picks a service, fills in their details, and agrees to your privacy policy. A summary panel beside the form shows what they chose and what it costs, updating as they choose.

The button stays disabled until they tick consent, so you never collect details without permission.

Try it

←Booking form

Color scheme

Eyebrow

Short kicker text rendered above the heading in smaller, uppercase type.

Heading

Subheading

Deposit note

Optional fine print shown under the fee in the booking summary — for example, whether the fee is credited against the project.

Trust points

Reply within one working day Fee credited against your engagement

Short reassurance lines shown in the booking summary. Enter one per line.

←Service

Service handle

The value sent with the booking to identify this service — often the product handle, e.g. kitchen-design-service. Not shown to customers.

Service name

Deposit amount

Whole numbers in your store currency — 195 shows as €195. The customer sees it in the booking summary once the service is chosen.

Storefront preview

Booking

Book your consultation

A structured first conversation — brief, budget, scope and timeline agreed honestly.

Select a service

Service *Choose a serviceKitchen designFull project managementHeritage property restoration

Your details

Full name *Email address *Phone number

Preferred date

Preferred dateAdditional notes

Your consent

I agree to the Privacy Policy

Booking summary

Selected serviceNo service selected

Deposit amount

—

Your consultation fee is credited in full against any engagement commissioned within six months.

• Reply within one working day
• Fee credited against your engagement

Pick a service to watch the summary fill in, then tick consent to enable the button — that's the real storefront behaviour, not a mock.

How it works

The form is grouped into four short steps — service, details, preferred date, consent — each under its own heading. Beside it sits a booking summary: the service they picked, the fee, your note about the fee, and a couple of reassurance lines.

The summary is filled in before any code runs, so it never flashes blank. Before a service is chosen it reads "No service selected" and shows a dash instead of a price.

Composition

On a desktop the form and the summary sit side by side, and the summary follows the shopper down the page as they scroll. On a phone everything is one column, and the summary sits just above the button:

Desktop                          Phone
┌──────────────┬───────────┐     ┌──────────────┐
│ Service      │  Summary  │     │ Service      │
│ Details      │  (sticky) │     │ Details      │
│ Date         │  [Button] │     │ Date         │
│ Consent      │           │     │ Consent      │
└──────────────┴───────────┘     │ Summary      │
                                 │ [Button]     │
                                 └──────────────┘

Where bookings go

This is the one setting you must fill in. The form sends each request to the Form action URL you give it — the endpoint from your booking, CRM, or form app.

If you leave it empty the form reloads the page and the request is lost. Paste the URL before you go live, and send yourself a test booking to confirm it arrives.

Section settings

Setting	What it does
Color scheme	Colors the whole section — one scheme, so text stays legible on the background.
Eyebrow	A short label above the heading, e.g. "Booking".
Heading	The main title, e.g. "Book your consultation".
Subheading	A line under the heading setting expectations for the first conversation.
Form action URL	Required. Where booking requests are sent. Empty means requests are lost.
Deposit note	Fine print under the fee — e.g. that the fee comes off the project price.
Trust points	Short reassurance lines in the summary. One per line.
Related article	Optional. Links a blog post under the heading — the link hides itself if the post doesn't exist.

Services

Each service is a block. Add one per thing a customer can book; they become the dropdown options.

Setting	What it does
Service handle	The value sent with the booking to identify the service. Not shown to customers.
Service name	What the customer reads in the dropdown, e.g. "Kitchen design".
Deposit amount	Whole numbers in your store currency — 195 shows as €195. Shown in the summary once selected.

Type the fee as a plain whole number. 195 — not 19500, and not 195.00.

If you add no services at all, the dropdown says there are none available, so add at least one before going live.

Consent

The tick box links to your store's privacy policy and gates the button: until it's ticked, the button can't be pressed. This is deliberate — it keeps the form honest about collecting personal details, and it's what EU shoppers expect.

Responsive & accessibility

• The summary follows on desktop, sits inline on a phone — it never covers the form.
• The fee never flashes blank — a dash is shown until a service is chosen.
• Tap targets are at least 44 px — the consent row and the button.
• Underlined fields with a clear focus seam — keyboard users always see where they are, and the outline survives high-contrast mode.
• Respects reduced motion — the focus seam appears without animating.
• Right-to-left ready — flows correctly in Arabic, Hebrew, Persian, and Urdu.
• Screen readers — required fields are announced, and errors are read out from a live region.

Tips

• Name services the way a customer would say them out loud, not the way your invoices do.
• Use the Deposit note to answer the question every enquiry asks: "do I lose this fee if I go ahead?"
• Keep Trust points to two short promises you can actually keep — a reply time and what the fee buys.
• Set the same fee across similar services; a dropdown where every option is a different price invites hesitation.
• Send yourself a test booking after changing the Form action URL.