Skip to content

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
Open in a new tab

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

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

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • 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
    Component
  • A short form for tradespeople: type of job, description, postcode, timeframe, optional photos, then a confirmation summary.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component