HTML snippet · Free · Copy-paste

Booking form HTML template

A booking form using native date and time inputs — no JS libraries needed. Two ready-to-copy versions below.

The code

<form class="lf-form" action="/api/bookings" method="POST">
  <div class="field">
    <label for="f-name">Full name *</label>
    <input id="f-name" name="name" type="text" placeholder="Jane Doe" required />
  </div>
  <div class="field">
    <label for="f-email">Email *</label>
    <input id="f-email" name="email" type="email" placeholder="you@example.com" autocomplete="email" required />
  </div>
  <div class="field">
    <label for="f-phone">Phone</label>
    <input id="f-phone" name="phone" type="tel" placeholder="+1 555 0100" autocomplete="tel" />
  </div>
  <div class="field">
    <label for="f-date">Date *</label>
    <input id="f-date" name="date" type="date" required />
  </div>
  <div class="field">
    <label for="f-time">Time *</label>
    <input id="f-time" name="time" type="time" required />
  </div>
  <div class="field">
    <label for="f-party_size">Party size *</label>
    <input id="f-party_size" name="party_size" type="number" min="1" max="20" required />
  </div>
  <div class="field">
    <label for="f-notes">Special requests</label>
    <textarea id="f-notes" name="notes" rows="3" placeholder="Allergies, occasion, etc."></textarea>
  </div>

  <button type="submit">Request booking</button>
</form>

<style>
.lf-form { max-width: 480px; margin: 0 auto; font-family: system-ui, sans-serif; }
.lf-form .field { margin-bottom: 1rem; }
.lf-form label, .lf-form legend { display: block; font-weight: 500; margin-bottom: 0.35rem; font-size: 0.9rem; }
.lf-form input, .lf-form select, .lf-form textarea {
  width: 100%; padding: 0.65rem 0.75rem; font-size: 1rem;
  border: 1px solid #d1d5db; border-radius: 0.5rem; background: #fff;
  font-family: inherit;
}
.lf-form input:focus, .lf-form select:focus, .lf-form textarea:focus {
  outline: 2px solid #2563eb; outline-offset: 1px; border-color: #2563eb;
}
.lf-form .checkbox, .lf-form .radio { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }
.lf-form .checkbox input, .lf-form .radio input { width: auto; }
.lf-form button {
  width: 100%; padding: 0.75rem 1rem; font-size: 1rem; font-weight: 600;
  color: #fff; background: #2563eb; border: 0; border-radius: 0.5rem; cursor: pointer;
}
.lf-form button:hover { background: #1d4ed8; }
</style>

Live preview

Rendered in a sandboxed iframe — exactly what you'll get when you paste the snippet.

Frequently asked questions

How do I block out unavailable dates?

The native date input doesn't support per-date blocking. Either add min/max attributes for a date window, or switch to a LemForms booking field which respects your real-time availability calendar.

How do I send a confirmation email after booking?

You'll need a server-side handler that triggers your email provider. Or use LemForms — it auto-sends confirmation emails to the booker and notifications to you.

Skip the HTML — build this in 30 seconds

LemForms gives you the same form with a real backend: submissions dashboard, email notifications, conditional logic, file uploads, webhooks, and Stripe payments. No code.

Try LemForms free

Related snippets