Fully Working HTML 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. It will fully work if you apply FormBold API on it.

Preview
Fully Working HTML Appointment Form
<div class="formbold-main-wrapper">
<!-- Author: FormBold Team -->
<!-- Learn More: https://formbold.com -->
<div class="formbold-form-wrapper">
<form action="https://formbold.com/s/FORM_ID" method="POST">
<div class="formbold-mb-5">
<label for="name" class="formbold-form-label"> Full Name </label>
<input
type="text"
name="name"
id="name"
placeholder="Full Name"
class="formbold-form-input"
/>
</div>
<div class="formbold-mb-5">
<label for="phone" class="formbold-form-label"> Phone Number </label>
<input
type="text"
name="phone"
id="phone"
placeholder="Enter your phone number"
class="formbold-form-input"
/>
</div>
<div class="formbold-mb-5">
<label for="email" class="formbold-form-label"> Email Address </label>
<input
type="email"
name="email"
id="email"
placeholder="Enter your email"
class="formbold-form-input"
/>
</div>
<div class="flex flex-wrap formbold--mx-3">
<div class="w-full sm:w-half formbold-px-3">
<div class="formbold-mb-5 w-full">
<label for="date" class="formbold-form-label"> Date </label>
<input
type="date"
name="date"
id="date"
class="formbold-form-input"
/>
</div>
</div>
<div class="w-full sm:w-half formbold-px-3">
<div class="formbold-mb-5">
<label for="time" class="formbold-form-label"> Time </label>
<input
type="time"
name="time"
id="time"
class="formbold-form-input"
/>
</div>
</div>
</div>
<div class="formbold-mb-5 formbold-pt-3">
<label class="formbold-form-label formbold-form-label-2">
Address Details
</label>
<div class="flex flex-wrap formbold--mx-3">
<div class="w-full sm:w-half formbold-px-3">
<div class="formbold-mb-5">
<input
type="text"
name="area"
id="area"
placeholder="Enter area"
class="formbold-form-input"
/>
</div>
</div>
<div class="w-full sm:w-half formbold-px-3">
<div class="formbold-mb-5">
<input
type="text"
name="city"
id="city"
placeholder="Enter city"
class="formbold-form-input"
/>
</div>
</div>
<div class="w-full sm:w-half formbold-px-3">
<div class="formbold-mb-5">
<input
type="text"
name="state"
id="state"
placeholder="Enter state"
class="formbold-form-input"
/>
</div>
</div>
<div class="w-full sm:w-half formbold-px-3">
<div class="formbold-mb-5">
<input
type="text"
name="post-code"
id="post-code"
placeholder="Post Code"
class="formbold-form-input"
/>
</div>
</div>
</div>
</div>
<div>
<button class="formbold-btn">Book Appointment</button>
</div>
</form>
</div>
</div>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Inter", Arial, Helvetica, sans-serif;
}
.formbold-mb-5 {
margin-bottom: 20px;
}
.formbold-pt-3 {
padding-top: 12px;
}
.formbold-main-wrapper {
display: flex;
align-items: center;
justify-content: center;
padding: 48px;
}
.formbold-form-wrapper {
margin: 0 auto;
max-width: 550px;
width: 100%;
background: white;
}
.formbold-form-label {
display: block;
font-weight: 500;
font-size: 16px;
color: #07074d;
margin-bottom: 12px;
}
.formbold-form-label-2 {
font-weight: 600;
font-size: 20px;
margin-bottom: 20px;
}
.formbold-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;
}
.formbold-form-input:focus {
border-color: #6a64f1;
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
}
.formbold-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;
}
.formbold-btn:hover {
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
}
.formbold--mx-3 {
margin-left: -12px;
margin-right: -12px;
}
.formbold-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>