Home
Arya
Book Appointment form

Book Appointment form

A schedule an appointment form is an online document that helps the user to schedule an appointment with the company or business.

This tailwind example is contributed by Arya, on 23-Aug-2022. Component is made with Tailwind CSS v3.

Form

Author Arya

11.7k

Fork Fullscreen

<div class="mx-14 mt-10 border-2 border-blue-400 rounded-lg">
  <div class="mt-10 text-center font-bold">Contact Us</div>
  <div class="mt-3 text-center text-4xl font-bold">Make an Appointment</div>
  <div class="p-8">
    <div class="flex gap-4">
      <input type="Name" name="name" class="mt-1 block w-1/2 rounded-md border border-slate-300 bg-white px-3 py-4 placeholder-slate-400 shadow-sm placeholder:font-semibold placeholder:text-gray-500 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500 sm:text-sm" placeholder="Full Name *" />
      <input type="email" name="email" class="mt-1 block w-1/2 rounded-md border border-slate-300 bg-white px-3 py-4 placeholder-slate-400 shadow-sm placeholder:font-semibold placeholder:text-gray-500 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500 sm:text-sm" placeholder="Email *" />
    </div>
    <div class="my-6 flex gap-4">
      <select name="select" id="select" class="block w-1/2 rounded-md border border-slate-300 bg-white px-3 py-4 font-semibold text-gray-500 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500 sm:text-sm">
        <option  class="font-semibold text-slate-300">Please Select</option>
      </select>
      <select name="select" id="select" class="block w-1/2 rounded-md border border-slate-300 bg-white px-3 py-4 font-semibold text-gray-300 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500 sm:text-sm">
        <option  class="font-semibold text-slate-300">4:00 Available</option>
      </select>
    </div>
    <div class="">
      <textarea name="textarea" id="text" cols="30" rows="10" class="mb-10 h-40 w-full resize-none rounded-md border border-slate-300 p-5 font-semibold text-gray-300">Message</textarea>
    </div>
    <div class="text-center">
      <a class="cursor-pointer rounded-lg bg-blue-700 px-8 py-5 text-sm font-semibold text-white">Book Appoinment</a>
    </div>
  </div>
</div>

Related Examples

Book appointment form

Author:
Lukas Müller

2 years ago

26.1k
Form for editing items

Author:
Sophia Baker

2 years ago

16.5k
Feedback form
Collect opinions about your company's service

Author:
Arya

3 years ago

13.5k
Appointment booking form

Author:
Leif99

2 years ago

17.2k
User registration form with Instructions

Author:
Fagundo67

2 years ago

23.8k
Simple Form 2

Author:
Mr Robot

2 years ago

10.1k
Reservation form

Author:
Lukas Müller

2 years ago

13k
Contact us Form
suitable for dark-themed websites

Author:
Anja Müller

1 year ago

9.5k
stepper
The Stepper Component is a versatile and user-friendly tool designed to guide users through a sequence of steps. Whether you're building a multi-step form, a tutorial, or any process that requires sequential navigation, this component makes it easy to implement and customize.

Author:
Abhiraj

5 months ago

1k
File Upload

Author:
Rajesh Maheshwari

4 months ago

564
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

1.9k
Animated Iogin form
This section showcases a series of interactive image cards that reveal descriptive text on hover. Built using Tailwind CSS and Astro.js, each card features a smooth animation, background blur, and opacity transition, enhancing the user experience while presenting visually engaging content.

Author:
nicoleshal07

1 month ago

127

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components