Créer un formulaire de contact HTML et CSS responsive

Un exemple à copier

<!doctype html>
<html lang="fr"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Formulaire de contact</title>
<style>form[data-littlereply]{max-width:640px;margin:2rem auto;padding:1.5rem;font:16px/1.6 system-ui,sans-serif;color:#202033;background:white;border:1px solid #e4e4ee;border-radius:16px;box-sizing:border-box}form[data-littlereply] label{display:block;margin-top:1rem;font-weight:600}form[data-littlereply] input,form[data-littlereply] textarea,form[data-littlereply] select{box-sizing:border-box;width:100%;padding:.75rem;font:inherit;border:1px solid #727285;border-radius:8px;background:white;color:#202033}form[data-littlereply] input[type=checkbox],form[data-littlereply] input[type=radio]{width:auto}form[data-littlereply] button{margin-top:1rem;padding:.8rem 1.1rem;font:inherit;font-weight:600;border:0;border-radius:8px;background:var(--form-accent,#4f46e5);color:white;cursor:pointer}form[data-littlereply] :focus-visible{outline:3px solid #f59e0b;outline-offset:3px}form[data-littlereply] button:disabled{opacity:.6}form[data-littlereply] [role=status]{min-height:1.6em}form[data-littlereply] fieldset{border:0;padding:0}form[data-littlereply] .privacy-notice{font-size:.875rem;color:#4b4b60}
form[data-littlereply]{--form-accent:#4f46e5;--form-ink:#ffffff}
form[data-littlereply] button{color:var(--form-ink)}form[data-littlereply] button[data-fq-back]{background:#eee;color:#202033}form[data-littlereply] [hidden]{display:none}</style></head><body>
<form action="https://formeo.me/api/submit" method="POST" data-littlereply="YOUR_ACCESS_KEY" data-locale="fr" data-success="Votre message a bien été enregistré. Nous vous répondrons bientôt.">
  <input type="hidden" name="_fq_key" value="YOUR_ACCESS_KEY" />
  <input type="text" name="botcheck" tabindex="-1" autocomplete="off" style="display:none" aria-hidden="true" />

  <label for="fq_name">Votre nom *</label>
  <input type="text" name="name" id="fq_name" required autocomplete="name" />

  <label for="fq_email">Votre adresse e-mail *</label>
  <input type="email" name="email" id="fq_email" required autocomplete="email" />

  <label for="fq_message">Votre message *</label>
  <textarea name="message" id="fq_message" required maxlength="5000" rows="5"></textarea>

  <button type="submit">Envoyer mon message</button>
  <p role="status" aria-live="polite"></p>
</form>
<!-- Erreurs AJAX accessibles et reprises sans doublon -->
<script src="https://formeo.me/client/v1.js" data-api="https://formeo.me" defer></script>
</body></html>

La clé YOUR_ACCESS_KEY est un emplacement à remplacer par la clé publique de votre formulaire. Le code ne contient aucune clé serveur ni adresse de destination.

Séparer les champs, le style et l’envoi

HTML décrit les champs et leur libellé. CSS règle l’espacement, les couleurs et l’adaptation aux petits écrans. Le backend reçoit la demande ; ajouter un dégradé ou une animation n’envoie aucun e-mail. L’exemple complet contient ces trois raccordements, avec une clé publique à remplacer après création de votre formulaire.

Le modèle proposé conserve trois informations : nom, e-mail et message. Vous pouvez changer les libellés sans modifier les noms name, email et message attendus par ce schéma. Si vous ajoutez un téléphone ou une liste de prestations, publiez le même schéma dans le tableau de bord avant de tester.

• Personnaliser le modèle de formulaire de contact HTML
• Comprendre la structure d’un formulaire de contact HTML

Adapter la largeur plutôt que réduire le texte

Une largeur maximale évite les lignes trop longues sur ordinateur. Les champs occupent la largeur disponible et box-sizing=border-box inclut leur bordure et leur padding dans le calcul. Sur téléphone, ils doivent rester dans l’écran sans défilement horizontal ; évitez une largeur fixe en pixels sur les contrôles.

Gardez une taille de texte confortable et un bouton facilement identifiable. Le CSS fourni cible form[data-littlereply] pour limiter les collisions avec le reste de votre site. Modifiez l’accent depuis le studio de modèles, qui adapte aussi la couleur du texte du bouton à cette couleur.

Soigner les labels, le focus et la confirmation

Un placeholder peut donner un exemple, mais disparaît pendant la saisie et ne remplace pas un label. Reliez chaque label à un identifiant unique. Si deux formulaires sont présents sur la même page, leurs identifiants HTML doivent être distincts. L’adresse e-mail utilise type=email et l’autocomplétion appropriée.

Gardez un indicateur de focus visible ; ne retirez pas outline sans le remplacer. Les erreurs ne doivent pas être signalées uniquement par une couleur. La confirmation du client Formeo est annoncée dans une zone de statut. Laissez cette zone dans la page, même si vous personnalisez le bouton ou les bordures.

Vérifier le modèle sur votre vrai site

Testez à une largeur de 360 pixels, puis avec le zoom du navigateur et la touche Tab. Contrôlez les champs longs, la bordure du focus et les messages d’erreur. Le code de démonstration contient un emplacement de clé : l’aperçu ne crée pas de formulaire public à votre place.

Après publication, envoyez une demande identifiable et contrôlez sa présence dans votre espace. Si le CSS est correct mais que vous ne recevez rien, examinez l’action, les noms de champs et l’historique de livraison. La présentation et le traitement se diagnostiquent séparément.

• Essayer le modèle de contact responsive
• Vérifier la réception si le formulaire ne fonctionne pas

Sources

• MDN : mise en forme des formulaires HTML
• MDN : l’élément label