Booking form HTML template

An appointment request form for consultations, viewings, salons and services booked by conversation rather than by calendar software. The visitor proposes a date; you confirm by email — no double bookings, no plugin.

The form

The HTML

<style>
  .hf-form { display: grid; gap: 0.75rem; max-width: 28rem; font-family: system-ui, sans-serif; }
  .hf-form label { font-weight: 600; font-size: 0.9rem; }
  .hf-form input, .hf-form textarea, .hf-form select {
    width: 100%; padding: 0.5rem 0.6rem; font: inherit;
    border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box;
  }
  .hf-form button {
    justify-self: start; padding: 0.55rem 1.4rem; font: inherit; font-weight: 600;
    background: #0b6e4f; color: #fff; border: none; border-radius: 6px; cursor: pointer;
  }
  .hf-hp { position: absolute; left: -9999px; }
</style>

<form class="hf-form" action="https://example.com/your-endpoint" method="POST">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  <label for="phone">Phone</label>
  <input type="tel" id="phone" name="phone" required>
  <label for="preferred-date">Preferred date</label>
  <input type="date" id="preferred-date" name="preferred-date" required>
  <label for="preferred-time">Preferred time</label>
  <select id="preferred-time" name="preferred-time" required>
    <option>Morning</option>
    <option>Midday</option>
    <option>Afternoon</option>
    <option>Evening</option>
  </select>
  <label for="what-is-the-booking-for">What is the booking for?</label>
  <textarea id="what-is-the-booking-for" name="what-is-the-booking-for" rows="5"></textarea>
  <!-- honeypot: humans never see this; bots fill it in. Drop submissions where it has a value. -->
  <input class="hf-hp" type="text" name="website" tabindex="-1" autocomplete="off" aria-hidden="true">
  <button type="submit">Request booking</button>
</form>

Fields in this template

• Name — text, required
• Email — email, required
• Phone — phone number, required
• Preferred date — date, required
• Preferred time — dropdown (Morning, Midday, Afternoon, Evening), required
• What is the booking for? — multi-line text, optional

Tips for a booking form that works

• Be explicit that this is a request, not a confirmed slot — "we’ll confirm your time by email" avoids no-show confusion.
• Broad time-of-day options beat exact times for a request form: you keep scheduling control and visitors don’t face an empty time picker.
• If you take more than a few bookings a day, graduate to real scheduling software — a request form works best at low volume.

Questions

Can this form show my real availability?

No — a static form can’t read your calendar. That’s a feature at low volume (you stay in control by confirming each request), but if you need live availability, you need booking software rather than a form.

Why require a phone number here?

Same-day changes happen with appointments, and email is too slow for "running 15 minutes late". Drop the requirement if your bookings are all far in advance.

From the same maker

Need more than a form?

Tentmaker Stores gives you a complete online store — product pages, checkout and everything in between. Built for small makers and niche sellers.