Appointment Form V03

Author: Colorlib

Released: September 2026

License: CC BY 3.0

A dental appointment request laid out as four numbered steps on a single rounded card. A segmented New patient / Existing patient control switches between a full registration panel (date of birth, address, insurer and member ID, referral source) and a short record lookup, and hidden fields are disabled so they drop out of validation. Choosing an emergency visit reveals a callout with the practice's urgent phone line, and Sundays are rejected as a preferred date.

It is plain HTML and CSS plus a few lines of vanilla JavaScript: no jQuery, no Bootstrap files, no plugins, and the download is 306 KB. Use it on its own, or drop it into a Bootstrap 4, 5 or 6 project and it looks the same.

• Segmented control built on real radio buttons
• Hidden panels are disabled and excluded from validation
• Member ID only appears when an insurer is chosen
• Emergency visit type reveals an urgent-call callout
• Numbered step layout that collapses cleanly on phones
• Inline errors, focus on the first invalid field and a polite live region