Integrative Pharmacy & Herbal Consultation
Client Intake Form
Client Intake Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Patient Intake Form — Integrative Pharmacy & Herbal Consultation</title>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Mono:wght@300;400;500&family=Spectral:ital,wght@0,300;0,400;1,300&display=swap" rel="stylesheet">
<style>
:root {
--sage: #7a8c6e;
--deep-sage: #4a5c40;
--cream: #f5f0e8;
--warm-white: #faf8f4;
--bark: #6b5040;
--soft-bark: #c4a882;
--ink: #2a2520;
--mist: #e8e2d8;
--gold: #b8973a;
--pale-gold: #f0e8d0;
--border: rgba(122,140,110,0.25);
}
- { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(–warm-white);
font-family: ‘Spectral’, Georgia, serif;
color: var(–ink);
min-height: 100vh;
position: relative;
overflow-x: hidden;
}
body::before {
content: ‘’;
position: fixed;
inset: 0;
background:
radial-gradient(ellipse 80% 60% at 10% 10%, rgba(122,140,110,0.08) 0%, transparent 60%),
radial-gradient(ellipse 60% 80% at 90% 90%, rgba(184,151,58,0.06) 0%, transparent 60%),
url(“data:image/svg+xml,%3Csvg width=‘60’ height=‘60’ viewBox=‘0 0 60 60’ xmlns=‘http://www.w3.org/2000/svg’%3E%3Cg fill=‘none’ fill-rule=‘evenodd’%3E%3Cg fill=’%237a8c6e’ fill-opacity=‘0.04’%3E%3Ccircle cx=‘30’ cy=‘30’ r=‘1’/%3E%3C/g%3E%3C/g%3E%3C/svg%3E”);
pointer-events: none;
z-index: 0;
}
.page-wrap {
position: relative;
z-index: 1;
max-width: 860px;
margin: 0 auto;
padding: 60px 24px 80px;
}
/* ── Header ── */
header {
text-align: center;
margin-bottom: 60px;
animation: fadeDown 0.8s ease both;
}
.clinic-emblem {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 28px;
}
.emblem-line {
width: 80px;
height: 1px;
background: linear-gradient(to right, transparent, var(–sage));
}
.emblem-line.right {
background: linear-gradient(to left, transparent, var(–sage));
}
.emblem-icon {
font-size: 28px;
line-height: 1;
}
.clinic-name {
font-family: ‘Cormorant Garamond’, Georgia, serif;
font-size: clamp(28px, 5vw, 42px);
font-weight: 300;
letter-spacing: 0.08em;
color: var(–deep-sage);
line-height: 1.1;
margin-bottom: 8px;
}
.clinic-sub {
font-family: ‘DM Mono’, monospace;
font-size: 10px;
letter-spacing: 0.25em;
color: var(–sage);
text-transform: uppercase;
margin-bottom: 24px;
}
.form-title {
font-family: ‘Cormorant Garamond’, Georgia, serif;
font-size: clamp(16px, 3vw, 22px);
font-weight: 300;
font-style: italic;
color: var(–bark);
letter-spacing: 0.04em;
}
.header-divider {
width: 120px;
height: 1px;
background: var(–soft-bark);
margin: 20px auto 0;
opacity: 0.5;
}
/* ── Section ── */
.form-section {
background: rgba(255,255,255,0.7);
border: 1px solid var(–border);
border-radius: 2px;
padding: 40px;
margin-bottom: 28px;
backdrop-filter: blur(4px);
animation: fadeUp 0.6s ease both;
position: relative;
overflow: hidden;
}
.form-section::before {
content: ‘’;
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: linear-gradient(to bottom, var(–sage), var(–gold));
opacity: 0.6;
}
.form-section:nth-child(1) { animation-delay: 0.1s; }
.form-section:nth-child(2) { animation-delay: 0.2s; }
.form-section:nth-child(3) { animation-delay: 0.3s; }
.form-section:nth-child(4) { animation-delay: 0.4s; }
.form-section:nth-child(5) { animation-delay: 0.5s; }
.form-section:nth-child(6) { animation-delay: 0.6s; }
.form-section:nth-child(7) { animation-delay: 0.7s; }
.section-header {
display: flex;
align-items: baseline;
gap: 14px;
margin-bottom: 32px;
padding-bottom: 16px;
border-bottom: 1px solid var(–mist);
}
.section-num {
font-family: ‘DM Mono’, monospace;
font-size: 10px;
letter-spacing: 0.2em;
color: var(–gold);
text-transform: uppercase;
min-width: 32px;
}
.section-title {
font-family: ‘Cormorant Garamond’, Georgia, serif;
font-size: 20px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(–deep-sage);
}
/* ── Fields ── */
.field-grid {
display: grid;
gap: 20px;
}
.field-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.field-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.field-grid.cols-2-1 { grid-template-columns: 2fr 1fr; }
.field {
display: flex;
flex-direction: column;
gap: 7px;
}
.field.span-2 { grid-column: span 2; }
.field.span-3 { grid-column: span 3; }
.field.span-full { grid-column: 1 / -1; }
label {
font-family: ‘DM Mono’, monospace;
font-size: 10px;
letter-spacing: 0.18em;
color: var(–sage);
text-transform: uppercase;
}
label .req {
color: var(–gold);
margin-left: 2px;
}
input[type=“text”],
input[type=“email”],
input[type=“tel”],
input[type=“date”],
input[type=“number”],
select,
textarea {
font-family: ‘Spectral’, Georgia, serif;
font-size: 15px;
font-weight: 300;
color: var(–ink);
background: var(–warm-white);
border: 1px solid var(–mist);
border-bottom: 1px solid var(–soft-bark);
border-radius: 1px;
padding: 10px 14px;
width: 100%;
transition: all 0.2s ease;
outline: none;
appearance: none;
}
input:focus,
select:focus,
textarea:focus {
border-color: var(–sage);
background: #fff;
box-shadow: 0 2px 12px rgba(122,140,110,0.1);
}
textarea {
resize: vertical;
min-height: 90px;
line-height: 1.6;
}
select {
background-image: url(“data:image/svg+xml,%3Csvg xmlns=‘http://www.w3.org/2000/svg’ width=‘12’ height=‘8’ viewBox=‘0 0 12 8’%3E%3Cpath d=‘M1 1l5 5 5-5’ stroke=’%237a8c6e’ stroke-width=‘1.5’ fill=‘none’ stroke-linecap=‘round’/%3E%3C/svg%3E”);
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
cursor: pointer;
}
/* ── Checkboxes & Radios ── */
.check-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
margin-top: 4px;
}
.check-item {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
padding: 8px 12px;
border: 1px solid transparent;
border-radius: 2px;
transition: all 0.2s ease;
}
.check-item:hover {
background: rgba(122,140,110,0.06);
border-color: var(–border);
}
.check-item input[type=“checkbox”],
.check-item input[type=“radio”] {
width: 16px;
height: 16px;
accent-color: var(–deep-sage);
cursor: pointer;
flex-shrink: 0;
}
.check-item span {
font-family: ‘Spectral’, serif;
font-size: 14px;
font-weight: 300;
color: var(–ink);
line-height: 1.3;
}
/* ── Medication rows ── */
.med-table {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
}
.med-table th {
font-family: ‘DM Mono’, monospace;
font-size: 9px;
letter-spacing: 0.2em;
color: var(–sage);
text-transform: uppercase;
text-align: left;
padding: 0 8px 12px;
border-bottom: 1px solid var(–mist);
font-weight: 400;
}
.med-table td {
padding: 6px 8px;
vertical-align: top;
}
.med-table input {
font-size: 13px;
padding: 7px 10px;
border-color: var(–mist);
}
.med-table tr:not(:last-child) td { border-bottom: 1px solid rgba(232,226,216,0.5); }
.add-row-btn {
font-family: ‘DM Mono’, monospace;
font-size: 10px;
letter-spacing: 0.15em;
color: var(–sage);
text-transform: uppercase;
background: none;
border: 1px dashed var(–border);
padding: 10px 20px;
cursor: pointer;
border-radius: 2px;
margin-top: 12px;
transition: all 0.2s ease;
width: 100%;
}
.add-row-btn:hover {
background: rgba(122,140,110,0.06);
border-color: var(–sage);
color: var(–deep-sage);
}
/* ── Rating scale ── */
.rating-row {
display: flex;
flex-direction: column;
gap: 12px;
}
.rating-item {
display: flex;
align-items: center;
gap: 16px;
}
.rating-label {
font-family: ‘Spectral’, serif;
font-size: 14px;
font-weight: 300;
color: var(–ink);
min-width: 200px;
flex-shrink: 0;
}
.rating-scale {
display: flex;
gap: 6px;
align-items: center;
}
.rating-scale span {
font-family: ‘DM Mono’, monospace;
font-size: 9px;
color: var(–sage);
letter-spacing: 0.1em;
}
.rating-scale input[type=“range”] {
width: 160px;
accent-color: var(–deep-sage);
border: none;
background: none;
padding: 0;
}
/* ── Consent ── */
.consent-box {
background: var(–pale-gold);
border: 1px solid rgba(184,151,58,0.25);
border-radius: 2px;
padding: 24px;
margin-top: 8px;
}
.consent-box p {
font-family: ‘Spectral’, serif;
font-size: 13px;
font-weight: 300;
line-height: 1.8;
color: var(–bark);
margin-bottom: 16px;
}
.consent-box p:last-of-type { margin-bottom: 0; }
/* ── Signature ── */
.sig-area {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 24px;
align-items: end;
margin-top: 16px;
}
.sig-line {
border-bottom: 1px solid var(–soft-bark);
padding-bottom: 8px;
}
.sig-x {
font-family: ‘Cormorant Garamond’, serif;
font-size: 28px;
color: var(–soft-bark);
line-height: 1;
padding-bottom: 4px;
font-style: italic;
}
/* ── Submit ── */
.form-footer {
text-align: center;
margin-top: 48px;
animation: fadeUp 0.8s ease 0.7s both;
}
.submit-btn {
font-family: ‘Cormorant Garamond’, Georgia, serif;
font-size: 17px;
font-weight: 600;
letter-spacing: 0.12em;
color: var(–warm-white);
background: linear-gradient(135deg, var(–deep-sage), var(–sage));
border: none;
padding: 16px 56px;
border-radius: 2px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.submit-btn::after {
content: ‘’;
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent);
opacity: 0;
transition: opacity 0.3s;
}
.submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(74,92,64,0.3);
}
.submit-btn:hover::after { opacity: 1; }
.submit-btn:active { transform: translateY(0); }
.footer-note {
font-family: ‘DM Mono’, monospace;
font-size: 10px;
letter-spacing: 0.12em;
color: var(–soft-bark);
margin-top: 16px;
text-transform: uppercase;
}
/* ── Animations ── */
@keyframes fadeDown {
from { opacity: 0; transform: translateY(-16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Responsive ── */
@media (max-width: 640px) {
.form-section { padding: 28px 20px; }
.field-grid.cols-2,
.field-grid.cols-3,
.field-grid.cols-2-1 { grid-template-columns: 1fr; }
.field.span-2, .field.span-3 { grid-column: span 1; }
.sig-area { grid-template-columns: 1fr; gap: 16px; }
.rating-item { flex-wrap: wrap; }
.rating-label { min-width: unset; }
}
/* print */
@media print {
body::before { display: none; }
.form-section { break-inside: avoid; box-shadow: none; }
.submit-btn { display: none; }
}
</style>
</head>
<body>
<div class="page-wrap">
<!-- Header -->
<header>
<div class="clinic-emblem">
<div class="emblem-line"></div>
<div class="emblem-icon">🌿</div>
<div class="emblem-line right"></div>
</div>
<div class="clinic-name">Integrative Pharmacy</div>
<div class="clinic-sub">Medication Therapy Management & Herbal Consultation</div>
<div class="form-title">Patient Intake Form</div>
<div class="header-divider"></div>
</header>
<form id="intakeForm" novalidate>
```
<!-- 01 · Patient Information -->
<div class="form-section">
<div class="section-header">
<span class="section-num">01</span>
<span class="section-title">Patient Information</span>
</div>
<div class="field-grid cols-2">
<div class="field">
<label>Legal First Name <span class="req">*</span></label>
<input type="text" name="firstName" required placeholder="Given name">
</div>
<div class="field">
<label>Legal Last Name <span class="req">*</span></label>
<input type="text" name="lastName" required placeholder="Family name">
</div>
<div class="field">
<label>Date of Birth <span class="req">*</span></label>
<input type="date" name="dob" required>
</div>
<div class="field">
<label>Biological Sex</label>
<select name="sex">
<option value="">— Select —</option>
<option>Male</option>
<option>Female</option>
<option>Intersex</option>
<option>Prefer not to say</option>
</select>
</div>
<div class="field">
<label>Gender Identity</label>
<input type="text" name="gender" placeholder="e.g. Non-binary, Woman, Man …">
</div>
<div class="field">
<label>Preferred Pronouns</label>
<input type="text" name="pronouns" placeholder="e.g. she/her, they/them">
</div>
<div class="field span-2">
<label>Mailing Address</label>
<input type="text" name="address" placeholder="Street, City, State, ZIP">
</div>
<div class="field">
<label>Phone <span class="req">*</span></label>
<input type="tel" name="phone" required placeholder="(555) 000-0000">
</div>
<div class="field">
<label>Email</label>
<input type="email" name="email" placeholder="name@email.com">
</div>
<div class="field">
<label>Emergency Contact Name</label>
<input type="text" name="emergencyName" placeholder="Full name">
</div>
<div class="field">
<label>Emergency Contact Phone</label>
<input type="tel" name="emergencyPhone" placeholder="(555) 000-0000">
</div>
<div class="field span-2">
<label>Referring Practitioner / Clinic</label>
<input type="text" name="referral" placeholder="Name and practice (if applicable)">
</div>
</div>
</div>
<!-- 02 · Reason for Consultation -->
<div class="form-section">
<div class="section-header">
<span class="section-num">02</span>
<span class="section-title">Reason for Consultation</span>
</div>
<div class="field-grid">
<div class="field">
<label>Type of Consultation <span class="req">*</span></label>
<div class="check-grid" style="grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));">
<label class="check-item"><input type="checkbox" name="consultType" value="mtm"> <span>Medication Therapy Management (MTM)</span></label>
<label class="check-item"><input type="checkbox" name="consultType" value="herbal"> <span>Herbal / Botanical Consultation</span></label>
<label class="check-item"><input type="checkbox" name="consultType" value="interaction"> <span>Drug–Herb Interaction Review</span></label>
<label class="check-item"><input type="checkbox" name="consultType" value="reconciliation"> <span>Medication Reconciliation</span></label>
<label class="check-item"><input type="checkbox" name="consultType" value="adherence"> <span>Adherence Counseling</span></label>
<label class="check-item"><input type="checkbox" name="consultType" value="wellness"> <span>Wellness / Preventive Health</span></label>
</div>
</div>
<div class="field">
<label>Primary Health Concerns / Goals</label>
<textarea name="primaryConcerns" placeholder="Please describe what brings you in today and what you hope to achieve …" style="min-height:110px;"></textarea>
</div>
<div class="field">
<label>Duration of Concern(s)</label>
<input type="text" name="duration" placeholder="e.g. 3 months, ongoing since 2022 …">
</div>
</div>
</div>
<!-- 03 · Current Medications -->
<div class="form-section">
<div class="section-header">
<span class="section-num">03</span>
<span class="section-title">Current Medications & Supplements</span>
</div>
<p style="font-size:13px;color:var(--bark);font-style:italic;margin-bottom:20px;line-height:1.7;">
Please list all prescription medications, over-the-counter drugs, vitamins, minerals, and herbal products you currently take.
</p>
<table class="med-table" id="medTable">
<thead>
<tr>
<th style="width:28%">Medication / Supplement Name</th>
<th style="width:16%">Dose / Strength</th>
<th style="width:16%">Frequency</th>
<th style="width:22%">Reason for Use</th>
<th style="width:18%">Prescriber (if Rx)</th>
</tr>
</thead>
<tbody id="medBody">
<tr>
<td><input type="text" placeholder="e.g. Metformin, Ashwagandha…"></td>
<td><input type="text" placeholder="e.g. 500 mg"></td>
<td><input type="text" placeholder="e.g. Twice daily"></td>
<td><input type="text" placeholder="e.g. Blood sugar"></td>
<td><input type="text" placeholder="Dr. Name"></td>
</tr>
<tr>
<td><input type="text"></td><td><input type="text"></td>
<td><input type="text"></td><td><input type="text"></td><td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td><td><input type="text"></td>
<td><input type="text"></td><td><input type="text"></td><td><input type="text"></td>
</tr>
</tbody>
</table>
<button type="button" class="add-row-btn" onclick="addMedRow()">+ Add another row</button>
</div>
<!-- 04 · Medical History -->
<div class="form-section">
<div class="section-header">
<span class="section-num">04</span>
<span class="section-title">Medical History</span>
</div>
<div class="field-grid">
<div class="field">
<label>Current Diagnoses / Chronic Conditions</label>
<div class="check-grid">
<label class="check-item"><input type="checkbox" name="condition" value="diabetes"> <span>Diabetes / Pre-diabetes</span></label>
<label class="check-item"><input type="checkbox" name="condition" value="hypertension"> <span>Hypertension</span></label>
<label class="check-item"><input type="checkbox" name="condition" value="heartDisease"> <span>Heart Disease</span></label>
<label class="check-item"><input type="checkbox" name="condition" value="thyroid"> <span>Thyroid Disorder</span></label>
<label class="check-item"><input type="checkbox" name="condition" value="asthma"> <span>Asthma / COPD</span></label>
<label class="check-item"><input type="checkbox" name="condition" value="gerd"> <span>GERD / GI Disorder</span></label>
<label class="check-item"><input type="checkbox" name="condition" value="arthritis"> <span>Arthritis / Joint Pain</span></label>
<label class="check-item"><input type="checkbox" name="condition" value="anxiety"> <span>Anxiety / Depression</span></label>
<label class="check-item"><input type="checkbox" name="condition" value="insomnia"> <span>Insomnia / Sleep Issues</span></label>
<label class="check-item"><input type="checkbox" name="condition" value="autoimmune"> <span>Autoimmune Condition</span></label>
<label class="check-item"><input type="checkbox" name="condition" value="cancer"> <span>Cancer (current/history)</span></label>
<label class="check-item"><input type="checkbox" name="condition" value="kidney"> <span>Kidney Disease</span></label>
<label class="check-item"><input type="checkbox" name="condition" value="liver"> <span>Liver Disease</span></label>
<label class="check-item"><input type="checkbox" name="condition" value="hormonal"> <span>Hormonal Imbalance</span></label>
</div>
</div>
<div class="field">
<label>Other Diagnoses / Conditions</label>
<textarea name="otherConditions" placeholder="List any conditions not included above …"></textarea>
</div>
<div class="field-grid cols-2" style="grid-column: 1/-1;">
<div class="field">
<label>Past Surgeries / Major Procedures</label>
<textarea name="surgeries" placeholder="Surgery name, approximate year …" style="min-height:70px;"></textarea>
</div>
<div class="field">
<label>Family Medical History (relevant)</label>
<textarea name="familyHistory" placeholder="e.g. Father: Type 2 diabetes, Mother: Thyroid …" style="min-height:70px;"></textarea>
</div>
</div>
</div>
</div>
<!-- 05 · Allergies & Adverse Reactions -->
<div class="form-section">
<div class="section-header">
<span class="section-num">05</span>
<span class="section-title">Allergies & Adverse Reactions</span>
</div>
<div class="field-grid cols-2">
<div class="field">
<label>Drug Allergies</label>
<textarea name="drugAllergies" placeholder="Drug name → reaction (e.g. Penicillin → hives)" style="min-height:80px;"></textarea>
</div>
<div class="field">
<label>Herbal / Botanical Sensitivities</label>
<textarea name="herbalAllergies" placeholder="e.g. Echinacea → rash, Chamomile → GI upset" style="min-height:80px;"></textarea>
</div>
<div class="field">
<label>Food Allergies / Intolerances</label>
<textarea name="foodAllergies" placeholder="e.g. Gluten, Dairy, Shellfish …" style="min-height:70px;"></textarea>
</div>
<div class="field">
<label>Environmental Allergies</label>
<textarea name="envAllergies" placeholder="e.g. Latex, Pollen, Mold …" style="min-height:70px;"></textarea>
</div>
<div class="field span-2">
<label>Medications / Supplements Previously Tried Without Success</label>
<textarea name="failedMeds" placeholder="Include reason discontinued if known …"></textarea>
</div>
</div>
</div>
<!-- 06 · Lifestyle & Wellness -->
<div class="form-section">
<div class="section-header">
<span class="section-num">06</span>
<span class="section-title">Lifestyle & Wellness</span>
</div>
<div class="field-grid cols-2">
<div class="field">
<label>Diet / Eating Pattern</label>
<select name="diet">
<option value="">— Select —</option>
<option>Omnivore</option>
<option>Vegetarian</option>
<option>Vegan</option>
<option>Pescatarian</option>
<option>Paleo / Ancestral</option>
<option>Keto / Low-carb</option>
<option>Mediterranean</option>
<option>Other / Mixed</option>
</select>
</div>
<div class="field">
<label>Physical Activity Level</label>
<select name="activity">
<option value="">— Select —</option>
<option>Sedentary (little to no exercise)</option>
<option>Lightly active (1–3 days/week)</option>
<option>Moderately active (3–5 days/week)</option>
<option>Very active (6–7 days/week)</option>
<option>Athlete / Daily intense training</option>
</select>
</div>
<div class="field">
<label>Average Sleep (hours/night)</label>
<input type="number" name="sleep" min="0" max="24" step="0.5" placeholder="e.g. 7">
</div>
<div class="field">
<label>Stress Level (1 = Low, 10 = Extreme)</label>
<div style="display:flex;align-items:center;gap:12px;margin-top:4px;">
<input type="range" name="stress" min="1" max="10" value="5" id="stressRange" style="accent-color:var(--deep-sage);width:100%;border:none;background:none;padding:0;">
<span id="stressVal" style="font-family:'DM Mono',monospace;font-size:13px;color:var(--deep-sage);min-width:20px;text-align:center;">5</span>
</div>
</div>
<div class="field">
<label>Tobacco / Nicotine Use</label>
<select name="tobacco">
<option value="">— Select —</option>
<option>Never</option>
<option>Former user</option>
<option>Occasional</option>
<option>Daily — cigarettes</option>
<option>Daily — vaping / e-cig</option>
<option>Other (chew, pipe…)</option>
</select>
</div>
<div class="field">
<label>Alcohol Use</label>
<select name="alcohol">
<option value="">— Select —</option>
<option>None</option>
<option>Rarely (a few times a year)</option>
<option>Socially (1–2 drinks/week)</option>
<option>Moderate (3–7 drinks/week)</option>
<option>Heavy (8+ drinks/week)</option>
</select>
</div>
<div class="field">
<label>Recreational / Cannabis Use</label>
<select name="cannabis">
<option value="">— Select —</option>
<option>None</option>
<option>Occasional</option>
<option>Regular (weekly+)</option>
<option>Daily</option>
</select>
</div>
<div class="field">
<label>Reproductive Status (if applicable)</label>
<select name="reproStatus">
<option value="">— Select —</option>
<option>Not applicable</option>
<option>Currently pregnant</option>
<option>Breastfeeding / Chestfeeding</option>
<option>Trying to conceive</option>
<option>Post-menopausal</option>
<option>Using hormonal contraception</option>
</select>
</div>
<div class="field span-2">
<label>Other Lifestyle Factors to Share</label>
<textarea name="lifestyle" placeholder="Travel, shift work, occupational exposures, significant stressors …" style="min-height:70px;"></textarea>
</div>
</div>
</div>
<!-- 07 · Herbal / Integrative Health Experience -->
<div class="form-section">
<div class="section-header">
<span class="section-num">07</span>
<span class="section-title">Herbal & Integrative Health Experience</span>
</div>
<div class="field-grid">
<div class="field">
<label>Have you used herbal or natural remedies before?</label>
<div class="check-grid" style="grid-template-columns:repeat(3,1fr);max-width:400px;">
<label class="check-item"><input type="radio" name="herbalExp" value="yes"> <span>Yes</span></label>
<label class="check-item"><input type="radio" name="herbalExp" value="some"> <span>Some</span></label>
<label class="check-item"><input type="radio" name="herbalExp" value="no"> <span>No</span></label>
</div>
</div>
<div class="field">
<label>Herbs / Botanicals Currently or Recently Used</label>
<textarea name="currentHerbs" placeholder="e.g. Turmeric, St. John's Wort, Valerian, CBD …"></textarea>
</div>
<div class="field">
<label>Other Integrative Practices</label>
<div class="check-grid">
<label class="check-item"><input type="checkbox" name="integrative" value="acupuncture"> <span>Acupuncture</span></label>
<label class="check-item"><input type="checkbox" name="integrative" value="chiropractic"> <span>Chiropractic</span></label>
<label class="check-item"><input type="checkbox" name="integrative" value="naturopath"> <span>Naturopathic Medicine</span></label>
<label class="check-item"><input type="checkbox" name="integrative" value="ayurveda"> <span>Ayurveda</span></label>
<label class="check-item"><input type="checkbox" name="integrative" value="tcm"> <span>Traditional Chinese Medicine</span></label>
<label class="check-item"><input type="checkbox" name="integrative" value="homeopathy"> <span>Homeopathy</span></label>
<label class="check-item"><input type="checkbox" name="integrative" value="massage"> <span>Massage Therapy</span></label>
<label class="check-item"><input type="checkbox" name="integrative" value="meditation"> <span>Meditation / Mindfulness</span></label>
</div>
</div>
<div class="field">
<label>Goals for Integrative / Herbal Support</label>
<textarea name="herbalGoals" placeholder="What are you hoping herbs or integrative approaches can help with? …" style="min-height:80px;"></textarea>
</div>
<div class="field">
<label>Additional Notes for the Pharmacist / Herbalist</label>
<textarea name="additionalNotes" placeholder="Anything else you'd like us to know before your consultation …" style="min-height:80px;"></textarea>
</div>
</div>
</div>
<!-- 08 · Consent & Signature -->
<div class="form-section">
<div class="section-header">
<span class="section-num">08</span>
<span class="section-title">Consent & Acknowledgment</span>
</div>
<div class="consent-box">
<p>I authorize the pharmacist(s) and herbal consultant(s) at this practice to review my medical and medication history for the purpose of providing medication therapy management and/or herbal consultation services.</p>
<p>I understand that information shared during this consultation is confidential and will be used solely for the purpose of improving my health outcomes. I acknowledge that herbal and integrative recommendations are complementary in nature and do not replace advice from my primary care team.</p>
<p>I consent to the secure electronic storage of this intake form and understand I may withdraw consent and request record deletion at any time by contacting this practice in writing.</p>
</div>
<div class="field-grid cols-2" style="margin-top:24px;">
<div class="field">
<label>Signature <span class="req">*</span></label>
<div class="sig-area" style="grid-template-columns: auto 1fr; gap: 12px;">
<div class="sig-x">×</div>
<input type="text" name="signature" required placeholder="Type full legal name to sign">
</div>
</div>
<div class="field">
<label>Date <span class="req">*</span></label>
<input type="date" name="signDate" required>
</div>
<div class="field span-2">
<label>Relationship to Patient (if signing on behalf)</label>
<input type="text" name="relationship" placeholder="e.g. Parent / Legal Guardian / Power of Attorney (leave blank if self)">
</div>
</div>
<div style="margin-top:24px;">
<label class="check-item" style="padding:12px 16px;border:1px solid var(--border);border-radius:2px;cursor:pointer;">
<input type="checkbox" name="consentCheck" required>
<span style="font-family:'Spectral',serif;font-size:14px;">I have read and agree to the above consent statement <span style="color:var(--gold);">*</span></span>
</label>
</div>
</div>
<!-- Footer / Submit -->
<div class="form-footer">
<button type="submit" class="submit-btn">Submit Intake Form</button>
<div class="footer-note">All information is protected under HIPAA & applicable privacy law</div>
</div>
```
</form>
</div>
<script>
// Stress slider live value
const stressRange = document.getElementById('stressRange');
const stressVal = document.getElementById('stressVal');
stressRange.addEventListener('input', () => { stressVal.textContent = stressRange.value; });
// Add medication row
function addMedRow() {
const tbody = document.getElementById('medBody');
const row = document.createElement('tr');
row.innerHTML = `
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>`;
tbody.appendChild(row);
row.querySelector('input').focus();
}
// Set today's date on sign date
const today = new Date().toISOString().split('T')[0];
document.querySelector('[name="signDate"]').value = today;
// Submit handler
document.getElementById('intakeForm').addEventListener('submit', function(e) {
e.preventDefault();
const consent = document.querySelector('[name="consentCheck"]');
const sig = document.querySelector('[name="signature"]');
if (!consent.checked) {
consent.closest('.check-item').style.borderColor = 'var(--gold)';
consent.closest('.check-item').scrollIntoView({ behavior: 'smooth', block: 'center' });
return;
}
if (!sig.value.trim()) {
sig.focus();
return;
}
const btn = document.querySelector('.submit-btn');
btn.textContent = '✓ Form Submitted';
btn.style.background = 'linear-gradient(135deg, var(--bark), var(--gold))';
btn.disabled = true;
window.scrollTo({ top: 0, behavior: 'smooth' });
});
</script>
</body>
</html>