Menu
Créer mon premier formulaire
Exemples et technologies

Astro

Installer un formulaire Formeo avec Astro.

Principe de l’installation

Un composant Astro peut contenir le formulaire HTML et le script client, sans adaptateur serveur pour la réception des demandes.

Avant de copier le code

  1. Créez un composant Contact.astro et copiez le formulaire.
  2. Remplacez la clé d’exemple, puis importez le composant dans votre page.
  3. Vérifiez le rendu statique construit, les champs publiés et les origines du site final.

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.

Astro
---
// Composant Contact.astro : aucun adaptateur serveur nécessaire pour ce formulaire.
---
<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 →