Logo for FormBackend
📅

Free HTML Booking Form Generator

Generate a free HTML booking form with a date picker and email notifications for every appointment. Copy-paste code — no signup or server required.

booking-form.html
Preview Code

Settings

Overrides the theme's button color

Sample HTML booking form

<form action="🔥🔥🔥 CHANGE THIS 🔥🔥🔥" method="POST" class="formbackend-form">
  <div class="formbackend-field">
    <label for="name">Your Name</label>
    <input type="name" id="name" name="name" placeholder="John Doe" required="true">
  </div>

  <div class="formbackend-field">
    <label for="email">Your Email</label>
    <input type="email" id="email" name="email" placeholder="johndoe@example.com" required="true">
  </div>

  <div class="formbackend-field">
    <label for="phone_number">Your Phone Number</label>
    <input type="text" id="phone_number" name="phone_number" placeholder="### ### ####" required="true">
  </div>

  <div class="formbackend-field">
    <label for="appointment_date">Date of your appointment</label>
    <input type="date" id="appointment_date" name="appointment_date" required="true">
  </div>

  <div class="formbackend-field">
    <label for="appointment_time">Time of your appointment</label>
    <input type="time" id="appointment_time" name="appointment_time" required="true">
  </div>

  <div class="formbackend-field">
    <label for="additional_comments">Additional information</label>
    <textarea id="additional_information" name="additional_information" placeholder="Any additional information"></textarea>
  </div>

  <div class="formbackend-field">
    <button type="submit">Send</button>
  </div>
</form>

<style>
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');

  .formbackend-form { width: 100%; max-width: 400px; font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; font-weight: 400; color: #111827; line-height: 24px; background: #ffffff; }
  .formbackend-form .formbackend-field:not(:first-child) { margin-top: 16px; }
  .formbackend-form label { display: block; font-weight: 500; color: #374151; margin-bottom: 4px; }
  .formbackend-form textarea, .formbackend-form input, .formbackend-form select { width: 100%; border: 1px solid #d1d5db; border-radius: 6px; box-sizing: border-box; display: block; font-family: inherit; font-size: 14px; padding: 10px 12px; background: #ffffff; color: #111827; }
  .formbackend-form textarea { min-height: 100px; }
  .formbackend-form input[type='checkbox'] { width: 15px; height: 15px; margin: 0 8px 0 0; display: inline-block; }
  .formbackend-form .form-checkbox { display: flex; align-items: center; }
  .formbackend-form ::placeholder { color: #9ca3af; opacity: 1; }
  .formbackend-form button { background-color: #111827; color: #ffffff; border: none; border-radius: 6px; cursor: pointer; padding: 10px 20px; font-weight: 500; font-family: inherit; font-size: 14px; }
  .formbackend-form button:hover { opacity: 0.9; }
</style>

Free HTML Booking Form — When to Use It

Let customers book appointments, consultations, or services directly from your website. This generator creates an HTML booking form with fields for date, time, contact details, and any service-specific information you need to collect.

The booking form is a lightweight alternative to full scheduling platforms when you need a simple way to accept booking requests. Connect it to FormBackend to get email notifications for each new booking and manage them from your dashboard.

Need a different kind of form? This is one of several form types you can build with our free HTML form generator — start there to compare contact, survey, booking, registration, and order form templates in one place.

Frequently Asked Questions

Does the booking form include a calendar picker?

The generated form uses a standard HTML date input, which shows a native date picker on most browsers. For a more advanced calendar widget, you can replace the input with a JavaScript date picker after copying the code.

Can I set available time slots?

You can customize the form HTML to include a select dropdown with your available time slots, or use a time input field for open-ended scheduling.

Will I get notified of new bookings?

Yes. When connected to FormBackend, you'll receive an email notification for each new booking submission, and all bookings are stored in your dashboard.

Other Form Generators

📧
HTML Contact Form Generator

Create a contact form, to collect name, email and a message
🎉
HTML RSVP Form Generator

Collect information from attendees to an event or party.
📊
HTML Survey Form Generator

Create a survey form to gather feedback from your customers.
📬
HTML Newsletter Form Generator

Create a newsletter form to collect email addresses.
✍️
HTML Registration Form Generator

Create a registration form to let users sign up for your event, workshop etc.
🏢
HTML Department Contact Form Generator

Create a contact form, to collect name, email and a message for a specific department
🛟
HTML Support Form Generator

Create a support form, to collect name, email and a message
🛍️
HTML Order Form Generator

Collect product orders with quantities, shipping details, and notes.
📄
HTML Application Form Generator

Accept job or program applications with experience and cover letter fields.