Formulaire HTML sans PHP : recevez vos messages par e-mail
Ajoutez un formulaire HTML sans PHP à votre site et recevez ses demandes par e-mail. Ce formulaire de contact sans backend à développer utilise le service Formeo pour enregistrer les champs et préparer une notification vers vos destinataires vérifiés. Vous gardez votre HTML et votre hébergement.
Créer mon formulaire gratuitementUn exemple à copier
<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>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.
Trois façons de traiter le formulaire
Un script PHP convient si vous disposez d’un hébergement serveur et souhaitez gérer vous-même la validation, l’envoi et les protections. Une API maison donne davantage de contrôle, avec les mêmes responsabilités d’exploitation.
Un backend de formulaires prend en charge cette réception. Votre page conserve son HTML et son CSS ; seul l’attribut action ou l’appel fetch dirige les données vers votre formulaire.
Installer et vérifier
Créez un formulaire gratuit, confirmez votre compte et sélectionnez un destinataire vérifié. Copiez sa clé publique à la place de YOUR_ACCESS_KEY. Cette clé identifie le formulaire ; elle ne donne pas accès à votre compte.
Collez le code sur votre site et envoyez un test depuis le tableau de bord. Vérifiez ensuite la réception dans la boîte de réception du produit et l’état de livraison e-mail. Une réponse 202 signifie que le message est enregistré, pas qu’un e-mail est arrivé.
Si l’envoi échoue
Un formulaire HTML natif utilise POST et des champs avec un attribut name. Un fichier local ouvert en file:// peut être refusé si vous avez limité les origines autorisées. Testez depuis un serveur local ou votre site publié.
- 404 : vérifiez la clé et l’état du formulaire.
- 422 : corrigez les champs exigés par la configuration.
- 429 : consultez le quota ou la limitation de fréquence.
- Message enregistré, e-mail absent : consultez le destinataire, la configuration d’envoi et l’historique de livraison.
Essayer le modèle avant de créer un compte
Aperçu local : les essais restent dans ce navigateur. Aucun message ni e-mail n’est envoyé.
Contact HTML
Nom, e-mail et message : le nécessaire pour ouvrir la conversation.
FormeoPersonnaliser les champs et le style
<!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>Remplacez YOUR_ACCESS_KEY par la clé publique de votre propre formulaire. Le code inclut ses styles ; le script client ajoute les états AJAX. Le POST HTML fonctionne aussi sans JavaScript.
Questions fréquentes
Peut-on envoyer un e-mail uniquement avec HTML ?
HTML ne possède pas de serveur de messagerie. Il transmet les données à un service qui effectue le traitement et l’envoi.
Faut-il ajouter un serveur à mon site ?
Vous utilisez le backend partagé du service. Vous n’avez pas de script serveur à déployer sur votre hébergement.