Booking form template

A free appointment request form with service, preferred date and time of day. Copy the HTML, CSS and JS, or use it in React, Next.js, Vue, Svelte or Astro.

Create your form for free Copy the code

Free to use. Updated Oct 29, 2026

Live preview

Try it. The preview checks the fields like the real form, but nothing is sent.

Copy the booking form code

Pick your stack. Styled code matches the preview, with the fields, text, theme and color you set above. Unstyled code has the same fields as bare markup that picks up your own CSS, like Tailwind.

booking-form.html

1<form id="nf-booking-form" class="nf-form" action="https://api.nisuform.com/s/YOUR_FORM_KEY" method="POST">
2  <style>
3#nf-booking-form {
4  --nf-accent: #e60058;
5  --nf-on-accent: #ffffff;
6  --nf-text: #171717;
7  --nf-muted: #525252;
8  --nf-field: #f5f5f5;
9  --nf-field-text: #171717;
10  --nf-placeholder: #6b6b6b;
11  --nf-control: #8a8a8a;
12  --nf-error: #b91c1c;
13  color-scheme: light;
14  box-sizing: border-box;
15  width: 100%;
16  max-width: 480px;
17  margin: 0;
18  padding: 28px;
19  border: 1px solid rgba(0, 0, 0, 0.08);
20  border-radius: 16px;
21  background: linear-gradient(180deg, #ffffff, #ffffff);
22  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.12);
23  color: var(--nf-text);
24  font: inherit;
25  font-size: 16px;
26  line-height: 1.5;
27  text-align: left;
28}
29#nf-booking-form *, #nf-booking-form *::before, #nf-booking-form *::after { box-sizing: border-box; }
30#nf-booking-form [hidden] { display: none !important; }
31#nf-booking-form .nf-title { margin: 0; font-size: 1.25em; font-weight: 650; line-height: 1.25; letter-spacing: -0.01em; color: var(--nf-text); }
32#nf-booking-form .nf-desc { margin: 6px 0 0; font-size: 0.9375em; color: var(--nf-muted); }
33#nf-booking-form .nf-fields { display: grid; gap: 18px; margin-top: 22px; }
34#nf-booking-form .nf-head + .nf-fields { margin-top: 22px; }
35#nf-booking-form > .nf-fields:first-child { margin-top: 0; }
36#nf-booking-form .nf-field { margin: 0; padding: 0; border: 0; min-width: 0; }
37#nf-booking-form .nf-label { display: block; margin: 0 0 6px; padding: 0; font-size: 0.875em; font-weight: 600; color: var(--nf-text); }
38#nf-booking-form .nf-req { color: var(--nf-muted); font-weight: 400; }
39#nf-booking-form .nf-help { margin: 6px 0 0; font-size: 0.8125em; color: var(--nf-muted); }
40#nf-booking-form .nf-input { display: block; width: 100%; margin: 0; padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; background: var(--nf-field); color: var(--nf-field-text); font: inherit; font-size: 1em; line-height: 1.4; outline: 2px solid transparent; outline-offset: 1px; transition: border-color 150ms, box-shadow 150ms; }
41#nf-booking-form input.nf-input, #nf-booking-form select.nf-input { height: 2.75em; padding-top: 0; padding-bottom: 0; }
42#nf-booking-form textarea.nf-input { min-height: 112px; padding-top: 10px; padding-bottom: 10px; resize: vertical; }
43#nf-booking-form .nf-input::placeholder { color: var(--nf-placeholder); opacity: 1; }
44#nf-booking-form .nf-input:hover { border-color: color-mix(in srgb, var(--nf-text) 14%, transparent); }
45#nf-booking-form .nf-input:focus { border-color: var(--nf-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nf-accent) 24%, transparent); }
46#nf-booking-form .nf-input:user-invalid { border-color: var(--nf-error); }
47#nf-booking-form .nf-input:user-invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--nf-error) 24%, transparent); }
48#nf-booking-form .nf-input:-webkit-autofill { -webkit-text-fill-color: var(--nf-field-text); caret-color: var(--nf-field-text); box-shadow: inset 0 0 0 100px var(--nf-field); }
49#nf-booking-form .nf-input:-webkit-autofill:focus { box-shadow: inset 0 0 0 100px var(--nf-field), 0 0 0 3px color-mix(in srgb, var(--nf-accent) 24%, transparent); }
50#nf-booking-form input[type="number"].nf-input { -moz-appearance: textfield; appearance: textfield; }
51#nf-booking-form input[type="number"].nf-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
52#nf-booking-form input[type="number"].nf-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
53#nf-booking-form input[type="date"].nf-input { min-width: 0; text-align: left; }
54#nf-booking-form input[type="date"].nf-input::-webkit-date-and-time-value { text-align: left; }
55#nf-booking-form input[type="date"].nf-input.nf-empty:not(:focus) { color: var(--nf-placeholder); }
56#nf-booking-form input[type="date"].nf-input::-webkit-calendar-picker-indicator { margin: 0; padding: 4px; border-radius: 6px; opacity: 0.55; cursor: pointer; transition: opacity 150ms; }
57#nf-booking-form input[type="date"].nf-input::-webkit-calendar-picker-indicator:hover { opacity: 1; }
58#nf-booking-form select.nf-input { -webkit-appearance: none; appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23525252%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206l6%20-6%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px; cursor: pointer; }
59#nf-booking-form select.nf-input:has(option[value=""]:checked) { color: var(--nf-placeholder); }
60#nf-booking-form select.nf-input option { color: var(--nf-field-text); }
61#nf-booking-form .nf-options { display: grid; gap: 8px; }
62#nf-booking-form .nf-option { display: flex; align-items: center; gap: 10px; min-height: 2.75em; margin: 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--nf-text) 14%, transparent); border-radius: 10px; background: transparent; color: var(--nf-text); font-size: 0.9375em; line-height: 1.4; cursor: pointer; transition: border-color 150ms, background-color 150ms; }
63#nf-booking-form .nf-option:hover { border-color: color-mix(in srgb, var(--nf-text) 28%, transparent); }
64#nf-booking-form .nf-option:has(input:checked) { border-color: var(--nf-accent); background: color-mix(in srgb, var(--nf-accent) 8%, transparent); }
65#nf-booking-form .nf-option span { min-width: 0; overflow-wrap: anywhere; }
66#nf-booking-form .nf-option input { -webkit-appearance: none; appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--nf-control); border-radius: 50%; background: transparent; outline: 2px solid transparent; cursor: pointer; transition: border-color 150ms, box-shadow 150ms; }
67#nf-booking-form .nf-option input:checked { border-color: var(--nf-accent); background: radial-gradient(circle, var(--nf-on-accent) 0 3px, var(--nf-accent) 3.5px); }
68#nf-booking-form .nf-option input:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--nf-accent) 24%, transparent); }
69#nf-booking-form .nf-check { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 0.9375em; line-height: 1.5; color: var(--nf-text); cursor: pointer; }
70#nf-booking-form .nf-check input { -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border: 1.5px solid var(--nf-control); border-radius: 6px; background: var(--nf-field) center / 14px 14px no-repeat; outline: 2px solid transparent; cursor: pointer; transition: background-color 150ms, border-color 150ms, box-shadow 150ms; }
71#nf-booking-form .nf-check input:checked { border-color: var(--nf-accent); background-color: var(--nf-accent); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%223.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012l5%205l10%20-10%22%2F%3E%3C%2Fsvg%3E"); }
72#nf-booking-form .nf-check input:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--nf-accent) 24%, transparent); }
73#nf-booking-form .nf-check input:user-invalid { border-color: var(--nf-error); }
74#nf-booking-form .nf-rating { display: flex; flex-wrap: wrap; margin: 0 0 0 -4px; }
75#nf-booking-form .nf-rating label { display: inline-flex; padding: 4px; border-radius: 8px; color: var(--nf-control); color: color-mix(in srgb, var(--nf-control) 45%, transparent); cursor: pointer; transition: color 150ms; }
76#nf-booking-form .nf-rating svg { width: 30px; height: 30px; fill: currentColor; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; transition: transform 150ms; }
77#nf-booking-form .nf-rating input:checked + label, #nf-booking-form .nf-rating label:has(~ input:checked) { color: var(--nf-accent); }
78#nf-booking-form .nf-rating:hover input + label { color: var(--nf-control); color: color-mix(in srgb, var(--nf-control) 45%, transparent); }
79#nf-booking-form .nf-rating:hover label:hover, #nf-booking-form .nf-rating:hover label:has(~ label:hover) { color: var(--nf-accent); }
80#nf-booking-form .nf-rating label:active svg { transform: scale(0.88); }
81#nf-booking-form .nf-rating input:focus-visible + label { outline: 2px solid var(--nf-accent); outline-offset: 0; }
82#nf-booking-form .nf-file { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 112px; padding: 16px; border: 1.5px dashed var(--nf-control); border-color: color-mix(in srgb, var(--nf-control) 55%, transparent); border-radius: 10px; background: var(--nf-field); color: var(--nf-muted); text-align: center; transition: border-color 150ms, background-color 150ms, box-shadow 150ms; }
83#nf-booking-form .nf-file-input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
84#nf-booking-form .nf-file svg { width: 22px; height: 22px; margin-bottom: 4px; }
85#nf-booking-form .nf-file-text { margin: 0; max-width: 100%; font-size: 0.875em; overflow-wrap: anywhere; }
86#nf-booking-form .nf-file-cta { font-weight: 600; color: var(--nf-text); }
87#nf-booking-form .nf-file-types { margin: 0; font-size: 0.75em; color: var(--nf-placeholder); }
88#nf-booking-form .nf-file:hover { border-color: var(--nf-control); }
89#nf-booking-form .nf-file:focus-within { border-color: var(--nf-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nf-accent) 24%, transparent); }
90#nf-booking-form .nf-file.nf-file-over { border-color: var(--nf-accent); background: color-mix(in srgb, var(--nf-accent) 8%, var(--nf-field)); }
91#nf-booking-form .nf-file.nf-file-chosen { border-style: solid; border-color: var(--nf-accent); }
92#nf-booking-form .nf-file.nf-file-chosen .nf-file-text { font-weight: 600; color: var(--nf-text); }
93#nf-booking-form .nf-file:has(.nf-file-input:user-invalid) { border-color: var(--nf-error); }
94#nf-booking-form .nf-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
95#nf-booking-form .nf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
96#nf-booking-form .nf-captcha { margin-top: 18px; }
97#nf-booking-form .nf-submit { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin: 22px 0 0; padding: 10px 18px; border: 0; border-radius: 10px; background: var(--nf-accent); color: var(--nf-on-accent); font: inherit; font-size: 1em; font-weight: 600; cursor: pointer; transition: filter 150ms, transform 150ms; }
98#nf-booking-form .nf-submit:hover { filter: brightness(0.94); }
99#nf-booking-form .nf-submit:active { transform: scale(0.98); }
100#nf-booking-form .nf-submit:focus-visible { outline: 2px solid var(--nf-accent); outline-offset: 3px; }
101#nf-booking-form .nf-submit:disabled { opacity: 0.6; cursor: default; }
102#nf-booking-form .nf-error { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--nf-error) 10%, transparent); font-size: 0.875em; color: var(--nf-error); }
103#nf-booking-form.nf-sent { display: flex; flex-direction: column; justify-content: center; min-height: min(var(--nf-height, 0px), 440px); }
104#nf-booking-form .nf-success { display: flex; flex-direction: column; align-items: center; padding: 20px 0; text-align: center; outline: none; }
105#nf-booking-form .nf-success-icon { display: flex; flex: none; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 0 20px; border-radius: 50%; background: var(--nf-accent); color: var(--nf-on-accent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--nf-accent) 12%, transparent); }
106#nf-booking-form .nf-success-icon svg { display: block; width: 28px; height: 28px; margin: 0; stroke-dasharray: 1; }
107#nf-booking-form .nf-success-title { margin: 0; max-width: 24em; font-size: 1.125em; font-weight: 650; line-height: 1.35; letter-spacing: -0.01em; color: var(--nf-text); text-wrap: balance; overflow-wrap: anywhere; }
108#nf-booking-form .nf-success-text { margin: 0; max-width: 30em; font-size: 0.9375em; line-height: 1.5; color: var(--nf-text); text-wrap: pretty; overflow-wrap: anywhere; }
109#nf-booking-form .nf-success-title + .nf-success-text { margin-top: 6px; color: var(--nf-muted); }
110#nf-booking-form.nf-sent .nf-success { animation: nf-success-in 400ms cubic-bezier(0.16, 1, 0.3, 1) both; }
111#nf-booking-form.nf-sent .nf-success-icon { animation: nf-success-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
112#nf-booking-form.nf-sent .nf-success-icon path { animation: nf-success-draw 360ms 160ms cubic-bezier(0.65, 0, 0.35, 1) both; }
113@keyframes nf-success-in { from { opacity: 0; transform: translateY(6px); } }
114@keyframes nf-success-pop { from { transform: scale(0.6); } }
115@keyframes nf-success-draw { from { stroke-dashoffset: 1; } }
116@media (prefers-reduced-motion: reduce) { #nf-booking-form * { transition: none !important; animation: none !important; } }
117  </style>
118  <div class="nf-head">
119    <h2 class="nf-title">Book an appointment</h2>
120    <p class="nf-desc">Pick a day that suits you and we’ll confirm the exact time.</p>
121  </div>
122  <div class="nf-fields">
123    <div class="nf-field">
124      <label class="nf-label" for="nf-booking-form-name">Name<span class="nf-req" aria-hidden="true"> *</span></label>
125      <input class="nf-input" id="nf-booking-form-name" name="name" type="text" autocomplete="name" placeholder="Jane Smith" required>
126    </div>
127    <div class="nf-field">
128      <label class="nf-label" for="nf-booking-form-email">Email<span class="nf-req" aria-hidden="true"> *</span></label>
129      <input class="nf-input" id="nf-booking-form-email" name="email" type="email" autocomplete="email" placeholder="jane@example.com" required>
130    </div>
131    <div class="nf-field">
132      <label class="nf-label" for="nf-booking-form-phone">Phone<span class="nf-req" aria-hidden="true"> *</span></label>
133      <input class="nf-input" id="nf-booking-form-phone" name="phone" type="tel" autocomplete="tel" placeholder="+1 555 0100" required>
134    </div>
135    <div class="nf-field">
136      <label class="nf-label" for="nf-booking-form-service">Service<span class="nf-req" aria-hidden="true"> *</span></label>
137      <select class="nf-input" id="nf-booking-form-service" name="service" required>
138        <option value="">Choose a service</option>
139        <option value="Consultation">Consultation</option>
140        <option value="Standard appointment">Standard appointment</option>
141        <option value="Follow-up">Follow-up</option>
142      </select>
143    </div>
144    <div class="nf-field">
145      <label class="nf-label" for="nf-booking-form-date">Preferred date<span class="nf-req" aria-hidden="true"> *</span></label>
146      <input class="nf-input" id="nf-booking-form-date" name="date" type="date" required>
147    </div>
148    <fieldset class="nf-field nf-group">
149      <legend class="nf-label">Preferred time<span class="nf-req" aria-hidden="true"> *</span></legend>
150      <div class="nf-options">
151        <label class="nf-option"><input type="radio" name="time" value="Morning" required><span>Morning</span></label>
152        <label class="nf-option"><input type="radio" name="time" value="Afternoon"><span>Afternoon</span></label>
153        <label class="nf-option"><input type="radio" name="time" value="Evening"><span>Evening</span></label>
154      </div>
155    </fieldset>
156    <div class="nf-field">
157      <label class="nf-label" for="nf-booking-form-notes">Anything we should know?</label>
158      <textarea class="nf-input" id="nf-booking-form-notes" name="notes" rows="4"></textarea>
159    </div>
160  </div>
161  <div class="nf-hp" aria-hidden="true"><input type="text" name="_gotcha" tabindex="-1" autocomplete="off"></div>
162  <button class="nf-submit" type="submit">Request booking</button>
163  <p class="nf-error" role="alert" hidden></p>
164  <div class="nf-success" role="status" tabindex="-1" hidden>
165    <span class="nf-success-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" focusable="false"><path d="M5 12l5 5l10 -10" pathLength="1"/></svg></span>
166    <p class="nf-success-title">Thanks!</p>
167    <p class="nf-success-text">We’ll confirm your appointment shortly.</p>
168  </div>
169</form>
170<script>
171(function () {
172  var form = document.getElementById("nf-booking-form")
173  if (!form || !window.fetch) return
174  var started = Date.now()
175  var button = form.querySelector('.nf-submit')
176  var error = form.querySelector('.nf-error')
177  var success = form.querySelector('.nf-success')
178  Array.prototype.forEach.call(form.querySelectorAll('input[type=date]'), function (input) {
179    function sync() { input.classList.toggle('nf-empty', !input.value) }
180    input.addEventListener('input', sync)
181    input.addEventListener('change', sync)
182    sync()
183  })
184  form.addEventListener('submit', function (event) {
185    event.preventDefault()
186    var data = new FormData(form)
187    data.set('_elapsed', String(Date.now() - started))
188    var label = button.textContent
189    button.disabled = true
190    button.textContent = 'Sending...'
191    error.hidden = true
192    fetch(form.action, {
193      method: 'POST',
194      headers: { Accept: 'application/json' },
195      body: new URLSearchParams(data),
196    })
197      .then(function (response) {
198        return response.json().catch(function () { return {} }).then(function (body) {
199          if (!response.ok || !body.ok) throw new Error(body.message || 'Something went wrong. Please try again.')
200        })
201      })
202      .then(function () {
203        var redirect = form.getAttribute('data-redirect')
204        if (redirect) {
205          window.location.href = redirect
206          return
207        }
208        form.style.setProperty('--nf-height', form.offsetHeight + 'px')
209        Array.prototype.forEach.call(form.children, function (child) {
210          if (child !== success && child.tagName !== 'STYLE') child.hidden = true
211        })
212        form.classList.add('nf-sent')
213        success.hidden = false
214        success.focus()
215      })
216      .catch(function (reason) {
217        error.textContent = reason && reason.message ? reason.message : 'Something went wrong. Please try again.'
218        error.hidden = false
219      })
220      .finally(function () {
221        button.disabled = false
222        button.textContent = label
223        if (window.turnstile) window.turnstile.reset()
224      })
225  })
226})()
227</script>

Includes the CSS and a small script that sends the form without a page reload and shows the success message. HTML guide

Your form key

Pasted into the code for you.

What's in this booking form

Visitors pick a service, a day and a rough time, and you confirm the exact slot by email or phone. It collects booking requests and does not connect to a calendar.

Field	Name	Type	Required
Name	`name`	Short text	Yes
Email	`email`	Email	Yes
Phone	`phone`	Phone	Yes
Service	`service`	DropdownConsultation, Standard appointment, Follow-up	Yes
Preferred date	`date`	Date	Yes
Preferred time	`time`	Multiple choiceMorning, Afternoon, Evening	Yes
Anything we should know?	`notes`	Long text	No

The name is what each answer is saved under in your inbox and CSV export. To add, remove or rename fields, use the field editor above and copy the code again. Fields you add to the code by hand later are saved too, because Nisuform keeps every named input.

Add it to your site

Create a free form
Sign up for Nisuform and create a form with Endpoint only. Copy the endpoint from its Setup tab. The last part is your form key.
Paste the code
Copy the code for your stack and paste it where the form should appear. Replace YOUR_FORM_KEY with your key, or type the key under the code and copy it again.
Send a test
Submit the form once. It appears in your inbox, and you get an email within seconds.

When to use it

Hair salons, barbers and beauty studios
Personal trainers, tutors and coaches
Clinics, therapists and consultants
Photographers, repair shops and home services

Customize it

Open a field in the editor above to change its label, type, placeholder, options or help text, make it required, or move it up and down. The Text tab edits the title, description, button label and the message people see after they send the form.

Pick a theme and an accent color in the preview and the styled code updates to match. The colors live in CSS variables at the top of the style block, so you can also change --nf-accent by hand later. The button, focus rings and selected options follow it.

Only allow future dates

Set the date input's min to today with one line of JavaScript, like input.min = new Date().toISOString().slice(0, 10), so visitors cannot pick a day in the past.

Confirm automatically

On Pro, auto-replies email the visitor right away with the day and time they asked for, so they know the request arrived.

Get bookings on your phone

On Pro, send each request to Telegram, Slack or Discord.

Spam protection is built in

Every version includes a hidden _gotcha field. People never see it, bots fill it in, and Nisuform drops those submissions without telling them. The JavaScript versions also send _elapsed, how long the form was open, so a form sent faster than a person could type is dropped too. Rate limits, link checks and duplicate checks run on every submission, and you can turn on Cloudflare Turnstile or Google reCAPTCHA on forms that get a lot of spam. Read more about spam filtering.

Works with any stack

The HTML version works anywhere you can paste HTML, including WordPress, Webflow, Framer, Squarespace and static sites. The React version is a component you import, and the Next.js version is the same component marked as a client component, so it works in the App Router and the Pages Router. The Vue version is a single-file component that also works in Nuxt, the Svelte version works in Svelte 5 and SvelteKit, and the unstyled Astro version ships no client-side JavaScript at all.

Frequently asked questions

Does this booking form check my availability?

No. It collects booking requests and you confirm them. Nisuform does not connect to a calendar, so two people can ask for the same time. For real-time availability, use a scheduling tool.

Can booking requests go to Google Sheets?

On Pro, every request can be added to a Google Sheet as it arrives. On every plan, you can export requests as CSV.

Can I take a deposit with the booking?

Nisuform does not process payments. On Pro, you can redirect visitors to a payment link after they submit.

Booking form template

Live preview

Copy the booking form code

What's in this booking form

Add it to your site

Create a free form

Paste the code

Send a test

When to use it

Customize it

Only allow future dates

Confirm automatically

Get bookings on your phone

Spam protection is built in

Works with any stack

Frequently asked questions

More form templates

Quote request form template

RSVP form template

Contact form template

Start collecting form submissions