Ogni invio del sito può arrivare come messaggio in un canale Discord in circa cinque minuti di configurazione. Due modi: scrivere una piccola funzione serverless che converte i POST nel formato webhook Discord, oppure puntare il modulo a un endpoint che lo supporta già. La guida mostra entrambi per aiutarti a scegliere.

Perché Discord invece dell’email

Se crei progetti personali, probabilmente hai già Discord aperto. L’email è la destinazione predefinita dei moduli, ma anche il luogo dove i messaggi scompaiono. La notifica finisce tra newsletter, ricevute e rumore GitHub, in una casella che controlli due volte al giorno. Un avviso in un #contact viene letto in pochi minuti. E un canale è condiviso per natura: un collaboratore può vedere un messaggio e rispondere senza che tu inoltri nulla.

Passaggio 1: crea un webhook Discord

Un webhook è un URL che permette di pubblicare messaggi in uno specifico canale del server. Crearne uno richiede un minuto:

  1. Apri il server Discord, fai clic sul nome in alto a sinistra e scegli Server Settings.
  2. Nella barra laterale sinistra, apri Integrazioni, poi Webhook.
  3. Fai clic su New Webhook. Discord ne crea uno con un nome casuale. Rinominalo, ad esempio “Modulo di contatto”, e scegli il canale in cui deve pubblicare (un #contact canale dedicato funziona bene).
  4. Fai clic su Copia URL webhook.

L’URL ha questo formato https://discord.com/api/webhooks/1234…/AbCd…. Trattalo come una password: chiunque lo possieda può pubblicare nel canale.

Passaggio 2, fai da te: codice per collegare modulo e webhook

Il punto è questo: un webhook Discord non è un endpoint per moduli. Richiede un POST con Content-Type: application/json e un corpo nel formato di Discord, almeno {"content": "your message"}. Un modulo HTML invia dati URL-encoded o multipart; quindi impostare il suo action direttamente all’URL webhook non funziona. Pubblicheresti anche l’URL nel sorgente, dove chiunque potrebbe copiarlo e inondare il canale.

La configurazione classica mette quindi una funzione serverless tra i due. Il modulo invia alla funzione, che riformatta i campi e li inoltra a 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");
}

Funziona ed è un buon progetto da weekend. Ma poi gestisci tutto: validazione, spam quando i bot trovano l’endpoint, limiti webhook Discord ed errori. Discord limita i messaggi a 2.000 caratteri, da cui il slice: i messaggi più lunghi vengono tagliati. Il limite maggiore è che Discord diventa la tua unica copia. Se la fetch fallisce o un messaggio scorre via mentre sei assente per il weekend, l’invio è perso. Nessun archivio, pulsante di risposta o stato “ho già risposto?”.

Passaggio 3, senza codice di collegamento: un endpoint compatibile con Discord

Con mailcontact, il codice di collegamento sparisce. Il modulo invia all’endpoint del progetto (semplice HTML, senza 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>

Poi aggiungi Discord come canale nelle impostazioni notifiche del progetto e incolla l’URL copiato al passo 1. È tutta la configurazione: ogni invio arriva nella casella e notifica il canale. La guida alle notifiche spiegano i dettagli.

Con MailContact Pro o Plus, l’URL webhook resta sul server anziché nel sorgente della pagina. Validazione e limiti sono gestiti per te. La casella conserva il messaggio completo anche oltre la lunghezza Discord. E ogni progetto ha anche una vera email come [email protected], i messaggi inviati per email notificano lo stesso canale: modulo ed email in un unico posto. Le notifiche Discord sono incluse in Pro e Plus.

Da sapere: l’endpoint risponde con JSON invece di reindirizzare; per mantenere i visitatori sulla pagina, invia gli stessi campi con poche righe di fetch. Il guida all’endpoint del modulo contengono un esempio da copiare. Gli invii nativi restituiscono JSON.

Il markup è identico qualunque sia lo strumento usato, ma cambia dove incollarlo. Ci sono versioni specifiche per Moduli di contatto Next.js, Moduli di contatto Astro, e Cloudflare Pages, che non dispone di alcuna gestione dei moduli.

Cosa contiene un buon avviso

Qualunque strada scegli, il messaggio Discord deve permettere di valutare dal telefono senza aprire altro. Servono quattro cose:

  • Nome: chi scrive, per sapere subito a chi rispondere.
  • Email: come rispondere. È il campo che le soluzioni fai da te dimenticano più spesso, trasformando una notifica in un vicolo cieco.
  • Messaggio: bastano le prime righe per decidere tra «ora», «stasera» e «ignora».
  • Origine: da quale modulo o indirizzo proviene, così la notifica è chiara anche quando gestisci più progetti.

Un buon avviso assomiglia a questo:

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

Mantieni la notifica facile da scorrere e il registro completo in un posto permanente. È per questo che canale più casella funziona meglio dei singoli. Versione da cinque minuti: crea un progetto, incolla lo snippet del modulo e l’URL webhook. Scegli Pro o Plus per collegare Discord. Se il sito è statico e senza backend, la guida dedicata a aggiungere un modulo di contatto a un sito statico copre quell’aspetto.