Your own booking form

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.

<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>

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.

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.

If your form already posts somewhere else, remove that, or both will run.

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.

Get started

Website chat

Bookings

Context API

Channels

Box names

When they press the button

React

​Box names

​When they press the button

​React

Box names

When they press the button

React