Aller au contenu

Formulaire de prise de rendez-vous

Un formulaire court pour indépendant : nom, téléphone, motif, date souhaitée et créneau matin ou après-midi, avec validation et récapitulatif de confirmation.

  • Tailwind
  • React
  • CSS
  • WordPress
Ouvrir dans un nouvel onglet

Description

Pensé pour les coiffeurs, kinés, garagistes et autres indépendants qui rappellent leurs clients pour fixer l'heure : le visiteur laisse son nom et son téléphone (fixe ou mobile, remis en forme 06 12 34 56 78 à la sortie du champ), choisit le motif dans une liste, la date souhaitée dans le calendrier natif puis le matin ou l'après-midi sur deux cartes radio. La date est contrôlée : à partir de demain, au plus deux mois à l'avance, et jamais un jour de fermeture (dimanche et lundi dans l'exemple, une ligne à modifier). Les erreurs s'affichent à la sortie de chaque champ et dans un résumé cliquable à l'envoi ; une fois la demande validée, un récapitulatif avec la date en toutes lettres remplace le formulaire. Accessibilité : tout se fait au clavier, chaque message est relié à son champ par aria-describedby et aria-invalid, le focus va au résumé d'erreurs puis à la confirmation, les cibles font au moins 44 px, les contrastes dépassent 4,5:1 en clair comme en sombre (calendrier compris) et l'animation de confirmation se coupe avec prefers-reduced-motion. Branchez l'envoi sur votre service (Formspree, API maison…).

Code

Chargement du code…

Contenu de l'archive

formulaire-prise-rendez-vous-html-tailwind.zip3 fichiers · 8 Ko

  • index.html19 Ko
  • README.md4 Ko
  • LICENSE.md1 Ko

Mots-clés

Mis à jour le 17 octobre 2026.

Dans le même esprit

  • Une liste déroulante filtrable au clavier pour choisir une ou plusieurs valeurs, affichées en pastilles, adossée à un vrai champ select.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • Un champ e-mail et son bouton sur une ligne, une case de consentement RGPD, des erreurs claires, une suggestion en cas de faute de frappe et un message de confirmation.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • Un formulaire court pour artisan : type de prestation, description, code postal, délai, photos facultatives, puis un récapitulatif de confirmation.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant