intégrations · static site generator

Un formulaire Jekyll : sans plugin ni serveur, compatible GitHub Pages.

Jekyll génère du HTML statique sans serveur de réception, et GitHub Pages n’en exécute pas. Faites pointer le HTML vers mailcontact pour recevoir en boîte avec alertes Discord, Slack, email ou webhook.

Aucun changement Gemfile, plugin à faire accepter ou JavaScript requis. Enregistrez une inclusion, puis {% include contact-form.html %} dans vos pages ou layouts.

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

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

<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 site. Nommez-la comme le projet Jekyll pour obtenir immédiatement point de réception et adresse.

Ajoutez l’inclusion

Enregistrez sous _includes/contact-form.html et incluez depuis la page contact, le layout ou le pied de page. Le thème applique ses styles.

Recevoir des alertes

Ajoutez Discord, Slack, email ou webhook : les messages vous alertent sans consulter un tableau.

pourquoi mailcontact

Conçu pour fonctionner avec Jekyll.

Compatible avec GitHub Pages

GitHub Pages limite les plugins Jekyll et ne lance aucun serveur. Une URL externe contourne ces deux limites, sans installation ni compilation.

Une inclusion, toutes les pages

Écrivez le formulaire une fois dans _includes/ et réutilisez-le. Changer l’URL dans ce fichier met toutes les pages à jour.

Une boîte par site

Blog, documentation ou landing page : chaque Jekyll a sa boîte et son adresse, sans tout accumuler dans votre email.

FAQ

Jekyll + mailcontact : vos questions

Jekyll peut-il traiter seul les formulaires ?

Non. Jekyll génère le HTML statique à la compilation. Aucun serveur ne reçoit les POST. Il faut un point de réception externe comme mailcontact pour accepter et stocker les envois.

Cela fonctionne-t-il sur GitHub Pages ?

Oui. GitHub Pages n’exécute pas de serveur et n’autorise que certains plugins, mais ce formulaire n’a besoin ni de l’un ni de l’autre : il envoie depuis le navigateur vers mailcontact.

Comment afficher un remerciement après l’envoi ?

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

Puis-je adapter le formulaire à mon thème Jekyll ?

Oui. Le HTML dans l’inclusion reprend Minima, Chirpy ou tout thème personnalisé. Ajoutez classes et CSS comme d’habitude.

voir aussi

Fonctionne aussi avec

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