Chaque formulaire du site peut publier un message dans Discord en environ cinq minutes. Deux options : écrire une petite fonction serverless qui traduit les champs au format webhook Discord, ou utiliser un point de réception déjà compatible. Ce guide présente les deux pour choisir.

Pourquoi Discord plutôt que votre messagerie

Si vous créez des projets personnels, Discord est probablement déjà ouvert. L’email est la destination habituelle des formulaires, mais aussi l’endroit où leurs messages se perdent. Une notification se retrouve entre newsletters, reçus et activité GitHub, dans une boîte consultée deux fois par jour. Une alerte dans un #contact un canal est consulté en quelques minutes. Un canal est partagé par défaut : un collaborateur peut repérer un message et y répondre sans que vous ayez à le transférer.

Étape 1 : créer un webhook Discord

Un webhook est une URL qui permet de publier des messages dans un canal précis de votre serveur. Sa création prend une minute :

  1. Ouvrez votre serveur Discord, cliquez sur son nom en haut à gauche et choisissez Server Settings.
  2. Dans la barre latérale gauche, ouvrez Intégrations, puis Webhooks.
  3. Cliquez sur New Webhook. Discord en crée un avec un nom aléatoire. Renommez-le, par exemple « Formulaire de contact », puis choisissez le canal de publication (un canal dédié #contact un canal convient bien).
  4. Cliquez sur Copier l’URL du webhook.

L’URL ressemble à https://discord.com/api/webhooks/1234…/AbCd…. Traitez-le comme un mot de passe : toute personne qui le possède peut publier dans ce canal.

Étape 2, solution maison : relier formulaire et webhook par du code

Le piège : un webhook Discord n’est pas un point de réception de formulaire. Il attend un POST avec Content-Type: application/json et un corps au format de Discord, au minimum {"content": "your message"}. Un formulaire HTML envoie des données encodées en URL ou multipart ; faire pointer l’attribut action directement vers l’URL du webhook échoue. Cela publierait aussi cette URL dans le code de la page, où chacun pourrait la copier pour inonder le canal.

La configuration classique insère donc une fonction serverless. Le formulaire lui envoie les données ; elle les reformate et les transmet à Discord :

// api/contact.js: a serverless function (Vercel, Netlify, etc.)
export default async function handler(req, res) {
  const { name, email, message } = req.body;

  if (!email || !message) {
    return res.status(400).json({ error: "email and message are required" });
  }

  await fetch(process.env.DISCORD_WEBHOOK_URL, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      content: `**${name || "Someone"}** <${email}>\n${message.slice(0, 1800)}`,
    }),
  });

  res.redirect(303, "/thanks.html");
}

Cela fonctionne et fait un bon projet de week-end. Mais tout le reste devient votre charge : validation, antispam, limites de débit Discord et erreurs. Les messages Discord sont limités à 2 000 caractères, d’où le slice: les messages longs sont coupés. Et surtout, Discord devient votre seule copie. Si la requête échoue ou qu’un message passe inaperçu pendant votre week-end, l’envoi est perdu. Pas d’archive, pas de bouton de réponse, pas de statut « ai-je répondu ? ».

Étape 3, solution directe : un point de réception compatible Discord

Avec mailcontact, le code de liaison disparaît. Votre formulaire envoie les données au point de réception de votre projet (HTML simple, sans JavaScript) :

<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="Your 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>

Puis, dans les notifications du projet, ajoutez Discord et collez le webhook copié à l’étape 1. C’est tout : chaque envoi arrive dans la boîte et alerte le canal. Le documentation des notifications détaillent le fonctionnement.

Avec MailContact Pro ou Plus, le webhook reste côté serveur au lieu du code de la page. Validation et débit sont gérés. La boîte garde le message complet même au-delà de la limite Discord. Chaque projet reçoit aussi une vraie adresse comme [email protected], les messages reçus par email déclenchent une alerte dans le même canal : formulaire et email au même endroit. Les notifications Discord sont incluses dans Pro et Plus.

À savoir : le point de réception répond en JSON au lieu de rediriger. Pour garder les visiteurs sur la page, envoyez les mêmes champs avec quelques lignes de fetch. Le documentation du point de réception proposent un exemple à copier-coller. Les envois natifs renvoient du JSON.

Le HTML est identique quel que soit l’outil ; seul l’emplacement où le coller change. Des versions spécifiques existent pour Formulaires de contact Next.js, Formulaires de contact Astro, et Cloudflare Pages, qui ne prend pas du tout en charge les formulaires.

Ce qu’une bonne alerte contient

Quelle que soit la méthode, l’alerte Discord doit permettre de trier depuis le téléphone sans rien ouvrir d’autre. Il faut quatre éléments :

  • Nom: qui vous écrit, pour savoir à qui répondre.
  • Email: comment répondre. C’est le champ le plus souvent oublié dans les solutions maison, ce qui transforme une alerte en impasse.
  • Message: les premières lignes suffisent pour choisir entre « maintenant », « ce soir » et « ignorer ».
  • Source: le formulaire ou l’adresse utilisé, pour identifier chaque alerte lorsque vous gérez plusieurs projets.

Une bonne alerte ressemble à ceci :

acme-site: new message
Ada Lovelace <[email protected]>
"Hey, the checkout button 404s on mobile. Happy to
send a screen recording if that helps."
via: contact form

Gardez l’alerte facile à parcourir et l’historique complet dans un espace durable. Cette séparation explique l’intérêt de combiner canal et boîte. Pour une configuration rapide : créez un projet, collez le formulaire puis l’URL du webhook. Choisissez Pro ou Plus pour connecter Discord. Si votre site est entièrement statique, le guide complémentaire sur ajouter un formulaire de contact à un site statique couvre cet aspect.