Kontaktformularnachrichten ohne Backend an Slack senden

Für Slack verbindest du dein Formular mit einem Backend, das Einsendungen speichert und per Slack-Webhook meldet. Mit Mailcontact nutzt du den Projekt-Endpunkt und speicherst den Webhook in den Benachrichtigungseinstellungen. Ohne eigenen Server oder separate Automatisierung pro Website.

Diese Anleitung nutzt einfaches HTML und passt zu Portfolio, Produkt-Landingpage oder statischer Website. Slack-Benachrichtigungen erfordern Pro oder Plus; Tarif wählen. Das Preisseite beschreibt aktuelle Tarife und Nachrichtenkontingente.

So funktioniert die Formular-Slack-Verbindung

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

Der Formular-Endpunkt gehört ins öffentliche HTML, der Slack-Webhook in die Projekt-Benachrichtigungseinstellungen. Die URLs haben verschiedene Zwecke: Eine sammelt Besucheranfragen, die andere erlaubt Posts in deinen Kanal.

Veröffentliche Slack-Webhooks nie in form action, Frontend-Umgebungsvariablen oder Browserskripten. Die URL enthält ein Geheimnis. Slack kann geleakte Webhooks widerrufen. Slack erwartet außerdem sein eigenes JSON-Format statt beliebiger Formularfelder. Siehe Slack-Dokumentation zu eingehenden Webhooks für offizielle Einrichtungs- und Sicherheitshinweise.

1. Eingehenden Webhook für deinen Slack-Kanal erstellen

1. Öffnen deine Slack-Apps und erstelle oder wähle eine App im gewünschten Workspace.
2. Öffnen Eingehende Webhooks und aktiviere sie.
3. Auswählen Neuen Webhook zum Workspace hinzufügen, wähle einen Kanal und erteile die Berechtigung.
4. Kopiere die erzeugte Webhook-URL. Bei privaten Kanälen musst du bereits Mitglied sein.

Wähle einen Kanal, dessen Mitglieder Website-Anfragen sehen dürfen. Benachrichtigungen enthalten Absender und Nachrichtenvorschau; ein öffentlicher Unternehmenskanal passt daher kaum für private Supportanfragen. Ein eigener Projektkanal trennt Meldungen außerdem vom Alltagsgespräch.

2. Webhook in Mailcontact speichern

Öffne dein Projekt in Mailcontact und gehe zu Einstellungen → Benachrichtigungen, füge ein Slack-Ziel hinzu und füge die Webhook-URL ein. Aktiviere es und nutze dann die Testschaltfläche. Prüfe, ob der Test im gewählten Kanal erscheint, bevor du das echte Formular verbindest.

Benachrichtigungseinstellungen gehören zu einem Projekt. Bei mehreren Pro-Projekten richte jedes Postfach einzeln ein. Alle können denselben Slack-Kanal oder jeweils eigene Ziele benachrichtigen. Die Benachrichtigungsreferenz umfasst auch Discord, E-Mail und eigene Webhooks.

3. Kontaktformular deiner Website verbinden

Kopiere den Formular-Endpunkt aus deinem Projekt und ersetze your-form-id in diesem Beispiel. Das email und message Felder sind erforderlich; name und subject sind optional.

<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>

Eine native Einsendung öffnet bei Erfolg JSON oder bei Bedarf eine Prüfseite. Für Rückmeldungen direkt im Formular nutze das gehostetes MailContact-Skript: Es fügt die Pflichtprüfung ein, übernimmt die automatische Verifizierung und bewahrt Entwürfe bei Fehlern. Free-Skriptformulare benötigen einen sichtbaren Link „Processed by mailcontact.app“. Nachrichten in Spam lösen erst nach ihrer Wiederherstellung eine Slack-Benachrichtigung aus.

Der Endpunkt funktioniert bei verschiedenen Hosts. Du kannst ihn nutzen auf GitHub Pages, in einem Astro-Kontaktseite, oder mit einem vorhandenen HTML-Formular. Dein Frontend braucht weder ein Slack-Token noch ein anbieterspezifisches SDK.

4. Gesamten Weg von Website über Postfach bis Slack testen

Sende eine eindeutige Nachricht wie „Kontaktseitentest, 23. Oktober“ über die echte Seite. Prüfe das richtige Mailcontact-Postfach und danach die Slack-Meldung. Der Zieltest prüft die Benachrichtigungsverbindung; das echte Formular prüft zusätzlich Feldnamen und Endpunkt deiner Website.

• Keine Nachricht im Postfach: Prüfe Endpunkt, Pflichtfelder und Antwortstatus. Bei ungültiger Einsendung oder ausgeschöpftem Monatskontingent wird keine Nachricht erstellt.
• Nachricht im Postfach, aber keine Slack-Benachrichtigung: Prüfe, ob das Ziel aktiv ist, kontrolliere den Zustellstatus und teste das Ziel.
• Benachrichtigung im falschen Kanal: Prüfe den gespeicherten Webhook für dieses Projekt. Erstelle bei Bedarf einen Webhook für den gewünschten Kanal.

Vorübergehende Benachrichtigungsfehler werden erneut versucht. Ein Slack-Fehler löscht keine bereits in Mailcontact gespeicherte Nachricht. Nutze das Postfach als vollständigen Nachweis, wenn die Kanalvorschau zu kurz ist oder du ältere Anfragen suchst.

Können eingehende E-Mails denselben Slack-Kanal benachrichtigen?

Ja, mit Pro. Empfangsadresse und Formular führen ins gleiche Postfach. Aktivierte Ziele gelten für beides. Eine direkte E-Mail kann daher dieselbe Slack-Meldung auslösen wie eine Formulareinsendung. Empfang erfordert Pro; Free empfängt Formulare. Lies die Anleitung zur Projektadresse für die Details.