How to Build a Clinic Appointment Form That Notifies on WhatsApp

Clinic front desks live on WhatsApp. Patients already message about slots, reports, and follow-ups. Your website form still dumps enquiries into an email inbox that gets checked between appointments. This guide shows how to build a clinic appointment form that notifies on WhatsApp: structured fields for service and preferred date, one HTML form, no backend on the clinic site.

The goal is not a full HIS or booking calendar. It is a clean request form that lands as a readable WhatsApp message so staff can confirm, reschedule, or call back while the patient is still deciding.

What you’ll need

A clinic website page where you can paste HTML (or a builder that accepts custom form fields and an action URL)
A free FormsReach API key
For WhatsApp delivery: a Pro or Agency plan and a staff WhatsApp number verified with a one-time OTP

No PHP on the marketing site, no WordPress plugin stack, no “serverless function just for appointments.”

Why a generic contact form fails clinics

A three-field “name, email, message” form forces every patient to write free text. Staff then re-ask the same questions in chat:

Missing field	What staff still has to ask
Service / visit type	Consult, follow-up, vaccine, lab report pickup?
Preferred date	When do they want to come?
Phone	How do we call if WhatsApp is muted?
Existing patient?	New registration vs return visit

That back-and-forth burns minutes per lead. On mobile, many people never finish a long chat when a short form would have captured the same data once.

A dedicated appointment form keeps the brand page, enforces required fields, and still notifies on the channel the front desk actually watches. For the broader form-to-WhatsApp pattern, see How to send website form submissions to WhatsApp.

Field schema for a clinic appointment form

Use stable name attributes. Notifications and dashboard rows use those keys, not the visible labels.

Field `name`	Type	Required	Why
`name`	text	yes	Who is booking
`phone`	tel	yes	Call-back / WhatsApp match
`email`	email	optional	Confirmations and records
`service`	select	yes	Consult, follow-up, dental, physio, etc.
`preferred_date`	date	yes	Slot planning
`preferred_time`	select or text	optional	Morning / afternoon preference
`patient_type`	select	optional	New / existing
`message`	textarea	optional	Symptoms or notes (keep short)
`api_key`	hidden	yes	Routes the POST to your FormsReach account

Customize the service options to match your clinic. Keep option values short and readable in WhatsApp ("general-consult", "follow-up", "vaccine").

Step 1: Copy the HTML appointment form

Point a normal form at the FormsReach endpoint. Include the hidden api_key and the clinic fields above. Style the form with your site CSS; the markup below is the contract, not a design system.

<form action="https://api.formsreach.com/submit" method="POST">
  <input type="hidden" name="api_key" value="YOUR_API_KEY" />

  <label>
    Full name
    <input type="text" name="name" required autocomplete="name" />
  </label>

  <label>
    Phone (WhatsApp preferred)
    <input type="tel" name="phone" required autocomplete="tel" />
  </label>

  <label>
    Email
    <input type="email" name="email" autocomplete="email" />
  </label>

  <label>
    Service
    <select name="service" required>
      <option value="">Select a service</option>
      <option value="general-consult">General consult</option>
      <option value="follow-up">Follow-up visit</option>
      <option value="dental">Dental</option>
      <option value="physio">Physiotherapy</option>
      <option value="lab-report">Lab report / results</option>
    </select>
  </label>

  <label>
    Preferred date
    <input type="date" name="preferred_date" required />
  </label>

  <label>
    Preferred time
    <select name="preferred_time">
      <option value="morning">Morning</option>
      <option value="afternoon">Afternoon</option>
      <option value="evening">Evening</option>
    </select>
  </label>

  <label>
    Patient type
    <select name="patient_type">
      <option value="new">New patient</option>
      <option value="existing">Existing patient</option>
    </select>
  </label>

  <label>
    Notes for the clinic
    <textarea name="message" rows="3" placeholder="Brief reason for visit (optional)"></textarea>
  </label>

  <button type="submit">Request appointment</button>
</form>

Replace YOUR_API_KEY with the key from the dashboard. Keep method="POST" and action="https://api.formsreach.com/submit". Do not invent a different endpoint or rename api_key.

This is the same form API path used on static sites and site builders. If the clinic site is pure static HTML, see contact form on a static website without a backend.

Step 2: Prefer JavaScript only if you need no page reload

Classic form POST is enough for most clinic marketing pages. If you want an inline success state without leaving the page, use the official browser SDK from @formsreach/js:

<script src="https://unpkg.com/@formsreach/js/dist/formsreach.min.js"></script>
<script>
  FormsReach.init({ apiKey: 'YOUR_API_KEY' });
</script>

<form data-formsreach>
  <input type="text" name="name" required />
  <input type="tel" name="phone" required />
  <input type="email" name="email" />
  <select name="service" required>
    <option value="">Select a service</option>
    <option value="general-consult">General consult</option>
    <option value="follow-up">Follow-up visit</option>
  </select>
  <input type="date" name="preferred_date" required />
  <textarea name="message" rows="3"></textarea>
  <button type="submit">Request appointment</button>
</form>

FormsReach.init binds forms marked with data-formsreach. Field names stay the same; only the submit transport changes.

Step 3: Turn on notifications (email first, WhatsApp when ready)

On Free and Starter, FormsReach meters email notifications (plus free webhooks and workflow rules) from a monthly credit pool. Free includes 500 credits per month. A typical path is 1 credit for the accepted submission plus 1 credit for the email.

WhatsApp via the official Meta WhatsApp Business API is on Pro and Agency, from the same credit pool. In the dashboard:

Create or open the form tied to this API key.
Add the front-desk WhatsApp number and complete the one-time OTP.
Submit a test appointment from the live HTTPS page.

You do not need WhatsApp to validate the HTML. Ship email notifications first, then enable WhatsApp when the team lives in chat.

Optional: attach a webhook (0 credits) to push JSON into a sheet or internal tool without putting a server on the marketing domain.

What the WhatsApp message should look like

After a successful POST, staff should see the structured fields in one message, roughly:

Field	Example value in chat
`name`	Priya Nair
`phone`	+91 98xxx xxxxx
`service`	follow-up
`preferred_date`	2026-08-20
`preferred_time`	morning
`patient_type`	existing
`message`	Post-op check, knee

That is enough to confirm a slot or call back without retyping the thread. A wa.me button alone does not force service or date; for that trade-off, see WhatsApp click-to-chat vs contact form.

Step 4: Smoke-test before go-live

Submit with a real phone and email you control.
Confirm the row in the FormsReach dashboard with every custom field present.
Confirm email (and WhatsApp if enabled) arrives with readable labels/values.
Try an empty required field; the browser should block submit.
Try a spam-like payload; honeypot and server-side filters should drop junk without a CAPTCHA on the patient-facing page.

Also test on mobile Safari and Chrome. Appointment traffic is heavily mobile; date inputs and long select lists need to be thumb-friendly.

Privacy and trust notes (clinic-specific)

Collect only what front desk needs to schedule. Avoid free-text medical history on a marketing form.
Link your privacy policy near the submit button if you store health-adjacent notes.
Prefer “Request appointment” over “Book now” unless a human always confirms availability.
Restrict the API key to your clinic domain in FormsReach settings so random hosts cannot abuse the key.

These are product and process choices; the form API still only receives the fields you POST.

Troubleshooting

Submission shows in dashboard but staff never saw WhatsApp
Confirm the plan includes WhatsApp (Pro/Agency), the number is OTP-verified, and remaining credits cover a WhatsApp send. Email-only plans still accept the form.

Date or service missing in the notification
Check the input name attributes (preferred_date, service). Labels are not sent; only name keys are.

4xx from api.formsreach.com
Missing or wrong api_key, or domain allowlisting blocking the live host. Inspect the Network tab on a test submit.

Form works on staging, fails on production
Republish after changing the action URL. Confirm the live HTML still includes the hidden api_key (some builders strip hidden fields on export).

Need this pattern for property leads instead
Same endpoint and API key pattern; different field set. See real estate lead form to WhatsApp.

Ship clinic appointment requests without a clinic backend

A clinic appointment form that notifies on WhatsApp is a structured HTML form, a hidden API key, and channel settings in a form API. FormsReach is built for that path: POST https://api.formsreach.com/submit, spam filtering without CAPTCHA, email on Free (500 credits/month), free webhooks, and WhatsApp on Pro and Agency through Meta’s Business API. No server of your own on the marketing site.

Get your free API key →