intégrations · framework

Un formulaire Astro : sans îlot, adaptateur ni backend.

Un formulaire Astro n’a besoin ni d’adaptateur SSR, route API ou îlot de framework. Astro génère du HTML simple ; faites pointer action vers mailcontact et recevez les envois dans la boîte avec alertes Discord, Slack, email ou webhook.

Sans JavaScript, compatible avec la sortie statique Astro partout, et toujours fonctionnel si vous ajoutez un adaptateur : c’est du HTML dans une page .astro, pas un plugin ou une route serveur.

Créer un compte Lire la documentation

configuration recommandée

Utilisez le script MailContact avec votre design.

Ajoutez ce HTML à votre site, ou utilisez le générateur de formulaires. Remplacez le lien du formulaire par le vôtre. Le script hébergé injecte le contrôle caché, gère l’envoi et la vérification automatique, et conserve le brouillon en cas d’erreur. Vous contrôlez le HTML et le CSS. Les formulaires Free affichent un lien visible « Traité par mailcontact.app » ; Pro et Plus ne l’affichent pas. Les messages de retour suivent la langue du navigateur ; définissez data-mailcontact-language="fr" sur le formulaire pour imposer le français.

contact.html

<form action="https://mailcontact.app/api/forms/your-form-id" method="POST" data-mailcontact-form lang="fr" data-mailcontact-language="fr">
  <input type="hidden" name="_language" value="fr" />
  <fieldset>
    <legend>Contactez-nous</legend>
    <label>
      Nom (facultatif)
      <input name="name" type="text" autocomplete="name" maxlength="200" />
    </label>
    <label>
      Email
      <input name="email" type="email" autocomplete="email" maxlength="320" required />
    </label>
    <label>
      Message
      <textarea name="message" rows="5" maxlength="5000" required></textarea>
    </label>
    <noscript>
    <div aria-hidden="true" style="position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;">
      <label>Site web
        <input name="company_website" type="text" tabindex="-1" autocomplete="off" />
      </label>
    </div>
    </noscript>
    <button type="submit">Envoyer le message</button>
  </fieldset>
  <p data-contact-status role="status" aria-live="polite" aria-atomic="true"></p>
</form>
<script defer src="https://mailcontact.app/forms/v1.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Pour un composant doté de son propre gestionnaire d’envoi, chargez le même script et utilisez MailContact.prepare(form) et MailContact.send() au lieu du marqueur automatique. Voir la référence des interfaces personnalisées pour le chargement, les messages de retour et l’attribution Free.

l’extrait

Alternative : une intégration directe pour Astro.

Cet exemple appelle directement l’API. Gardez le champ requis company_website champ présent et vide. Les envois natifs ouvrent du JSON en cas de succès ou une page de vérification si nécessaire. Les scripts personnalisés sans vérification envoient les messages suspects dans les spams pour examen ; les spams manifestes y sont aussi retenus sans notification ni consommation du quota. Un succès confirme la réception, y compris pour examen, ou l’abandon silencieux d’un contrôle rempli. Voir protection antispam pour le comportement complet.

src/pages/contact.astro

---
// No frontmatter needed: the form is plain HTML.
---

<form action="https://mailcontact.app/api/forms/your-form-id" method="POST">
  <input type="text" name="name" placeholder="Your name" required />
  <input type="email" name="email" placeholder="[email protected]" required />
  <textarea name="message" placeholder="What's on your mind?" required></textarea>
  <button type="submit">Send</button>
  <input name="company_website" type="text" tabindex="-1" autocomplete="off"
    style="position:absolute;left:-10000px" aria-hidden="true" />
</form>

fonctionnement

Trois étapes, du début à la fin.

Créer une boîte

Une boîte par projet. Nommez-la comme le site pour obtenir immédiatement point de réception et adresse de projet.

Collez le formulaire

Placez le HTML ci-dessus dans une page ou un composant .astro : src/pages/contact.astro, pied de page ou layout. Appliquez vos styles.

Recevoir des alertes

Ajoutez Discord, Slack, email ou webhook. Les messages livrés vous alertent dans vos outils.

pourquoi mailcontact

Conçu pour fonctionner avec Astro.

Sans JavaScript ni îlot

Sans client:load, composant de framework ni coût d’hydratation. Du HTML statique, ce qu’Astro livre le plus vite.

Aucun adaptateur SSR nécessaire

Les points serveur Astro nécessitent adaptateur et serveur. Envoyer ailleurs garde le site statique. astro build, téléversez, terminé.

Une boîte par site lancé

Astro facilite les sites marketing, documentation et projets personnels. Chacun a sa boîte et son adresse, au lieu de tout accumuler dans votre email.

FAQ

Astro + mailcontact : vos questions

Astro peut-il traiter les formulaires sans serveur ?

Pas seul. Un site Astro statique ne dispose de rien pour recevoir un POST. Faire pointer l’action vers mailcontact résout ce problème : ses serveurs reçoivent l’envoi et votre site reste statique.

Cela fonctionne-t-il sur Netlify, Vercel, GitHub Pages ou Cloudflare Pages ?

Oui. Les envois de toute origine sont acceptés : cela fonctionne où que soit hébergé le statique. Sans adaptateur, fonctions ni option de formulaire propre à l’hébergeur.

Comment afficher une confirmation au lieu de quitter la page ?

Utilisez le script MailContact hébergé pour l’envoi, la vérification et les retours sur place, ou MailContact.send() dans votre gestionnaire. La redirection native configurable n’est pas disponible actuellement.

Puis-je utiliser Tailwind ou les styles Astro isolés ?

Yes. It's your markup in your page, so scoped <style> blocks, Tailwind classes, or global CSS all apply as usual. mailcontact only cares about the field names: email and message are required, name and subject are optional; company_website must also be present and empty.

voir aussi

Fonctionne aussi avec

Une boîte pour chaque projet Astro lancé.

Formulaires et vraie adresse email, ensemble, avec des notifications dans vos outils. Commencez gratuitement.

Créer mon formulaire

Aucune carte bancaire requise. Free comprend un projet et 50 messages de formulaire par mois.