Invia i moduli di contatto a Slack senza backend

Per inviare i moduli del sito a Slack, collegali a un backend che salva gli invii e notifica tramite incoming webhook Slack. Con mailcontact usi l’endpoint del progetto e salvi il webhook nelle notifiche. Non serve pubblicare server o creare automazioni separate per ogni sito.

La guida usa semplice HTML, adatto a portfolio, landing page o sito statico. Le notifiche Slack richiedono Pro o Plus; scegli un piano. Il pagina prezzi descrive i piani e le quote messaggi attuali.

Come funziona la connessione tra modulo e Slack

Website contact form
  → mailcontact form endpoint
  → saved message in the project inbox
  → notification in your Slack channel

L’endpoint modulo va nell’HTML pubblico. Il webhook Slack va nelle impostazioni notifiche del progetto. Gli URL hanno scopi diversi: uno raccoglie messaggi dai visitatori, l’altro autorizza post nel canale.

Non inserire mai un webhook Slack in action, variabili frontend o script browser. L’URL contiene un segreto e Slack avverte che i webhook esposti possono essere revocati. Slack richiede inoltre il proprio payload JSON, non campi modulo arbitrari. Vedi Documentazione dei webhook in entrata Slack per le istruzioni ufficiali di configurazione e sicurezza.

1. Crea un webhook in entrata per il canale Slack

1. Apri le tue app Slack e crea o seleziona un’app nello spazio di lavoro desiderato.
2. Apri Incoming Webhooks e attivali.
3. Scegli Add New Webhook to Workspace, seleziona un canale e autorizzalo.
4. Copia l’URL del webhook generato. Per un canale privato, devi già esserne membro.

Scegli un canale i cui membri debbano vedere le richieste del sito. Le notifiche includono dati mittente e anteprima: un canale aziendale pubblico può essere inadatto a richieste private. Un canale dedicato distingue meglio gli avvisi dalle conversazioni quotidiane.

2. Salva il webhook in mailcontact

Apri il progetto in mailcontact e vai a Impostazioni → Notifiche, aggiungi una destinazione Slack e incolla l’URL del webhook. Attivala, poi usa il suo pulsante di prova. Verifica che il test appaia nel canale scelto prima di collegare il modulo reale.

Le notifiche appartengono al progetto. Se gestisci più progetti su Pro, configura ogni casella separatamente: possono avvisare tutte lo stesso canale Slack o avere destinazioni proprie. La riferimento delle notifiche include anche Discord, email e webhook personalizzati.

3. Collega il modulo di contatto del sito

Copia l’endpoint del modulo dal tuo progetto e sostituisci your-form-id in questo esempio. Il email e message i campi sono obbligatori; name e subject sono facoltativi.

<form action="https://mailcontact.app/api/forms/your-form-id" method="POST">
  <label for="contact-email">Your email</label>
  <input id="contact-email" type="email" name="email"
    autocomplete="email" maxlength="320" required />

  <label for="contact-message">Message</label>
  <textarea id="contact-message" name="message"
    maxlength="5000" required></textarea>

  <button type="submit">Send message</button>
  <input name="company_website" type="text" tabindex="-1" autocomplete="off"
    style="position:absolute;left:-10000px" aria-hidden="true" />
</form>

Un invio nativo apre il JSON in caso di successo o una pagina di verifica se necessario. Per i messaggi nella pagina usa il script MailContact ospitato: inserisce il controllo obbligatorio, gestisce la verifica automatica e conserva le bozze in caso di errore. I moduli con script Free richiedono un link visibile “Processed by mailcontact.app”. I messaggi in Spam non inviano avvisi Slack finché non vengono ripristinati.

L’endpoint funziona con diversi hosting. Puoi usarlo su GitHub Pages, in un Pagina contatti Astro, oppure con un modulo HTML esistente. Il frontend non richiede token Slack né SDK specifici.

4. Prova l’intero percorso: sito, casella e Slack

Invia dalla pagina reale un messaggio riconoscibile come “Test pagina contatti, 23 ottobre”. Verifica che appaia nella casella mailcontact corretta, poi controlla Slack. Il test della destinazione verifica il collegamento notifiche; il modulo reale verifica anche nomi dei campi ed endpoint del sito.

• Nessun messaggio nella casella: controlla l’endpoint del modulo, i campi obbligatori e lo stato della risposta. Un invio non valido o una quota mensile esaurita non crea un messaggio.
• Messaggio nella casella ma nessun avviso Slack: verifica che la destinazione sia attiva, controlla lo stato di consegna ed esegui una prova.
• Avviso nel canale sbagliato: controlla il webhook salvato per il progetto. Se necessario, creane uno per il canale giusto.

Gli errori temporanei delle notifiche vengono ritentati. Un errore Slack non cancella il messaggio già salvato in mailcontact. Usa la casella come riferimento quando l’anteprima è breve o cerchi una vecchia richiesta.

Le email in arrivo possono avvisare lo stesso canale Slack?

Sì, su Pro. Email di ricezione e modulo alimentano la stessa casella e i canali abilitati valgono per entrambi. Chi scrive direttamente può quindi attivare lo stesso avviso Slack del modulo. Ricevere email richiede Pro; Free riceve invii da modulo. Leggi la guida all’indirizzo email di progetto per i dettagli.