Appointment request form
A short form for independent businesses: name, phone, reason, preferred date and a morning or afternoon slot, with validation and a confirmation summary.
- Tailwind
- React
- CSS
- WordPress
Description
Designed for hairdressers, physiotherapists, garages and other independents who call clients back to set the time: visitors leave their name and phone number (landline or mobile, reformatted as 06 12 34 56 78 when leaving the field), pick a reason from a list, the preferred date in the native calendar, then morning or afternoon on two radio cards. The date is checked: from tomorrow, at most two months ahead, and never on a closing day (Sunday and Monday in the example, one line to change). Errors appear when leaving each field and in a clickable summary on submit; once the request is valid, a summary with the date spelled out replaces the form. Accessibility: everything works with the keyboard, each message is tied to its field through aria-describedby and aria-invalid, focus moves to the error summary and then to the confirmation, targets are at least 44 px, contrast exceeds 4.5:1 in light and dark modes (calendar included) and the confirmation animation stops with prefers-reduced-motion. Plug submission into your service (Formspree, your own API…).
Code
Loading the code…
Archive contents
formulaire-prise-rendez-vous-html-tailwind.zip3 files · 8 Ko
- index.html19 Ko
- README.md4 Ko
- LICENSE.md1 Ko
Tags
Updated on October 17, 2026.
In the same spirit

Three consistent screens in one card: sign in, sign up with live password criteria, and a reset request.
- Tailwind
- React
- CSS
- WordPress

A keyboard-filterable dropdown to pick one or several values, shown as chips, backed by a real select field.
- Tailwind
- React
- CSS
- WordPress

An e-mail field and its button on one line, a GDPR consent checkbox, clear errors, a typo suggestion and a confirmation message.
- Tailwind
- React
- CSS
- WordPress

A short form for tradespeople: type of job, description, postcode, timeframe, optional photos, then a confirmation summary.
- Tailwind
- React
- CSS
- WordPress