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

12.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

3 years ago

28.3k
Form for editing items

Author:
Sophia Baker

3 years ago

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

Author:
Arya

3 years ago

14.3k
Appointment booking form

Author:
Leif99

2 years ago

18k
User registration form with Instructions

Author:
Fagundo67

3 years ago

24.6k
Simple Form 2

Author:
Mr Robot

3 years ago

11k
Reservation form

Author:
Lukas Müller

3 years ago

13.8k
Get in Touch – Let's Connect! Responsive Contact Section Using TailwindCSS
Need a website, have a project idea, or just want to say hello? Feel free to reach out! My Contact Section is built with Tailwind CSS, ensuring a clean, responsive, and user-friendly experience. Drop me a message, and let's create something amazing together!

Author:
Abdul Baset Bappy

10 months ago

1.4k
LinkedIn sign-up form
A clone of LinkedIn sign-up page

Author:
Nomusa Botha

1 year ago

2k
payment card
A payment card is a type of card issued by a financial institution (like a bank) that allows the cardholder to make financial transactions. These transactions can include purchasing goods and services, withdrawing cash, or transferring money. Here’s a description based on the main types of payment cards:

Author:
dev-fab250

8 months ago

655
Profile Form
Enhanced User Profile Form with Stunning Profile and Cover Image Fields

Author:
Steve NGOYA

8 months ago

1.1k
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

Author:
SHARIFUL ISLAM

1 year ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components