Contact
Contact Booking
A booking form — the service and the person as radio cards, the people following the service, then date, time and details — beside a sticky panel of points.
Layout and motion from the KorDent template — see it in contextTry it in the page builderBlocks come with Pro and Ultimate
Preview every block now, in any theme and at any width. The source, the install command and your registry token come with a Pro or Ultimate plan.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label / title / lead | string | — | The heading block; an empty label or lead is left out. |
| as | "h1" | "h2" | "h2" | h1 when the block opens the page. |
| pointsTitle / points | string / { title, text }[] | 4 points | The panel beside the form, sticky 50px from the top from 1024px. [] leaves it out. |
| services | { value, title, text }[] | 4 services | Step 1's radio cards (required), sent as service. |
| people | { value, name, text, photo?, services? }[] | 3 people | The second group of cards, sent as person: only those whose services include the chosen one (all before a choice, and those with no services always). |
| service | string | — | A service page: the form holds this service (its value) only, already chosen. |
| preferences | string[] | ["Call", "WhatsApp", "Email"] | How to confirm: a native select, the first chosen. [] leaves it out. |
| onSubmit | (data: FormData) => Promise<void> | void | — | Sends the booking (service, person, date, time, name, phone, email, preference, notes); throw to show the error state. Without it the form pretends to send. |
| labels | object | — | Every step, field and button state. |
| className | string | — | Classes for the <section>. |
- The people follow the chosen service; a person who does not give the newly chosen one is no longer chosen. Each card is the whole label of a native radio, so the arrow keys move through a group; its disc fills with the primary colour in 0.2s (none with reduced motion).
- Service, date, time, name, phone and e-mail are required (KorDent's Framer form required nothing). A booking empties the fields and the choices; the button shows sending, thank-you and error (status-button).
- Dropped from KorDent: its teal, white cards and Mist lines, and the appear on scroll.
