Appointment Form

Appointment Form is a HTML template that can be used to create a form for clients to sign up for an appointment. This form is responsive and it looks great on all devices also available in plain HTML and Tailwind CSS.

Preview
Appointment Form
<div class="main-wrapper">
<div class="form-wrapper">
<form
action="https://formbold.com/s/YOUR_KEY"
method="POST">
<div class="mb-5">
<label for="name" class="form-label"> Full Name </label>
<input
type="text"
name="name"
id="name"
placeholder="Full Name"
class="form-input"
/>
</div>
<div class="mb-5">
<label for="phone" class="form-label"> Phone Number </label>
<input
type="text"
name="phone"
id="phone"
placeholder="Enter your phone number"
class="form-input"
/>
</div>
<div class="mb-5">
<label for="email" class="form-label"> Email Address </label>
<input
type="email"
name="email"
id="email"
placeholder="Enter your email"
class="form-input"
/>
</div>
<div class="flex flex-wrap -mx-3">
<div class="w-full sm:w-half px-3">
<div class="mb-5 w-full">
<label for="date" class="form-label"> Date </label>
<input type="date" name="date" id="date" class="form-input" />
</div>
</div>
<div class="w-full sm:w-half px-3">
<div class="mb-5">
<label for="time" class="form-label"> Time </label>
<input type="time" name="time" id="time" class="form-input" />
</div>
</div>
</div>
<div class="mb-5 pt-3">
<label class="form-label form-label-2"> Address Details </label>
<div class="flex flex-wrap -mx-3">
<div class="w-full sm:w-half px-3">
<div class="mb-5">
<input
type="text"
name="area"
id="area"
placeholder="Enter area"
class="form-input"
/>
</div>
</div>
<div class="w-full sm:w-half px-3">
<div class="mb-5">
<input
type="text"
name="city"
id="city"
placeholder="Enter city"
class="form-input"
/>
</div>
</div>
<div class="w-full sm:w-half px-3">
<div class="mb-5">
<input
type="text"
name="state"
id="state"
placeholder="Enter state"
class="form-input"
/>
</div>
</div>
<div class="w-full sm:w-half px-3">
<div class="mb-5">
<input
type="text"
name="post-code"
id="post-code"
placeholder="Post Code"
class="form-input"
/>
</div>
</div>
</div>
</div>
<div>
<button class="btn">Book Appointment</button>
</div>
</form>
</div>
</div>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Inter";
}
.mb-5 {
margin-bottom: 20px;
}
.pt-3 {
padding-top: 12px;
}
.main-wrapper {
display: flex;
align-items: center;
justify-content: center;
padding: 48px;
}
.form-wrapper {
margin: 0 auto;
max-width: 550px;
width: 100%;
background: white;
}
.form-label {
display: block;
font-weight: 500;
font-size: 16px;
color: #07074d;
margin-bottom: 12px;
}
.form-label-2 {
font-weight: 600;
font-size: 20px;
margin-bottom: 20px;
}
.form-input {
width: 100%;
padding: 12px 24px;
border-radius: 6px;
border: 1px solid #e0e0e0;
background: white;
font-weight: 500;
font-size: 16px;
color: #6b7280;
outline: none;
resize: none;
}
.form-input:focus {
border-color: #6a64f1;
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
}
.btn {
text-align: center;
font-size: 16px;
border-radius: 6px;
padding: 14px 32px;
border: none;
font-weight: 600;
background-color: #6a64f1;
color: white;
width: 100%;
cursor: pointer;
}
.btn:hover {
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
}
.-mx-3 {
margin-left: -12px;
margin-right: -12px;
}
.px-3 {
padding-left: 12px;
padding-right: 12px;
}
.flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.w-full {
width: 100%;
}
@media (min-width: 540px) {
.sm\:w-half {
width: 50%;
}
}
</style>