intégrations · hosting platform

Un formulaire sur GitHub Pages, sans quitter GitHub Pages.

GitHub Pages ne sert que du statique : aucune fonction, API ou code serveur pour recevoir un formulaire. Envoyez le HTML vers l’URL mailcontact et retrouvez les messages dans la boîte avec alertes Discord, Slack ou email.

Rien à installer ni compiler. L’extrait fonctionne dans index.html, un layout ou include Jekyll, ou tout site statique d’une branche gh-pages. Commit, push, terminé.

Une vraie adresse de réception ([email protected]) accompagne le formulaire, sans publier votre email personnel dans le dépôt.

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 GitHub Pages.

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.

index.html

<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="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 dépôt pour obtenir immédiatement point de réception et adresse.

Enregistrez le formulaire dans le dépôt

Collez dans index.html, une inclusion Jekyll ou votre section contact. Envoyez sur la branche Pages comme d’habitude.

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 GitHub Pages.

Respecte les limites de Pages

GitHub Pages n’exécute pas de backend et mailcontact le rend inutile. Le formulaire appelle ses serveurs ; votre dépôt reste entièrement statique.

Aucune adresse email dans votre dépôt public

Un lien mailto expose l’adresse à tous les collecteurs. Un point de réception et [email protected] gardent votre email personnel hors du dépôt.

Une boîte par dépôt publié

Documentation, portfolio, page de projet : chaque site GitHub Pages a sa boîte et son adresse, sans encombrer votre email.

FAQ

GitHub Pages + mailcontact : vos questions

GitHub Pages peut-il traiter seul les formulaires ?

Non. GitHub Pages sert des fichiers statiques sans code serveur : il ne peut pas traiter de POST. Les formulaires doivent envoyer vers un point de réception externe comme mailcontact.

Cela fonctionne-t-il avec Jekyll sur GitHub Pages ?

Oui. Le HTML fonctionne dans une mise en page Jekyll, une inclusion ou une page Markdown avec HTML. La compilation Jekyll de GitHub n’y touche pas.

Comment afficher une confirmation après un envoi ?

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

Puis-je adapter le formulaire à mon site ?

Tout à fait. C’est votre HTML. mailcontact fournit seulement le point de réception. Utilisez votre CSS, les classes de votre thème Jekyll ou autre chose ; aucun widget ni iframe.

voir aussi

Fonctionne aussi avec

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