Exemples et technologies

Vercel et sites statiques

Installer un formulaire Formeo avec Vercel et sites statiques.

Principe de l’installation

Le site qui affiche le formulaire peut être statique. La réception reste traitée par l’adresse publique de votre service Formeo.

Avant de copier le code

Copiez le code dans votre page HTML ou votre composant de site.
Déclarez séparément l’origine de prévisualisation et le domaine de production si vous utilisez une restriction d’origine.
Testez un déploiement accessible et vérifiez la demande enregistrée puis sa notification.

Exemple à adapter

Cet exemple correspond au modèle de contact avec name, email et message. Une autre structure de champs nécessite un schéma publié correspondant. YOUR_ACCESS_KEY est une clé d’exemple à remplacer.

HTML

<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>

Vérifier le résultat

Testez aussi l’adresse invalide, le champ obligatoire vide et une reprise après un problème réseau. Le message de confirmation doit décrire l’enregistrement sans garantir la livraison e-mail. Vérifiez ensuite l’historique dans votre espace.

Documentation relue le 14 octobre 2026Signaler un point à améliorer →