Ajouter un formulaire de contact à un site statique
Un formulaire de contact sur site statique peut recevoir des messages sans ajouter PHP à votre hébergement. Votre page affiche les champs ; un service distant traite les demandes. Cette approche convient aux fichiers HTML et aux sites générés par Astro, Hugo ou Jekyll.
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.
Le site et le traitement ont des rôles distincts
Votre hébergeur sert le formulaire et les scripts. Formeo reçoit les champs, applique la configuration du formulaire et enregistre la demande. La notification e-mail possède son propre état de livraison.
Cette approche convient aux pages générées par Astro, Hugo ou Jekyll, ainsi qu’aux fichiers HTML. Le processus de build ne doit pas contenir de clé serveur Supabase ou de secret d’envoi.
Publier avec la bonne adresse
Créez le formulaire, copiez le code avec votre clé publique puis déployez la page statique. Si vous utilisez une liste d’origines autorisées, ajoutez l’origine exacte du site, avec le bon protocole et le sous-domaine.
Un test sur localhost ne prouve pas que le domaine de production est autorisé. Effectuez aussi une soumission depuis l’adresse publique après son déploiement.
CORS, erreurs et reprises
Pour AJAX, le backend renvoie les en-têtes CORS adaptés. CORS ne protège pas contre les scripts exécutés ailleurs : les quotas, le filtrage et la validation serveur restent nécessaires.
Gardez le même identifiant de tentative lors d’une reprise après un délai réseau, et changez-le si le contenu est modifié. Le navigateur peut perdre une réponse alors que le message a déjà été enregistré.
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
Est-ce compatible avec GitHub Pages ?
Une page statique peut soumettre vers le service. Vérifiez vos origines autorisées et les règles de votre hébergeur.
Mon site doit-il rester statique ?
Oui, vous pouvez conserver un déploiement entièrement statique ; le traitement se fait sur le backend du formulaire.