> ## Documentation Index
> Fetch the complete documentation index at: https://docs.usefrictionless.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Your own booking form

> Keep your form exactly as designed and send its bookings to Frictionless.

Add `data-frictionless-booking` to the `<form>`, give each box the right `name`, and load the script. Leave the times box empty: the script fills it with your free times, grouped by day, and keeps your first option as the placeholder.

```html theme={null}
<form data-frictionless-booking="YOUR_WORKSPACE_ID">
  <input name="name" placeholder="Full name" required>
  <input name="phone" type="tel" placeholder="Phone number" required>
  <select name="department" required>
    <option value="">Select department</option>
    <option>Cardiology</option>
    <option>Paediatrics</option>
  </select>
  <select name="start" required>
    <option value="">Preferred date</option>
  </select>
  <button>Request appointment</button>

  <div data-frictionless-success hidden>
    Thank you. We'll see you on <span data-frictionless-when></span>.
  </div>
</form>
<script async src="https://usefrictionless.com/widget/book.js"></script>
```

<Tip>
  The Calendar page writes this form for you from your booking form, with every box name and dropdown choice filled in: **Put it on your website → Your own form**.
</Tip>

## Box names

| Name | What goes in it |
| - | - |
| `name` | Their name. Always needed. |
| `phone` | A number your team can call or WhatsApp. Always needed. Local numbers like `0803 123 4567` are fine. |
| `email` | Optional, required or ignored, as your booking form says. When given, they get a confirmation with a calendar invite. |
| `note` | "Anything we should know?", when the note box is on. |
| Each question's name | Shown on the Calendar page, like `department` or `reason_for_visit`. Renaming a question keeps its name, so your form keeps working. |
| `start` | A `<select>` the script fills with free times. Prefer separate boxes? Use `<select name="day">` and `<select name="time">` instead, and the times follow the day picked. |

Answers are checked against your booking form:

* **Dropdown:** the value must be one of your choices. Capital letters don't matter.
* **Yes / No:** `Yes` or `No`, from a dropdown, radio buttons or a checkbox with `value="Yes"`.
* **Date:** `YYYY-MM-DD`, which is what `<input type="date">` sends.
* Boxes with other names are ignored.

## When they press the button

* Your `required` attributes are checked first, by the browser. Then the script sends the form to Frictionless instead of submitting it.
* **Booked:** anything inside the form marked `data-frictionless-success` is shown, with `data-frictionless-when` filled in (for example "Thu 8 Oct at 9:00am"), and everything else in the form is hidden. Without one, the form is replaced by a short "You're booked" line.
* **A problem with one box**, such as a department left empty, shows on that box as the browser's own message. Anything else shows in an element marked `data-frictionless-error`, or in a line added under the form.
* **Someone took the time a moment ago:** the times are refreshed and they're asked to pick another.

<Warning>
  If your form already posts somewhere else, remove that, or both will run.
</Warning>

## React

Your own form works in React too, controlled or not, as long as each box has a `name`. Render the times box with no options, `<select name="start" required />`, so React leaves the times the script adds alone.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.