Request6 fields

Appointment Booking

Book appointments with preferred date, time, and visit reason.

Spam protectionEmail notificationsAI sales agentSubmission dashboardNo backend needed

Live Preview

Exactly what visitors will see on your site

Interactive

What you'll collect

Every field in this template, ready to use out of the box.

Full Name

text · required

email · required

Phone

tel · required

Preferred Date

date · required

Preferred Time

time · required

Reason for Visit

textarea · required

Copy the Code

Choose HTML for static sites or React for component-based apps. Replace YOUR_FORM_ID with your Flowqen endpoint ID.

<form
  action="https://flowqen.com/api/f/YOUR_FORM_ID"
  method="POST"
  class="max-w-xl mx-auto rounded-[32px] border border-[#f0d9cf] bg-[linear-gradient(180deg,#fff7f2,#fffdfb)] px-6 py-7 shadow-[0_30px_90px_rgba(225,78,58,0.12)] sm:px-8"
>
  <h2 class="text-2xl font-semibold tracking-tight text-[#251c18] mb-6">Book an Appointment</h2>

  <div class="space-y-4">
    <div>
      <label class="mb-1.5 block text-sm font-medium text-[#6b5548]">Full Name</label>
      <input type="text" name="full_name" class="w-full rounded-[20px] border border-[#efd8cf] bg-white px-4 py-3 text-sm text-[#2d201a] outline-none transition focus:border-[#E14E3A] focus:ring-4 focus:ring-[#E14E3A]/12" placeholder="Jane Doe" required />
    </div>

    <div>
      <label class="mb-1.5 block text-sm font-medium text-[#6b5548]">Email</label>
      <input type="email" name="email" class="w-full rounded-[20px] border border-[#efd8cf] bg-white px-4 py-3 text-sm text-[#2d201a] outline-none transition focus:border-[#E14E3A] focus:ring-4 focus:ring-[#E14E3A]/12" placeholder="jane@example.com" required />
    </div>

    <div>
      <label class="mb-1.5 block text-sm font-medium text-[#6b5548]">Phone</label>
      <input type="tel" name="phone" class="w-full rounded-[20px] border border-[#efd8cf] bg-white px-4 py-3 text-sm text-[#2d201a] outline-none transition focus:border-[#E14E3A] focus:ring-4 focus:ring-[#E14E3A]/12" placeholder="+1 (555) 000-0000" required />
    </div>

    <div>
      <label class="mb-1.5 block text-sm font-medium text-[#6b5548]">Preferred Date</label>
      <input type="date" name="preferred_date" class="w-full rounded-[20px] border border-[#efd8cf] bg-white px-4 py-3 text-sm text-[#2d201a] outline-none transition focus:border-[#E14E3A] focus:ring-4 focus:ring-[#E14E3A]/12" required />
    </div>

    <div>
      <label class="mb-1.5 block text-sm font-medium text-[#6b5548]">Preferred Time</label>
      <input type="time" name="preferred_time" class="w-full rounded-[20px] border border-[#efd8cf] bg-white px-4 py-3 text-sm text-[#2d201a] outline-none transition focus:border-[#E14E3A] focus:ring-4 focus:ring-[#E14E3A]/12" required />
    </div>

    <div>
      <label class="mb-1.5 block text-sm font-medium text-[#6b5548]">Reason for Visit</label>
      <textarea name="reason" rows="4" class="w-full rounded-[20px] border border-[#efd8cf] bg-white px-4 py-3 text-sm text-[#2d201a] outline-none transition focus:border-[#E14E3A] focus:ring-4 focus:ring-[#E14E3A]/12 resize-none" placeholder="What is your visit regarding?" required></textarea>
    </div>
  </div>

  <!-- Honeypot (spam protection) -->
  <div style="display:none">
    <input type="text" name="_gotcha" style="display:none" />
  </div>

  <button type="submit" class="mt-6 w-full rounded-[20px] bg-[#201814] py-3 text-sm font-semibold text-white transition hover:bg-[#382c26]">
    Book Appointment
  </button>
</form>

What is a Appointment Booking?

An appointment booking form template lets visitors schedule meetings or visits directly from your website. This HTML form collects preferred date, time, and the reason for the visit, making it easy for clinics, salons, consultants, and professional services to manage incoming appointment requests.

Frequently Asked Questions

Common questions about request form templates.

More Request templates

Other free templates in the same category.

Request

Support Request

A support ticket form with priority levels and troubleshooting context.

6 fields

Request

Callback Request

Let visitors request a callback at their preferred time.

4 fields

Start with this Appointment Booking

Create your form in 30 seconds — pre-filled with all the fields above. Free forever.