#aadhar-appointment-form {
--aaf-panel: #fbfaf7;
--aaf-card: #ffffff;
--aaf-text: #243127;
--aaf-muted: #6f776f;
--aaf-border: #e4e2da;
--aaf-accent: #6f7f50;
--aaf-accent-bg: #eef2e6;
max-width: 520px;
margin: 0 auto;
font-family: inherit;
}
#aadhar-appointment-form *,
#aadhar-appointment-form *::before,
#aadhar-appointment-form *::after {
box-sizing: border-box;
}
#aadhar-appointment-form .booking {
background: var(--aaf-panel);
border: 1px solid var(--aaf-border);
border-radius: 20px;
padding: 28px;
}
#aadhar-appointment-form .head {
text-align: center;
margin-bottom: 24px;
}
#aadhar-appointment-form .eyebrow {
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--aaf-muted);
font-weight: 700;
margin-bottom: 7px;
}
#aadhar-appointment-form h2 {
margin: 0;
color: var(--aaf-text);
font-size: 28px;
line-height: 1.2;
font-weight: 700;
}
#aadhar-appointment-form .sub {
margin: 8px 0 0;
color: var(--aaf-muted);
font-size: 14px;
}
#aadhar-appointment-form .field {
margin-top: 18px;
}
#aadhar-appointment-form label.main {
display: block;
color: var(--aaf-text);
font-size: 14px;
font-weight: 650;
margin-bottom: 8px;
}
#aadhar-appointment-form input[type="text"],
#aadhar-appointment-form input[type="tel"],
#aadhar-appointment-form select {
width: 100%;
height: 50px;
border: 1px solid var(--aaf-border);
border-radius: 11px;
background: #fff;
color: var(--aaf-text);
padding: 0 14px;
font-size: 15px;
outline: none;
font-family: inherit;
}
#aadhar-appointment-form input:focus,
#aadhar-appointment-form select:focus {
border-color: var(--aaf-accent);
box-shadow: 0 0 0 3px var(--aaf-accent-bg);
}
#aadhar-appointment-form .dates {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#aadhar-appointment-form .date {
position: relative;
cursor: pointer;
margin: 0;
}
#aadhar-appointment-form .date input {
position: absolute;
opacity: 0;
pointer-events: none;
}
#aadhar-appointment-form .date-card {
display: flex;
align-items: center;
gap: 11px;
border: 1px solid var(--aaf-border);
border-radius: 12px;
background: #fff;
padding: 13px 14px;
min-height: 64px;
transition: .18s ease;
}
#aadhar-appointment-form .date-card .day {
display: block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--aaf-muted);
font-weight: 700;
}
#aadhar-appointment-form .date-card .date-text {
display: block;
font-size: 15px;
color: var(--aaf-text);
font-weight: 650;
margin-top: 2px;
}
#aadhar-appointment-form .date input:checked + .date-card {
border-color: var(--aaf-accent);
background: var(--aaf-accent-bg);
}
#aadhar-appointment-form .radio {
width: 18px;
height: 18px;
border: 1px solid #bfc2b8;
border-radius: 50%;
flex: 0 0 auto;
display: grid;
place-items: center;
}
#aadhar-appointment-form .date input:checked + .date-card .radio {
border-color: var(--aaf-accent);
}
#aadhar-appointment-form .date input:checked + .date-card .radio::after {
content: "";
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--aaf-accent);
}
#aadhar-appointment-form .submit {
width: 100%;
height: 52px;
border: 0;
border-radius: 12px;
background: var(--aaf-accent);
color: var(--aaf-text);
font-size: 16px;
font-weight: 750;
cursor: pointer;
margin-top: 22px;
font-family: inherit;
transition: .2s ease;
}
#aadhar-appointment-form .submit:hover {
opacity: .9;
}
#aadhar-appointment-form .submit:disabled {
opacity: .6;
cursor: not-allowed;
}
#aadhar-appointment-form .note {
text-align: center;
color: var(--aaf-muted);
font-size: 12px;
margin: 12px 0 0;
}
#aadhar-appointment-form #form-message {
margin-top: 14px;
text-align: center;
font-size: 14px;
line-height: 1.5;
}
#aadhar-appointment-form #form-message.success {
color: #3d6844;
}
#aadhar-appointment-form #form-message.error {
color: #a33a3a;
}
@media (max-width: 520px) {
#aadhar-appointment-form .booking {
padding: 22px 17px;
border-radius: 16px;
}
#aadhar-appointment-form h2 {
font-size: 24px;
}
#aadhar-appointment-form .dates {
grid-template-columns: 1fr;
}
}
(function () {
const formContainer =
document.getElementById("aadhar-appointment-form");
if (!formContainer) return;
const submitButton =
document.getElementById("aaf-submit");
const message =
document.getElementById("form-message");
const nameInput =
document.getElementById("aaf-name");
const mobileInput =
document.getElementById("aaf-mobile");
const problemInput =
document.getElementById("aaf-problem");
/*
* YOUR GOOGLE APPS SCRIPT WEB APP URL
*/
const scriptURL =
"https://script.google.com/macros/s/AKfycbxHiiHD0fim5S-EK_CIDQSn2ucR-jEgKdgm9uGYTaQH06UcQdT4AxW5rKbyqLwaBZK5/exec";
/*
* Allow only numbers in mobile field
*/
mobileInput.addEventListener("input", function () {
this.value = this.value
.replace(/\D/g, "")
.slice(0, 10);
});
/*
* Show message
*/
function showMessage(text, type) {
message.textContent = text;
message.className = type || "";
}
/*
* Submit appointment
*/
submitButton.addEventListener("click", async function () {
showMessage("", "");
const name =
nameInput.value.trim();
const mobile =
mobileInput.value.trim();
const healthConcern =
problemInput.value;
const selectedDate =
document.querySelector(
'input[name="aaf-appointment-date"]:checked'
);
/*
* Validation
*/
if (!name) {
showMessage(
"Please enter your name.",
"error"
);
nameInput.focus();
return;
}
if (!/^[6-9]\d{9}$/.test(mobile)) {
showMessage(
"Please enter a valid 10-digit mobile number.",
"error"
);
mobileInput.focus();
return;
}
if (!healthConcern) {
showMessage(
"Please select your health problem.",
"error"
);
problemInput.focus();
return;
}
if (!selectedDate) {
showMessage(
"Please select an appointment date.",
"error"
);
return;
}
/*
* Prepare data
*/
const appointmentData = {
name: name,
mobile: mobile,
healthConcern: healthConcern,
appointmentDate: selectedDate.value
};
/*
* Button loading state
*/
submitButton.disabled = true;
submitButton.textContent = "Booking...";
try {
/*
* Send data to Google Apps Script
*/
await fetch(scriptURL, {
method: "POST",
mode: "no-cors",
headers: {
"Content-Type": "text/plain;charset=utf-8"
},
body: JSON.stringify(appointmentData)
});
/*
* Since no-cors doesn't allow us to read
* Google's response, successful request
* is treated as submitted.
*/
/*
* Hide the complete booking form
*/
formContainer.innerHTML = `
`;
} catch (error) {
console.error(error);
showMessage(
"Something went wrong. Please try again.",
"error"
);
}
/*
* Restore button
*/
submitButton.disabled = false;
submitButton.textContent =
"Book Appointment";
});
})();
Aadhar Ayurved
Book Your Appointment
Choose your preferred date and share a few details.
Select your health problem
Joint Pain
Knee Pain
Back Pain
Neck Pain
Sciatica
Psoriasis
Acidity / Digestive Issues
Weight Management
Diabetes Management
Stress Management
Other
Our team will contact you to confirm your appointment.
✓
Appointment Request Received!
Thank you! Your appointment request has been received. Our team will contact you shortly.