Booking Request Form

Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel

Related Section Templates

4 sectionsView all →
Contact

Booking Request Form

Responsive · Animated
Contact

Contact Form With Details

Responsive · Animated
Contact

Contact With Map

Responsive · Animated
Contact

Contact Options Cards

Responsive · Animated

Booking Request Form — Free Website Section Template

Contact · v1.0.0 · Updated 2026-10-24 · Responsive · GSAP animation · HTML, React & Vue

CategoryContact
Tagsbookingappointmentreservationformcontactscheduleopening hourslight
Updated October 20, 2026

What's included

Features

Appointment request form with name, email, optional phone and notes
Service menu built from an editable list
Date picker that blocks days in the past
Time-slot menu built from an editable list
Opening hours list and a "what to expect" checklist beside the form
Sends to Formspree, Basin, Getform or any form endpoint
Animated success and error messages, with a hidden spam trap field
Every label, button and message is editable
Two-column layout that stacks on tablets and phones
Export HTML, a ZIP, React or Vue, or fork to My Code

About this section

Booking Request Form — Free Appointment Section Template

Booking Request Form: An appointment request section: on the left a heading, opening hours and a short list of what to expect; on the right a form card with name, email, phone, a service menu, a date picker, time slots and a notes box. Services and time slots are editable lists, the form sends to Formspree or any endpoint, and the date picker blocks past days.

Booking Request Form is a free section for businesses that take appointments: salons, clinics, dentists, therapists, restaurants, tutors and consultants. Visitors choose a service, a preferred day and a time slot, add their details and a note, and you receive the request by email through your form service.

Everything a request needs

The form has name, email and optional phone fields, a menu of your services, a date picker, a menu of time slots and a notes box. Services and time slots are editable lists, so you can offer "First consultation", "Colour" or "Table for two" and time slots such as Morning or 6:00 pm. The date picker cannot be set to a day in the past.

Opening hours and reassurance

Beside the form, a heading, a short opening-hours list and a "what to expect" list answer the questions people have before they book: when you are open, what the first visit involves and your cancellation terms. Both lists are editable and can be left empty.

A request, not a live calendar

This section collects requests; it does not check availability or hold a slot. Say so in the note under the button, as the template does, and confirm by email or phone. For a live calendar, link a button to a booking tool instead. The form posts to Formspree, Basin, Getform or any endpoint you set, and shows a friendly success or error message without leaving the page.

Export it

Copy one HTML file, download a ZIP, copy a React or Vue component, or fork into My Code. For a general enquiry form, use Contact Form With Details, and add directions with Contact With Map.

Why use it

Why Use the Booking Request Form

📅
Fewer back-and-forth emails
Collecting the service, day and time up front saves the first round of questions.
🧩
Fits any appointment business
Services and time slots are lists you rename, so it suits salons, clinics, restaurants and tutors alike.
🔌
No backend needed
The form posts to a form service you already use, so there is nothing to host.

How it’s different

How It’s Different From Other Free Section Templates

✎
Editable, not just copyable
Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.
◐
One theme for every section
Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.
⇲
Responsive by container
Container queries make each section adapt to its own width, in a full page, a column or a page builder.
✦
GSAP animation built in
Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.
</>
HTML, React and Vue
Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.
◍
Free, private, saved
No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

  1. 1
    Edit the contentFill in the heading, opening hours, services & times and form in the panel. Wrap words in *asterisks* to colour them.
  2. 2
    Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
  3. 3
    Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
  4. 4
    Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
  5. 5
    Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

💈
Salons and barbers
Let clients request a service and a morning or evening slot, with the opening hours and cancellation terms in view.
🦷
Clinics and therapists
Collect a first appointment request with a service type and notes, then confirm the time by phone or email and send reminders.
🍝
Restaurants and venues
Take table, tasting or tour requests with a preferred day and time, then reply to confirm the booking and note any dietary needs.
🎓
Tutors and consultants
Offer trial lessons or discovery calls and let people choose a time that suits them before you follow up.

In real websites

Website Templates That Use the Booking Request Form Section

The Booking Request Form section is part of 5 complete website templates in the free Website Builder, so you can see it in a full page before you use it on its own: Restaurant Website, Dental Clinic Website, Coach & Consultant Website, Boutique Hotel Website, Hair & Beauty Salon Website. Open any of them in the builder to edit the whole page, or keep customising this section by itself.

Got questions?

Frequently Asked Questions

No. It sends you a request with the visitor's preferred day and time, and you confirm by email or phone. For live availability, link a button to a booking tool such as Calendly.

To the form service you set in the Form URL field, such as Formspree, Basin or Getform. They email you each request with every field the visitor filled in.

Yes. Both are editable lists: add, rename, reorder or remove items, and the menus in the form update to match.

The date picker is limited to today and later automatically, in the exported page, using the visitor's own date.

It saves an editable copy of your Booking Request Form in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.