Appointment Form V06

Author: Colorlib

Released: September 2026

License: CC BY 3.0

A day-spa booking form where treatments are photo cards showing duration and price, followed by optional add-ons, a date and arrival time, and contact details. A summary panel keeps a running total as treatments and add-ons change. Switching on the gift option reveals recipient name, email, a personal message with a character counter and a send-on date, and those fields are only required while the switch is on.

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

• Treatment packages as photo radio cards with duration and price
• Add-on checkboxes update a live total in the summary panel
• Gift switch reveals recipient fields that are required only when on
• Message character counter and a closed-on-Mondays date rule
• Inline errors with aria-invalid, focus moved to the first problem
• Success message echoes treatment, date, time, total and gift details