Free Appointment Booking Form Template — Copy-Paste HTML Code

Q: Is this appointment booking form template free?

Yes, completely free. You can copy, modify, and use this booking form template however you like. The only cost is the FormBackend service for receiving and managing booking requests, which starts with a free tier.

Q: How do I get notified when someone books an appointment?

FormBackend sends an email notification the moment a booking request arrives. You can also set up an auto-reply to confirm the request to the customer, and connect Google Sheets or Slack to track bookings in one place.

Q: Will this work on Squarespace, Webflow, and WordPress?

Absolutely. This is plain HTML and CSS, so it works on any platform — static sites, WordPress, Webflow, Squarespace, Wix, and more. The form simply sends booking data to FormBackend on submit.

Q: Can I collect a deposit or payment with the booking?

This template collects booking requests, not payments. You can follow up by email to confirm and take payment, or redirect to a payment page after submission using FormBackend's custom redirect feature.

An appointment booking form lets customers request a time with you without back-and-forth emails. In this guide you’ll get a production-ready HTML booking form template you can copy and paste into any website in minutes. The template includes a date and time picker, service selection, modern styling, validation, and works seamlessly with FormBackend to receive booking requests.

Complete Booking Form Code

Here’s a fully-styled, ready-to-use appointment booking form you can copy into any HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Book an Appointment</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
        }
        .container { background: #fff; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); padding: 40px; max-width: 520px; width: 100%; }
        h1 { font-size: 28px; margin-bottom: 10px; color: #1a202c; }
        .form-subtitle { font-size: 14px; color: #718096; margin-bottom: 30px; }
        .form-group { margin-bottom: 20px; }
        label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; color: #2d3748; }
        .required::after { content: " *"; color: #e53e3e; }
        input, select, textarea {
            width: 100%; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 6px;
            font-size: 14px; font-family: inherit; transition: all 0.3s ease; background: #fff;
        }
        input:focus, select:focus, textarea:focus { outline: none; border-color: #3182ce; box-shadow: 0 0 0 3px rgba(49,130,206,0.1); }
        textarea { resize: vertical; min-height: 90px; }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
        @media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } .container { padding: 25px; } }
        button { width: 100%; padding: 14px 20px; background: #3182ce; color: #fff; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.3s ease; margin-top: 10px; }
        button:hover { background: #2c5aa0; }
        .success-message, .error-message { display: none; padding: 14px; border-radius: 6px; margin-bottom: 20px; font-size: 14px; }
        .success-message { background: #c6f6d5; color: #22543d; }
        .error-message { background: #fed7d7; color: #742a2a; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Book an Appointment</h1>
        <p class="form-subtitle">Pick a date and time and we'll confirm by email.</p>

        <div class="success-message" id="successMessage">Thanks! Your booking request has been received. We'll confirm shortly.</div>
        <div class="error-message" id="errorMessage">There was an issue submitting your request. Please try again.</div>

        <form id="bookingForm" action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
            <div class="form-row">
                <div class="form-group">
                    <label for="name" class="required">Full Name</label>
                    <input type="text" id="name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="email" class="required">Email</label>
                    <input type="email" id="email" name="email" required>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="phone">Phone</label>
                    <input type="tel" id="phone" name="phone">
                </div>
                <div class="form-group">
                    <label for="service" class="required">Service</label>
                    <select id="service" name="service" required>
                        <option value="">Select a service...</option>
                        <option value="Consultation">Consultation</option>
                        <option value="Follow-up">Follow-up</option>
                        <option value="Strategy Session">Strategy Session</option>
                    </select>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="date" class="required">Preferred Date</label>
                    <input type="date" id="date" name="preferred_date" required>
                </div>
                <div class="form-group">
                    <label for="time" class="required">Preferred Time</label>
                    <input type="time" id="time" name="preferred_time" required>
                </div>
            </div>

            <div class="form-group">
                <label for="notes">Notes (Optional)</label>
                <textarea id="notes" name="notes" placeholder="Anything we should know before your appointment?"></textarea>
            </div>

            <button type="submit">Request Booking</button>
        </form>
    </div>

    <script>
        const form = document.getElementById('bookingForm');
        const successMessage = document.getElementById('successMessage');
        const errorMessage = document.getElementById('errorMessage');

        form.addEventListener('submit', function(e) {
            successMessage.style.display = 'none';
            errorMessage.style.display = 'none';

            const name = document.getElementById('name').value.trim();
            const email = document.getElementById('email').value.trim();
            const date = document.getElementById('date').value;

            if (!name || !email || !date) {
                errorMessage.textContent = 'Please fill in all required fields.';
                errorMessage.style.display = 'block';
                e.preventDefault();
                return false;
            }

            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                errorMessage.textContent = 'Please enter a valid email address.';
                errorMessage.style.display = 'block';
                e.preventDefault();
                return false;
            }
        });
    </script>
</body>
</html>

How to Use This Template

Getting your booking form live takes three steps:

Step 1: Copy the Code

Copy the entire HTML code above and save it as booking-form.html. Upload it to your site, embed it in an existing page, or test it locally first.

Step 2: Create a FormBackend Account

Create a free account at FormBackend. This is where every booking request will be received and stored.

Step 3: Update the Form Action URL

Replace YOUR_FORM_ID in the form action with your real FormBackend form ID, so it looks like https://www.formbackend.com/f/abc123xyz.

That’s it — your booking form is live and ready to take requests.

Booking Form Variations

Variation 1: Fixed Time Slots

Offer specific slots instead of a free time picker:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <input type="text" name="name" placeholder="Name" required>
    <input type="email" name="email" placeholder="Email" required>
    <input type="date" name="preferred_date" required>
    <select name="time_slot" required>
        <option value="">Choose a time...</option>
        <option value="9:00 AM">9:00 AM</option>
        <option value="11:00 AM">11:00 AM</option>
        <option value="2:00 PM">2:00 PM</option>
        <option value="4:00 PM">4:00 PM</option>
    </select>
    <button type="submit">Book</button>
</form>

Variation 2: Booking with Party Size

For restaurants, tours, or group sessions:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <input type="text" name="name" placeholder="Name" required>
    <input type="email" name="email" placeholder="Email" required>
    <input type="date" name="preferred_date" required>
    <input type="time" name="preferred_time" required>
    <input type="number" name="party_size" placeholder="Number of guests" min="1" required>
    <button type="submit">Reserve</button>
</form>

Variation 3: Multi-Location Booking

Let customers pick which location they’re visiting:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <input type="text" name="name" placeholder="Name" required>
    <input type="email" name="email" placeholder="Email" required>
    <select name="location" required>
        <option value="Downtown">Downtown</option>
        <option value="Uptown">Uptown</option>
        <option value="Online">Online</option>
    </select>
    <input type="date" name="preferred_date" required>
    <input type="time" name="preferred_time" required>
    <button type="submit">Book Appointment</button>
</form>

How to Customize This Template

Change the button color: Find background: #3182ce; in the CSS and swap it for your brand color.

Add services: Edit the <option> values inside the service <select> to match what you offer.

Limit dates: Add a min attribute to the date input (e.g. min="2026-01-01") so customers can’t book in the past.

Add more fields: Duplicate a form-group div and change the name, id, and label — FormBackend captures new fields automatically.

Adjust the width: Change max-width: 520px; to make the form wider or narrower.

Integration with FormBackend

FormBackend gives you a simple way to manage booking requests without a backend. Once requests arrive in your dashboard, you can:

View all booking requests in one organized place
Get an email notification for every new request
Send an automatic confirmation email to the customer
Push bookings to Google Sheets, Slack, or your calendar via webhooks
Export booking data as CSV

For more on receiving emails and managing submissions, see the FormBackend documentation.

Frequently Asked Questions

Is this appointment booking form template free? Yes, completely free. You can copy, modify, and use it however you like. The only cost is FormBackend for receiving and managing booking requests, which starts with a free tier.

How do I get notified when someone books an appointment? FormBackend sends an email notification the moment a request arrives. You can also auto-reply to confirm to the customer and connect Google Sheets or Slack.

Can customers pick a date and time in this form? Yes. The template uses native HTML date and time inputs, so visitors get a calendar and time picker with no libraries. You can also offer fixed slots with a dropdown.

Does this booking form prevent spam requests? Yes. FormBackend includes spam protection on every plan and supports Cloudflare Turnstile, reCAPTCHA, and hCaptcha.

Will this work on Squarespace, Webflow, and WordPress? Absolutely. It’s plain HTML and CSS, so it works on any platform.

Can I collect a deposit or payment with the booking? This template collects requests, not payments. Follow up by email to take payment, or redirect to a payment page after submission using FormBackend’s custom redirect feature.

More form templates

Looking for a different form type? Browse our full collection of free HTML form templates, or try one of these:

Contact Form Template — Collect name, email, subject, and message
RSVP Form Template — Manage event attendance and guest counts
Registration Form Template — Event, workshop, and conference signups
Quote Request Form Template — Let prospects request a custom quote

Need a custom form? Use our HTML form generator to build one visually.