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.
<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><inputtype="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><inputtype="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><inputtype="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><inputtype="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><inputtype="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"><inputtype="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"><inputtype="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"><inputtype="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"><inputtype="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>