Envoyer un formulaire HTML vers un webhook (sans backend)

Votre site est statique (HTML, Astro, Hugo, Jekyll…) ou vous ne voulez plus maintenir un script PHP mail() ? Vous pouvez envoyer un formulaire HTML directement vers un webhook, qui se charge d’envoyer l’e-mail, de prévenir votre équipe ou d’alimenter un CRM. Voici deux méthodes, de la plus simple à la plus propre.

Prérequis : une URL de webhook

Il vous faut une URL qui reçoit la requête. Avec Webhooky, créez un webhook formulaire : vous obtenez une URL du type https://webhooky.builders/webhook/form/VOTRE_JETON. Ajoutez ensuite une action, par exemple un e-mail via Mailjet ou une alerte Slack.

Méthode 1 : formulaire HTML classique (POST)

La méthode la plus simple : l’attribut action pointe vers le webhook. Les champs sont envoyés en application/x-www-form-urlencoded ; leurs attributs name deviennent les variables.

<form action="https://webhooky.builders/webhook/form/VOTRE_JETON" method="post">
  <label>Nom <input name="name" required></label>
  <label>E-mail <input type="email" name="email" required></label>
  <label>Message <textarea name="message" required></textarea></label>
  <button type="submit">Envoyer</button>
</form>

Limite : après l’envoi, le navigateur quitte votre page et affiche la réponse du service. Pour une meilleure expérience, préférez la méthode 2.

Méthode 2 : envoi en JSON avec fetch (recommandé)

Le JavaScript intercepte l’envoi, transmet les données en JSON et affiche un message de confirmation sans quitter la page. L’exemple inclut un champ piège anti-robots.

<form id="contact">
  <label>Nom <input name="name" required></label>
  <label>E-mail <input type="email" name="email" required></label>
  <label>Message <textarea name="message" required></textarea></label>
  <!-- Champ piège anti-robots : invisible pour les humains -->
  <input name="website" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px">
  <button type="submit">Envoyer</button>
  <p id="contact-status" role="status"></p>
</form>

<script>
  const form = document.getElementById('contact');
  const status = document.getElementById('contact-status');
  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const data = Object.fromEntries(new FormData(form));
    if (data.website) return; // robot probable : on ignore
    delete data.website;
    status.textContent = 'Envoi…';
    try {
      const res = await fetch('https://webhooky.builders/webhook/form/VOTRE_JETON', {
        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 (err) {
      status.textContent = 'Envoi impossible pour le moment, merci de réessayer.';
    }
  });
</script>

Tester et vérifier

1. Envoyez le formulaire avec des données de test.
2. Ouvrez les journaux d’exécution de votre webhook : vous voyez le payload reçu et le statut de chaque action.
3. Corrigez le mapping des variables si un champ est vide (vérifiez les attributs name).

Bonnes pratiques

• Ne mettez aucun secret dans le HTML (clé API, mot de passe) : seul le jeton de l’URL de webhook est exposé, et il ne donne accès qu’à l’envoi.
• Collectez uniquement les données nécessaires et mentionnez-les dans votre politique de confidentialité.
• Gérez les erreurs côté client (code 402 = quota atteint, 429 = trop de requêtes).
• Ajoutez l’attribut required et le bon type (email, tel) pour une première validation.

Questions fréquentes

Vous utilisez WordPress ? Lisez webhook WordPress. Une application Symfony ? Voir webhook Symfony.