intégrations · hosting platform

Un formulaire Netlify indépendant de Netlify.

Netlify Forms est l’option évidente : data-netlify="true" affiche les envois dans son tableau, environ 100 gratuits par mois au moment de la rédaction, puis payants. On cherche ailleurs pour éviter la dépendance à l’hébergeur, le tableau peu consulté et les messages isolés par site.

mailcontact est indépendant : une URL HTTPS sans détection à la compilation, attribut data-netlify ou champ form-name. Le même HTML fonctionne aujourd’hui sur Netlify, demain sur Vercel, Cloudflare Pages ou VPS. Une adresse comme [email protected] fonctionne sans DNS, avec alertes Discord, Slack, email ou webhook.

Une solution légère : une boîte par projet avec notifications, pas un helpdesk. Ni tickets ni SLA, aucun réglage en changeant d’hébergeur.

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

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.

contact.html

<!-- No data-netlify attribute, no hidden form-name field -->
<form action="https://mailcontact.app/api/forms/your-form-id" method="POST">
  <input type="text" name="name" placeholder="Your name" />
  <input type="email" name="email" placeholder="[email protected]" required />
  <textarea name="message" placeholder="How can we help?" 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.

Faites pointer votre formulaire vers lui

Remplacez data-netlify="true" par l’action ci-dessus et déployez. Aucun plugin, détection de formulaire ou réglage de tableau.

Recevoir des alertes

Ajoutez Discord, Slack, email ou webhook. Les messages vous alertent au lieu d’attendre dans un tableau.

pourquoi mailcontact

Conçu pour fonctionner avec Netlify.

Aucune dépendance en changeant d’hébergeur

Netlify Forms dépend de la détection à la compilation : migrer demande de reconstruire la réception. Avec mailcontact, gardez l’URL et ne changez rien sur Vercel ou Cloudflare Pages.

Une vraie adresse email, en plus du formulaire

Netlify Forms ne reçoit que les formulaires. mailcontact fournit aussi une adresse comme [email protected]. Emails et formulaires arrivent ensemble.

Une boîte, tous les hébergeurs

Des projets sur Netlify, Vercel ou GitHub Pages ? Chacun a sa boîte au même endroit, plutôt que des listes dispersées chez les hébergeurs.

FAQ

Netlify + mailcontact : vos questions

Netlify Forms est-il gratuit ?

Netlify Forms propose environ 100 envois gratuits par mois au moment de la rédaction, puis un module payant. Si votre site reste sur Netlify avec peu de trafic, c’est raisonnable. En contrepartie, la gestion des formulaires reste liée à l’hébergeur.

Que devient le formulaire si je quitte Netlify ?

Avec Netlify Forms, les envois cessent dès que le site est servi ailleurs : le traitement dépend de la compilation Netlify. Un formulaire mailcontact envoie à une URL externe ; le même HTML continue donc de fonctionner chez tout hébergeur.

Faut-il un attribut data-netlify ou un champ caché form-name ?

Non. mailcontact identifie le formulaire par son URL de réception. Email et message sont requis (name et subject facultatifs) ; company_website doit être présent et vide. CORS est ouvert : les déploiements de branches et prévisualisations fonctionnent sans réglage supplémentaire.

Comment afficher une confirmation après l’envoi ?

Utilisez le script MailContact hébergé ou MailContact.send() dans votre gestionnaire pour garder les visiteurs sur la page avec une confirmation. La redirection native configurable n’est pas disponible actuellement.

voir aussi

Fonctionne aussi avec

Une boîte pour chaque projet Netlify 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.