Aller au contenu

Formulaire de demande de devis

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
Ouvrir dans un nouvel onglet

Description

Le visiteur choisit la prestation sur des cartes radio, décrit son besoin avec un compteur de caractères, indique le code postal du chantier (contrôlé contre la zone d'intervention) et le délai souhaité. Il peut joindre jusqu'à trois photos, avec vignettes, taille et bouton de retrait ; les fichiers trop lourds ou d'un autre format sont refusés avec un message clair. 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 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 ajouts de photos sont annoncés par une région live, les contrastes dépassent 4,5:1 en clair comme en sombre 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-demande-devis-html-tailwind.zip3 fichiers · 9 Ko

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

Mots-clés

Mis à jour le 15 octobre 2026.

Dans le même esprit

  • Un formulaire de prise de rendez-vous : motif, jour avec le sélecteur de date natif, créneaux du matin et de l'après-midi en boutons radio, créneaux complets barrés et résumé du choix.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • Zone de dépôt de fichiers

    Bientôt disponible

    Un champ de téléversement qui accepte le glisser-déposer et liste les fichiers choisis.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • Une liste de réglages activables par interrupteurs, avec description de chaque option.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • Une prise de rendez-vous découpée en trois étapes, avec indicateur de progression.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant