10 Free Appointment Booking Form Templates 2026 (HTML)
An appointment form has to answer three questions quickly: what, when and who. These 10 free appointment booking form templates are ones we designed and built at Colorlib in 2026, each for a real kind of business: a doctor’s clinic, a hair salon, a dental practice, a consultation call scheduler, a car garage, a day spa, a tutoring service, a restaurant, a vet and a simple request-a-callback card.
All are plain HTML, CSS and vanilla JavaScript with no jQuery, no Bootstrap file and no plugin. Dates use the browser’s own date picker, time slots are real radio buttons, and each template looks the same on its own or inside a Bootstrap 4, 5 or 6 project.
Free Appointment Booking Form Templates
Every form below works in its demo: time slots are generated for the chosen date, closed days are refused, prices and totals update, and a confirmation appears on submit. Each is a free download.
Appointment Form V01: Doctor and clinic appointment request with filtered doctors and time slots
A clinic booking form with a department select that filters the doctor list, a date picker that rejects weekends and a grid of time-slot chips generated for the chosen day. Some slots show as taken and past times are hidden for today. A dark teal side column holds the clinic's hours, address, phone and a short what-to-bring list, and a confirmation panel echoes the doctor, date and time.
Best for: clinics, GP practices and medical centres. Plain HTML and CSS with a few lines of vanilla JavaScript, a 381 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
Appointment Form V02: Hair salon booking with service cards, stylist choice and live summary
A salon booking form where guests tick one or more services, each with a duration and price, and pick a stylist from photo cards, where senior stylists add a per-service surcharge. Start times are generated for the chosen day so the whole visit fits before closing and around existing bookings. A sticky dark summary panel keeps the running total, total duration and end time in view, and a confirmation card echoes the booking.
Best for: hair salons, barbers and beauty studios. Plain HTML and CSS with a few lines of vanilla JavaScript, a 721 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
Appointment Form V03: Dental practice request with new and existing patient paths
A dental appointment request laid out as four numbered steps on a single rounded card. A segmented New patient / Existing patient control switches between a full registration panel (date of birth, address, insurer and member ID, referral source) and a short record lookup, and hidden fields are disabled so they drop out of validation. Choosing an emergency visit reveals a callout with the practice's urgent phone line, and Sundays are rejected as a preferred date.
Best for: dental practices, orthodontists and small clinics. Plain HTML and CSS with a few lines of vanilla JavaScript, a 306 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
Appointment Form V04: Consultation call scheduler with month calendar and time-zone conversion
A three-pane scheduler for booking a 30-minute video call: a host panel with the call details, a month calendar built in JavaScript and a list of start times for the chosen day. Slots are defined in the host's New York time zone and shown in the visitor's own zone, detected with Intl, with a 12h/24h switch. Choosing a time leads to a short details step and then a confirmation card with an .ics download.
Best for: consultants, coaches, agencies and sales demo booking. Plain HTML and CSS with a few lines of vanilla JavaScript, a 210 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
Appointment Form V05: Car service and garage booking with a running work estimate
A dark, workshop-style booking form for a car service: make and model selects that filter each other, model year, optional mileage and a licence plate field styled like a plate. Service checkboxes feed a receipt-style estimate with shop supplies and tax, and choosing a full service marks the jobs it already covers as included. Drop-off dates skip Sundays, Saturday offers fewer drop-off times, and requesting a courtesy car shows availability for that day and a required licence confirmation.
Best for: garages, auto repair shops and mobile mechanics. Plain HTML and CSS with a few lines of vanilla JavaScript, a 163 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
Appointment Form V06: Spa treatment booking with add-ons, live total and gift option
A day-spa booking form where treatments are photo cards showing duration and price, followed by optional add-ons, a date and arrival time, and contact details. A summary panel keeps a running total as treatments and add-ons change. Switching on the gift option reveals recipient name, email, a personal message with a character counter and a send-on date, and those fields are only required while the switch is on.
Best for: spa, massage and wellness studio booking pages. Plain HTML and CSS with a few lines of vanilla JavaScript, a 417 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
Appointment Form V07: Tutoring lesson booking with weekly repeat and bundle pricing
A lesson booking form for a tutoring service with subject chips, a segmented level picker and lesson lengths whose prices follow the chosen level. Choosing a preferred weekday suggests the next matching first-lesson date and keeps the date on that weekday. A repeat-weekly switch reveals a weeks stepper and a preview of every lesson date, and the summary multiplies the per-lesson price by the weeks with a small bundle discount.
Best for: tutoring, music lesson and coaching booking pages. Plain HTML and CSS with a few lines of vanilla JavaScript, a 175 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
Appointment Form V08: Fine-dining table reservation with time slots and a ticket confirmation
A dark restaurant reservation form with a candle-lit photo panel beside it. Guests set the party size with a stepper, pick a date and then choose from dinner time slots between 17:30 and 22:00, where some slots show as full for each date. Seating is chosen from icon cards, with an occasion menu, special requests with a character counter and contact details. A confirmed booking is shown as a reservation ticket with a reference number.
Best for: restaurant, bistro and wine bar reservation pages. Plain HTML and CSS with a few lines of vanilla JavaScript, a 442 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
Appointment Form V09: Pet grooming and vet appointment with a vaccination record upload
A friendly booking form for a pet clinic that covers grooming, check-ups and vaccinations. Owners pick the species from illustrated cards, get breed suggestions for that species, and see a size band and starting price as they enter the weight. A styled drop zone takes a vaccination record as PDF, JPG or PNG up to 5 MB, shows the chosen file as a removable chip, and is required only when grooming is selected.
Best for: vet clinics, groomers and pet care booking pages. Plain HTML and CSS with a few lines of vanilla JavaScript, a 307 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
Appointment Form V10: Minimal request-a-callback card
A compact, monochrome callback request card with one blue accent, centred on a faint grid backdrop. It asks for a name, a phone number with a format hint and pattern check, a preferred time window from a segmented control, and an optional topic. The confirmation replaces the form inside the same card and states when the call will come, such as this afternoon or tomorrow morning, based on the current time.
Best for: support, sales and service pages that offer a phone callback. Plain HTML and CSS with a few lines of vanilla JavaScript, a 533 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
What makes a booking form convert
Show only times that can actually be booked. The clinic (Appointment Form V01) hides weekends and past slots, and the salon (V02) only offers start times that fit the length of the chosen services.
Keep a running summary in view: services, date, time and total, as the salon and spa forms do.
Show times in the visitor’s time zone for remote calls, as the consultation scheduler (V04) does, and let people add the booking to their calendar.
Connecting a form to your calendar
The templates are front end only; nothing is sent. Load real availability from your booking system, submit the form to your own endpoint or scheduling service, and confirm by email from the server.
Frequently asked questions
Do these booking forms need Bootstrap or jQuery? No. They carry their own styles and a few lines of plain JavaScript, and they drop into Bootstrap 4, 5 or 6 pages without being restyled.
Can I use them for a client’s business? Yes. They are free under the same licence as our other snippets (CC BY 3.0): use them in personal and commercial projects and keep the credit link.
Do the forms book real appointments? Not in the demos: availability is generated in the browser and nothing is sent. Connect the form to your calendar or booking backend before taking real bookings.
Related Posts
Comments (0)