Formulaire de contact sur site statique, sans backend

Vous livrez un site Astro, Hugo, Next.js en export statique ou du HTML pur ? Voici comment recevoir les messages par e-mail (Mailjet) ou dans Slack en environ 3 minutes, avec un champ honeypot anti-spam.

Créer mon premier webhook gratuitement Guide détaillé formulaire HTML

Étape 1 — Créer le webhook formulaire

Créez un compte Webhooky (gratuit, 100 événements/mois).
Ajoutez un webhook de type formulaire : copiez l’URL https://webhooky.builders/webhook/form/VOTRE_JETON.
Ajoutez une action : e-mail via Mailjet, message Slack, ou les deux.

Étape 2 — Coller le code (copie en 1 clic)

Le script envoie du JSON en POST, ignore le champ piège website et affiche un message de statut sans quitter la page.

HTML + JavaScript — Astro / Next.js / HTML

<form id="contact">
  <label>Nom <input name="name" required autocomplete="name"></label>
  <label>E-mail <input type="email" name="email" required autocomplete="email"></label>
  <label>Message <textarea name="message" required></textarea></label>
  <input type="text" name="website" tabindex="-1" autocomplete="off" aria-hidden="true" class="hp">
  <button type="submit">Envoyer</button>
  <p id="contact-status" role="status"></p>
</form>

<style>.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}</style>

<script>
  const form = document.getElementById('contact');
  const status = document.getElementById('contact-status');
  const WEBHOOK = 'https://webhooky.builders/webhook/form/VOTRE_JETON';
  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const data = Object.fromEntries(new FormData(form));
    if (data.website) return;
    delete data.website;
    status.textContent = 'Envoi…';
    try {
      const res = await fetch(WEBHOOK, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify(data),
      });
      if (!res.ok) throw new Error('HTTP ' + res.status);
      form.reset();
      status.textContent = 'Merci, votre message a bien été envoyé.';
    } catch {
      status.textContent = 'Envoi impossible pour le moment.';
    }
  });
</script>

Étape 3 — Adapter à votre framework

Astro : placez le bloc dans un composant .astro ; le <script> est traité côté client.
Next.js (static export) : même code dans un composant client ou une page sans SSR.
Hugo / Jekyll : incluez le fragment dans votre partial contact.html.

RGPD et hébergement en France

Pour des clients français, documentez le sous-traitant (Webhooky, UE) dans votre politique de confidentialité. Comparez avec Formspree et alternatives US.

Questions fréquentes

Fonctionne-t-il avec Astro ou Next.js en export statique ?

Oui. Le JavaScript s’exécute côté navigateur et envoie les données à Webhooky ; aucun serveur Node ou PHP n’est requis en production.

Comment brancher Mailjet ou Slack ?

Dans le tableau de bord Webhooky, ajoutez une action Mailjet (e-mail) ou Slack (notification) sur le même webhook formulaire.

Le honeypot suffit-il contre le spam ?

Il filtre une grande partie des robots simples. Pour un site très exposé, ajoutez un captcha respectueux de la vie privée en complément.

Passez de l’idée au premier webhook en quelques minutes

Créez un compte gratuit, générez une URL et connectez votre première action.

Créer mon premier webhook gratuitement Voir les tarifs

Forfait Free · sans carte bancaire · 100 événements inclus