intégrations · static site generator

Un formulaire Eleventy, sans backend à construire.

Eleventy compiles templates to plain HTML, so a contact form is one include away: point a standard <form> at your mailcontact endpoint and submissions land in your project's inbox, with a notification in Discord, Slack, email, or a webhook. No serverless function, no mail service, no plugin.

Le même HTML fonctionne dans Nunjucks, Liquid, WebC, Markdown ou tout langage 11ty. Placez-le dans _includes une fois et utilisez-le partout.

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

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.

_includes/contact-form.njk

<form action="https://mailcontact.app/api/forms/your-form-id" method="POST">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" />

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required />

  <label for="message">Message</label>
  <textarea id="message" name="message" 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.

Ajoutez l’inclusion

Enregistrez l’extrait sous _includes/contact-form.njk, puis {% include "contact-form.njk" %} sur la page contact. Appliquez le CSS du site.

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

Le site reste statique

Ni Netlify Functions, code serverless ou plugin Eleventy. La compilation reste du HTML déployable chez tout hébergeur statique.

Un extrait, tous les langages de modèles

Nunjucks, Liquid, WebC, Markdown : 11ty conserve le HTML intact, donc la même inclusion fonctionne quel que soit le moteur.

Une boîte par projet 11ty

Eleventy facilite les petits sites. Donnez-leur chacun une boîte et une adresse au lieu de tout envoyer dans votre email personnel.

FAQ

Eleventy + mailcontact : vos questions

Un formulaire Eleventy a-t-il besoin d’un backend ou d’une fonction serverless ?

Non. Le formulaire envoie directement à mailcontact, qui conserve le message et envoie les notifications. Votre compilation 11ty reste entièrement statique.

Cela fonctionne-t-il chez tous les hébergeurs (GitHub Pages, Netlify, Cloudflare Pages) ?

Oui. Toute origine est acceptée : cela fonctionne partout où Eleventy est servi, y compris GitHub Pages sans gestion des formulaires.

Puis-je adapter le formulaire à mon site ?

Tout à fait. mailcontact reçoit seulement le POST. Le HTML ci-dessus vous appartient et votre feuille de style s’applique. Ajoutez des classes, réorganisez les champs ou intégrez-le dans votre mise en page.

Comment afficher une confirmation après un envoi ?

Utilisez le script MailContact hébergé ou MailContact.send() pour l’envoi, la vérification et les retours sur place (le point de réception renvoie du JSON). La redirection native configurable n’est pas disponible actuellement.

voir aussi

Fonctionne aussi avec

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