Webhook erklärt: Kontaktformular mit n8n automatisieren

Jemand füllt das Kontaktformular auf deiner Website aus, und dann? Im Idealfall landet die Anfrage sofort in deinem CRM, dein Team bekommt eine Nachricht in Teams oder Slack, und die Person erhält eine freundliche Bestätigung. In der Praxis liegt die Anfrage oft als E-Mail im Posteingang und wartet, bis jemand sie von Hand weiterträgt. Genau hier kommt der Webhook ins Spiel: ein Webhook ist die einfachste Art, wie deine Website anderen Systemen in Echtzeit mitteilt, dass etwas passiert ist. In dieser Anleitung erklären wir dir verständlich, was ein Webhook ist, und zeigen dir Schritt für Schritt, wie du dein Kontaktformular mit dem Automatisierungstool n8n verbindest. Mit Code, den du direkt übernehmen kannst, und mit den Sicherheitseinstellungen, die du dabei nicht vergessen solltest.

Was ist ein Webhook? Die Grundlagen in zwei Minuten

Stell dir zwei Möglichkeiten vor, wie du erfährst, ob ein Paket angekommen ist. Entweder du gehst alle zehn Minuten zum Briefkasten und schaust nach (das nennt man in der Technik «Polling»), oder der Postbote klingelt, sobald das Paket da ist. Ein Webhook ist der klingelnde Postbote. Sobald auf System A ein Ereignis eintritt (ein Formular wird abgeschickt, eine Zahlung geht ein, ein Ticket wird erstellt), schickt System A automatisch eine HTTP-Anfrage an eine vorher festgelegte URL von System B. Diese URL ist der Webhook. Im Paket der Anfrage stecken die Daten zum Ereignis, meist im JSON-Format.

Der Unterschied zu einer klassischen API ist die Richtung: Bei einer API fragst du aktiv nach Daten, beim Webhook werden dir die Daten geliefert, sobald sie entstehen. Das spart Ressourcen, ist praktisch sofort und braucht keine Programmierung auf der Empfängerseite, wenn du ein Tool wie n8n einsetzt.

Ein Webhook besteht technisch aus drei Dingen:

• Einer URL, an die die Daten gesendet werden (der Endpunkt).
• Einer HTTP-Methode, meistens POST, weil Daten übertragen werden.
• Einem Payload, also den eigentlichen Inhalten, zum Beispiel Name, E-Mail und Nachricht aus deinem Formular.

Warum sich der Webhook für dein KMU lohnt

Die meisten kleinen und mittleren Betriebe nutzen mehrere Tools nebeneinander: Website, CRM, Newsletter-Software, Buchhaltung, Terminplaner. Zwischen diesen Systemen entstehen Medienbrüche, und jeder Medienbruch kostet Zeit oder produziert Fehler. Webhooks schliessen diese Lücken. Ein paar typische Beispiele:

• Eine Anfrage aus dem Kontaktformular wird automatisch als Lead im CRM angelegt und dem richtigen Mitarbeiter zugewiesen.
• Eine Bestellung im Onlineshop löst eine Nachricht an das Lager und eine Rechnung in der Buchhaltung aus.
• Eine neue Terminbuchung schreibt sich in den Teamkalender und verschickt eine Erinnerung per SMS.
• Eine Bewertung auf Google wird sofort ins Team-Chat gepostet, damit du zeitnah antworten kannst.

Das Schöne daran: Du brauchst keine Schnittstelle programmieren zu lassen. Mit einem Werkzeug wie n8n baust du solche Abläufe visuell zusammen. Die Website liefert die Daten per Webhook, n8n verteilt sie weiter. Wenn du wissen willst, welche Prozesse sich in deinem Betrieb lohnen, findest du auf unserer Leistungsseite einen Überblick, wie wir Automatisierung angehen.

Was du für die Anleitung brauchst

Für das folgende Beispiel verbinden wir ein einfaches Kontaktformular mit n8n. Du brauchst dafür:

• Einen n8n-Zugang. Entweder n8n Cloud oder eine selbst gehostete Instanz. Für den Anfang reicht auch ein Testkonto.
• Eine Website mit einem Formular, bei der du HTML und ein wenig Server-Code (in unserem Beispiel PHP) anpassen kannst.
• Ein Ziel, wohin die Daten fliessen sollen: eine E-Mail-Adresse, ein Google Sheet, dein CRM oder ein Chat-Kanal.

Rechne für den ersten Durchlauf mit etwa einer Stunde. Beim zweiten Workflow bist du deutlich schneller.

Schritt 1: Den Webhook in n8n anlegen

Erstelle in n8n einen neuen Workflow und wähle als ersten Schritt den Trigger «On webhook call». Dieser Webhook-Node ist ein sogenannter Trigger-Node, das heisst, er startet den Workflow, sobald Daten eintreffen. In den Einstellungen des Nodes stellst du ein:

• HTTP Method: POST, weil dein Formular Daten sendet.
• Path: n8n erzeugt automatisch einen zufälligen Pfad. Du kannst ihn durch etwas Lesbares wie kontaktformular ersetzen, was die Pflege später erleichtert. Zufällige Pfade sind allerdings schwerer zu erraten, was ein kleiner Sicherheitsvorteil ist.
• Respond: Für ein Kontaktformular reicht «Immediately». Der Webhook antwortet dann sofort mit einem Statuscode, und der Rest des Workflows läuft im Hintergrund.

Oben im Node siehst du zwei Adressen: eine Test-URL und eine Produktions-URL. Das ist ein wichtiger Punkt, der Einsteiger oft verwirrt. Die Test-URL funktioniert nur, solange du im Editor auf «Listen for Test Event» klickst, und zeigt dir die empfangenen Daten direkt im Editor an. Die Produktions-URL wird erst aktiv, wenn du den Workflow veröffentlichst. Sie zeigt im Editor nichts an, du findest die Durchläufe aber unter «Executions». Für die Entwicklung nutzt du die Test-URL, für die fertige Website die Produktions-URL.

Schritt 2: Das Formular anbinden

Es gibt zwei Wege, dein Formular an den Webhook zu hängen. Der schnelle Weg: Du trägst die Webhook-URL direkt als action im HTML-Formular ein. Das funktioniert, hat aber zwei Nachteile. Erstens sieht jeder im Quelltext deine Webhook-Adresse, zweitens landet die Person nach dem Absenden auf einer nackten JSON-Antwort statt auf einer Danke-Seite.

Der sauberere Weg: Dein Server nimmt das Formular entgegen, prüft die Eingaben und reicht sie erst dann an n8n weiter. So bleibt die Webhook-URL samt Zugangsdaten unsichtbar, und du behältst die Kontrolle über die Danke-Seite. Das HTML-Formular sieht dabei ganz normal aus:

<form action="/kontakt-senden.php" method="post">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">E-Mail</label>
  <input type="email" id="email" name="email" required>

  <label for="nachricht">Nachricht</label>
  <textarea id="nachricht" name="nachricht" required></textarea>

  <!-- Honeypot gegen Spam-Bots: bleibt für Menschen unsichtbar -->
  <input type="text" name="website" style="display:none" tabindex="-1" autocomplete="off">

  <button type="submit">Absenden</button>
</form>

Wichtig: Jedes Feld braucht ein name-Attribut, denn genau unter diesem Namen tauchen die Werte später in n8n auf. Das versteckte Feld «website» ist ein Honeypot: Menschen sehen es nicht und lassen es leer, Spam-Bots füllen es oft aus. Ist es gefüllt, verwirfst du die Anfrage.

Das dazugehörige PHP-Skript leitet die geprüften Daten als JSON an n8n weiter:

<?php
// kontakt-senden.php
if ($_SERVER['REQUEST_METHOD'] !== 'POST') { exit; }

// Honeypot: Bots füllen das unsichtbare Feld aus
if (!empty($_POST['website'])) { header('Location: /danke'); exit; }

$name      = trim($_POST['name'] ?? '');
$email     = trim($_POST['email'] ?? '');
$nachricht = trim($_POST['nachricht'] ?? '');

if ($name === '' || !filter_var($email, FILTER_VALIDATE_EMAIL) || $nachricht === '') {
    header('Location: /kontakt?fehler=1'); exit;
}

$payload = json_encode([
    'name'      => $name,
    'email'     => $email,
    'nachricht' => $nachricht,
    'quelle'    => 'wosa.ch Kontaktformular',
    'zeit'      => date('c'),
]);

$ch = curl_init('https://deine-instanz.app.n8n.cloud/webhook/kontaktformular');
curl_setopt_array($ch, [
    CURLOPT_POST           => true,
    CURLOPT_POSTFIELDS     => $payload,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_TIMEOUT        => 10,
    CURLOPT_HTTPHEADER     => [
        'Content-Type: application/json',
        'X-Webhook-Secret: ' . getenv('N8N_WEBHOOK_SECRET'),
    ],
]);
curl_exec($ch);
curl_close($ch);

header('Location: /danke');
exit;

Was passiert hier? Das Skript nimmt nur POST-Anfragen an, prüft den Honeypot, validiert die E-Mail-Adresse und baut ein JSON-Paket. Dieses schickt es per cURL an die Produktions-URL deines Webhooks. Der Header X-Webhook-Secret enthält ein geheimes Passwort, das du in n8n prüfst (dazu gleich mehr). Das Geheimnis liegt in einer Umgebungsvariablen und nicht im Code, damit es nicht versehentlich in einem Git-Repository landet. Zum Schluss leitest du die Person auf deine Danke-Seite weiter. Für den Test tauschst du die Produktions-URL vorübergehend gegen die Test-URL aus und klickst in n8n auf «Listen for Test Event», bevor du das Formular abschickst.

Schritt 3: Daten prüfen und aufbereiten

Nach dem ersten Testlauf siehst du im Webhook-Node die empfangenen Daten. Dein JSON findest du unter body, also zum Beispiel {{ $json.body.email }}. Bevor du die Daten weiterschickst, lohnt sich ein Node «Edit Fields (Set)», in dem du die Felder sauber benennst, den Namen in Vor- und Nachname trennst oder einen Zeitstempel im Schweizer Format ergänzst.

Praktisch ist auch die Option «Only Run If» im Webhook-Node: Dort hinterlegst du einen Ausdruck, und der Workflow startet nur, wenn er wahr ist. Damit kannst du beispielsweise Anfragen ohne gültige Quelle direkt aussortieren, ohne dass überhaupt eine Ausführung entsteht. Für Verzweigungen im Ablauf nutzt du den «IF»-Node: Enthält die Nachricht das Wort «Offerte», geht sie an den Verkauf, sonst an den Support.

Schritt 4: Aktionen anhängen

Jetzt entscheidest du, was mit der Anfrage passieren soll. In n8n hängst du dafür einfach weitere Nodes an. Für ein Kontaktformular hat sich diese Kombination bewährt:

• CRM-Node: Die Anfrage wird als neuer Kontakt oder Lead angelegt. n8n bringt Nodes für HubSpot, Pipedrive, Zoho und viele weitere mit. Für ein eigenes CRM nimmst du den «HTTP Request»-Node und rufst dessen API auf.
• Chat-Benachrichtigung: Ein Slack- oder Microsoft-Teams-Node postet eine kurze Zusammenfassung in den Vertriebskanal.
• Bestätigungs-E-Mail: Ein E-Mail-Node (SMTP, Gmail oder Outlook) schickt der Person eine persönliche Antwort mit ihrem Namen und der voraussichtlichen Reaktionszeit.
• Archiv: Ein Google-Sheets- oder Datenbank-Node protokolliert jede Anfrage, damit du später auswerten kannst, woher deine Leads kommen.

Ein Tipp aus der Praxis: Baue den Workflow zuerst mit einem einzigen Ziel, teste ihn gründlich und ergänze danach Schritt für Schritt weitere Aktionen. So findest du Fehler viel schneller.

Schritt 5: Die Antwort steuern

Der Webhook-Node kann auf drei Arten antworten. «Immediately» gibt sofort den Statuscode zurück, ideal für unser Formular. «When Last Node Finishes» wartet, bis der ganze Workflow durchgelaufen ist, und liefert das Ergebnis des letzten Nodes zurück. Das ist praktisch, wenn du n8n als kleine API nutzen willst, zum Beispiel für eine Preisberechnung, die deine Website live anzeigt. Und mit «Using Respond to Webhook Node» bestimmst du an einer beliebigen Stelle im Workflow selbst, was zurückgeschickt wird, etwa eine individuelle Fehlermeldung oder JSON für dein Frontend.

Schritt 6: Live schalten und überwachen

Wenn alles funktioniert, veröffentlichst du den Workflow. Erst jetzt ist die Produktions-URL aktiv. Trage sie in deinem PHP-Skript ein und schicke eine echte Testanfrage ab. Unter «Executions» siehst du jeden Durchlauf mit allen Daten und kannst bei Fehlern genau nachvollziehen, welcher Node gestolpert ist. Aktiviere ausserdem im Workflow die Fehlerbenachrichtigung, damit du eine Nachricht bekommst, wenn eine Ausführung scheitert. Nichts ist ärgerlicher als ein Kontaktformular, das wochenlang still Anfragen verliert.

Sicherheit: Diese Einstellungen solltest du nicht überspringen

Ein Webhook ist eine öffentlich erreichbare URL. Jeder, der sie kennt, kann Daten hineinschicken. Deshalb gehören ein paar Schutzmassnahmen zum Standard:

• Authentifizierung aktivieren: Der Webhook-Node unterstützt Basic Auth, Header Auth und JWT. Für unser Beispiel nimmst du Header Auth mit dem Header X-Webhook-Secret, dessen Wert du als Credential in n8n hinterlegst. Anfragen ohne passendes Geheimnis werden abgewiesen.
• IP-Allowlist: Wenn nur dein Webserver den Webhook aufrufen soll, trägst du dessen IP-Adresse in die Allowlist ein. Alle anderen Absender bekommen einen 403-Fehler.
• Ignore Bots: Diese Option filtert Anfragen von Link-Vorschau-Diensten und Crawlern heraus, die sonst leere Ausführungen erzeugen.
• Nur HTTPS: Sowohl deine Website als auch n8n müssen verschlüsselt erreichbar sein, sonst wandern Kundendaten im Klartext durchs Netz.
• Payload-Grenze beachten: n8n nimmt standardmässig maximal 16 MB pro Anfrage an. Für Formulare ist das mehr als genug, bei Datei-Uploads solltest du es im Blick behalten.
• Daten sparsam senden: Übertrage nur, was der Workflow wirklich braucht. Das ist nicht nur sicherer, sondern auch im Sinne des Datenschutzgesetzes.

Typische Stolpersteine

Aus unserer Erfahrung scheitern die ersten Webhook-Workflows fast immer an denselben Kleinigkeiten. Der Klassiker: Das Formular sendet an die Test-URL, aber niemand hat in n8n auf «Listen for Test Event» geklickt, also kommt nichts an. Zweiter Klassiker: Der Workflow ist nicht veröffentlicht, die Produktions-URL antwortet mit einem 404-Fehler. Dritter Punkt: Das PHP-Skript sendet Formulardaten, aber der Header Content-Type fehlt, und n8n legt die Daten nicht unter body ab, wo du sie erwartest. Und schliesslich: Beim Wechsel von Test auf Produktion vergisst man gern, die URL im Skript anzupassen. Prüf diese vier Punkte zuerst, bevor du lange nach komplizierteren Ursachen suchst.

Fazit: Der Webhook ist dein Einstieg in echte Automatisierung

Mit einem einzigen Webhook verwandelst du dein Kontaktformular von einer Einbahnstrasse in den Startpunkt eines automatisierten Ablaufs. Die Anfrage landet dort, wo sie hingehört, dein Team wird sofort informiert, und die anfragende Person bekommt eine schnelle Antwort. Das gleiche Prinzip funktioniert für Bestellungen, Buchungen, Bewertungen und praktisch jedes Ereignis auf deiner Website. Wenn du dir beim Aufbau Unterstützung wünschst oder deine bestehende Website erst webhook-tauglich machen möchtest, melde dich bei uns. Wir helfen dir, die Abläufe zu finden, die dir am meisten Zeit sparen, und setzen sie sauber und sicher um.

Häufige Fragen

Was ist der Unterschied zwischen Webhook und API?

Bei einer API fragst du aktiv Daten ab, oft in regelmässigen Abständen. Ein Webhook dreht das um: Das Quellsystem schickt dir die Daten von selbst, sobald ein Ereignis eintritt. Webhooks sind deshalb schneller und sparsamer, brauchen aber eine öffentlich erreichbare URL auf der Empfängerseite.

Brauche ich für n8n Programmierkenntnisse?

Für den hier gezeigten Workflow nicht. Du klickst die Nodes visuell zusammen und trägst Werte in Felder ein. Lediglich das Anbinden deines eigenen Formulars braucht ein paar Zeilen Server-Code, wie im Beispiel gezeigt. Viele Website-Systeme bieten alternativ fertige Webhook-Funktionen für ihre Formulare an.

Ist ein Webhook sicher genug für Kundendaten?

Ja, wenn du ihn richtig absicherst: Authentifizierung per Header oder JWT, IP-Allowlist, HTTPS und sparsame Datenübertragung. Ohne diese Massnahmen ist die URL ein offenes Tor, mit ihnen ist der Webhook ein sicherer Standard, den auch grosse Zahlungsanbieter täglich millionenfach nutzen.