Ajouter un formulaire de contact à un site Hugo (sans backend)

Par Maxime Branger · Publié le 24 septembre 2026

Pourquoi c'est compliqué avec Hugo

Hugo génère des fichiers statiques. Il n'y a rien côté serveur pour traiter une soumission. On va donc créer un shortcode qui envoie les données à AirMess, et vous pourrez l'insérer dans n'importe quelle page.

Étape 1 : déclarer l'URL dans la configuration

Dans hugo.toml :

[params.airmess]
  formUrl = "https://airmess.fr/api/submit/VOTRE_TOKEN"

Garder l'URL dans la configuration permet de la changer sans toucher aux templates.

Étape 2 : créer le shortcode

Créez layouts/shortcodes/contact.html :

<form id="contact-form" action="{{ site.Params.airmess.formUrl }}" method="POST">
  <label for="name">Nom</label>
  <input id="name" name="name" type="text" required>

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

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <button type="submit">Envoyer</button>
  <p id="contact-status" role="status"></p>
</form>

<script>
  const form = document.querySelector('#contact-form');
  const status = document.querySelector('#contact-status');

  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const button = form.querySelector('button');
    button.disabled = true;
    status.textContent = 'Envoi en cours…';

    try {
      const res = await fetch(form.action, {
        method: 'POST',
        body: new FormData(form),
      });
      if (!res.ok) throw new Error(String(res.status));
      form.reset();
      status.textContent = 'Merci, votre message a bien été envoyé.';
    } catch {
      status.textContent = "L'envoi a échoué. Réessayez dans un instant.";
    } finally {
      button.disabled = false;
    }
  });
</script>

Étape 3 : l'utiliser dans une page

Dans content/contact.md :

---
title: "Contact"
---

Une question ? Écrivez-moi.

{{< contact >}}

Remarques

Si votre thème bloque les scripts inline via une Content Security Policy, déplacez le script dans static/js/contact.js et chargez-le avec une balise <script src> . Pour les tests avec hugo server , vérifiez que votre origine locale est autorisée.

Le code complet de ce tutoriel est disponible sur GitHub.