Recevoir des messages depuis un site Vercel
Vercel héberge votre interface. Le formulaire peut transmettre directement au backend partagé, sans ajouter une fonction serveur dans votre projet pour chaque site.
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.
Domaine public et preview protégée
Une preview protégée peut demander une connexion au propriétaire du site. Elle ne constitue pas une URL de formulaire accessible à vos visiteurs ou à un fournisseur de webhooks.
Copiez l’adresse publique du formulaire depuis votre compte. Lors d’une mise en production, vérifiez que cette adresse et votre page sont accessibles dans une fenêtre privée.
Origines autorisées
Le domaine de production et les domaines de preview sont des origines différentes. Autorisez uniquement les environnements nécessaires, sans ajouter de wildcard permissif.
Une clé publique peut être utilisée dans le frontend. Gardez les secrets de gestion dans les variables serveur de l’environnement concerné.
Tester la réception
Publiez la page, envoyez une demande synthétique et vérifiez le message stocké. Consultez la livraison séparément. Un redéploiement du frontend ne rejoue pas les anciennes demandes.
L’épuisement du quota doit afficher une erreur visible. Une soumission refusée ne doit pas être présentée comme un message envoyé.
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
Dois-je créer une Function ?
Non pour l’envoi direct de cet exemple.
Une preview est-elle suffisante pour lancer le site ?
Elle permet de tester, mais une protection de déploiement peut empêcher les visiteurs et les callbacks d’y accéder.