intégrations · static site generator

Un formulaire Hugo, sans runtime serveur.

Hugo has no server runtime: it compiles your whole site to static HTML at build time, so there's nothing running to receive a form submission. Point a plain <form> at your mailcontact endpoint instead 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 Hugo module.

Hugo produit du HTML : placez le formulaire dans layouts/partials/contact-form.html, à inclure partout avec {{ partial "contact-form.html" . }}. Écrivez une fois, réutilisez partout.

Le site construit n’est que des fichiers : il se déploie chez tout hébergeur statique, GitHub Pages, Cloudflare Pages, Netlify ou S3 derrière un CDN, formulaire compris.

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

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.

layouts/partials/contact-form.html

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

Ajoutez le partial

Enregistrez sous layouts/partials/contact-form.html et ajoutez {{ partial "contact-form.html" . }} dans la page ou le layout. Utilisez le CSS du thème.

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

Aucun environnement serveur à ajouter

Hugo génère des fichiers sans runtime pour les POST. Envoyer vers une URL externe évite d’ajouter une fonction serverless juste pour un formulaire.

Un partial, tous les modèles

Définissez contact-form.html une fois et utilisez {{ partial }} dans pages, listes ou shortcodes. Une modification met tout à jour.

Se déploie partout où Hugo fonctionne

Le formulaire voyage avec les fichiers vers GitHub Pages, Cloudflare Pages, Netlify ou S3. Aucune fonctionnalité propre à l’hébergeur.

FAQ

Hugo + mailcontact : vos questions

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

Non. Hugo génère du HTML statique : le formulaire envoie directement vers mailcontact, qui stocke le message et envoie les notifications. Rien ne s’exécute de votre côté.

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

Oui. Toute origine est acceptée : cela fonctionne partout où Hugo est servi, y compris GitHub Pages ou un bucket S3 sans formulaires natifs.

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

Tout à fait. mailcontact reçoit seulement le POST. Le HTML du partial vous appartient et la feuille de style de votre thème 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 un JSON comme {"ok": true}). La redirection native configurable n’est pas disponible actuellement.

voir aussi

Fonctionne aussi avec

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