Guide

Formulaire de contact Astro (sans backend)

Astro rend par défaut en HTML statique, ce qui signifie qu'un formulaire de contact Astro est juste un formulaire HTML brut avec le bon attribut action. Vous n'avez pas besoin d'un endpoint serveur ni d'une intégration Astro - collez le snippet dans une page .astro et vous avez terminé.

Le snippet

contact.Astro

---
// src/pages/contact.astro
---

<form action="https://formhook.app/f/YOUR_API_KEY" method="POST">
  <label>
    Email
    <input type="email" name="email" required />
  </label>

  <label>
    Message
    <textarea name="message" required></textarea>
  </label>

  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" hidden />
  <input type="hidden" name="_redirect" value="https://example.com/thanks" />

  <button type="submit">Send</button>
</form>

Comment ça marche

Comme Astro livre par défaut du HTML statique, il n'y a rien à câbler côté client. L'action du formulaire POSTe directement vers formhook.app/f/YOUR_API_KEY, où YOUR_API_KEY provient des paramètres de votre formulaire dans le tableau de bord Formhook. Le champ _gotcha est un honeypot - les bots le remplissent, les humains ne le voient pas, et tout contenu dans ce champ est silencieusement ignoré. Le champ _redirect envoie les utilisateurs vers une page de remerciement après un POST réussi, et l'URL est validée contre votre liste d'origines autorisées.

Afficher une page de remerciement après l'envoi

Un formulaire Astro statique quitte la page à l'envoi : créez donc une page comme src/pages/merci.astro et pointez-y un champ caché _redirect. Utilisez l'URL complète, par exemple https://example.com/merci. La valeur doit être une URL absolue dont l'origine figure dans les origines autorisées du formulaire ; sinon Formhook l'ignore et le visiteur voit une réponse JSON. Si vous avez défini site dans astro.config.mjs, vous pouvez construire la valeur avec new URL("/merci", Astro.site).

Afficher le résultat sans quitter la page

Pour garder le visiteur sur la page, ajoutez au composant un petit <script> qui intercepte l'événement submit, envoie les champs en JSON avec fetch et écrit un message dans un élément de statut. Astro envoie ce script tel quel au navigateur : aucun framework ni îlot n'est nécessaire. Le schéma est montré dans le guide Next.js et expliqué, avec des messages de statut accessibles, dans Soumission de formulaire en AJAX. Les envois JSON n'utilisent pas _redirect.

Origines autorisées pour le développement, les préproductions et la production

Ajoutez chaque origine depuis laquelle le formulaire est servi aux Origines autorisées, avec schéma, hôte et port exacts : http://localhost:4321 pour astro dev, votre domaine de production avec https://, et le domaine de préproduction de votre hébergeur si vous testez dessus. Si un envoi échoue avec origin_not_allowed, cette liste est le premier endroit à vérifier.

La même configuration fonctionne sur Cloudflare Pages, GitHub Pages, Netlify et Vercel, car le navigateur envoie directement à Formhook et votre hébergeur ne voit jamais la soumission.

L'utiliser depuis un endpoint Astro

Les pages statiques n'ont besoin de rien d'autre. Si votre site tourne en mode serveur ou hybride et que vous préférez envoyer la soumission depuis un endpoint ou une action Astro, appelez Formhook depuis le code serveur avec un en-tête X-Auth-Token, généré dans les paramètres du formulaire et conservé dans une variable d'environnement réservée au serveur. Les requêtes serveur n'ont pas d'en-tête Origin : sans ce jeton, elles sont rejetées. Les détails figurent dans la documentation.

Spam et confidentialité

Gardez le champ caché _gotcha : les bots le remplissent et ces envois sont écartés silencieusement. Des limites de débit s'appliquent par IP et par formulaire, et Cloudflare Turnstile s'active formulaire par formulaire dans le tableau de bord ; ce guide compare les options. Pour les visiteurs de l'UE, ajoutez une courte mention sous le formulaire. Le guide du formulaire de contact conforme au GDPR propose des formulations à adapter.

Ce qui se passe ensuite

La soumission apparaît dans votre tableau de bord Formhook en moins d'une seconde.
Une notification push se déclenche sur chaque appareil où vous l'avez activée.
Répondez directement depuis le tableau de bord (Pro et au-dessus) sans révéler votre vraie adresse e-mail.

Lancez votre formulaire de contact Astro aujourd'hui.

Inscrivez-vous gratuitement, créez un formulaire, collez la clé API. Cinq minutes.

Commencer gratuitement

Niveau gratuit : 5 formulaires · 250 soumissions/mois · Sans carte bancaire.

Formulaire de contact Astro - FAQ

Ai-je besoin d'une intégration Astro ou d'un adaptateur serveur ?

Non. Le formulaire POSTe directement vers Formhook, donc il fonctionne avec la sortie statique Astro par défaut. Pas de mode SSR, pas d'adaptateur @astrojs/node requis.

Puis-je avoir plusieurs formulaires de contact sur différentes pages Astro ?

Oui. Créez un formulaire Formhook par cas d'usage - contact, carrières, newsletter - et collez l'action de chaque formulaire dans la bonne page .astro. Le niveau gratuit couvre cinq formulaires.

Comment afficher une page de remerciement après l'envoi ?

Ajoutez un input _redirect caché pointant vers votre route de remerciement Astro. L'URL doit figurer dans la liste des origines autorisées du formulaire. Ou, si vous préférez afficher un succès inline sans rechargement, utilisez le motif fetch du guide Next.js ou SvelteKit.

Guides pour les autres frameworks

Migrating from Formspree? See how Formhook compares.