So senden Sie WordPress-Formulardaten mit Webhooks an jede API

WPForms hat ein Addon für etwa vierzig Dienste. Mailchimp, Salesforce, Stripe, Google Sheets und der Rest des üblichen Stacks sind nur einen Einrichtungsschirm entfernt. Das interne Buchungssystem Ihres Kunden ist es nicht.

Das Webhooks-Addon schließt diese Lücke. Es nimmt eine Formulareinreichung entgegen und sendet sie als HTTP-Anfrage an jede URL, auf die Sie es richten, in dem Format, das die empfangende API erwartet. Dieses Tutorial führt Sie durch die Einrichtung: Abrufen der Endpunktdetails, Zuordnen Ihrer Felder, Hinzufügen der Authentifizierung und Testen, bevor eine tatsächliche Einreichung davon abhängt.

Erstellen Sie jetzt Ihr WordPress-Formular

So senden Sie WordPress-Formulardaten mit Webhooks an jede API

Ein Besucher sendet Ihr Formular ab. WPForms formt die Antworten in eine HTTP-Anfrage um, wie Ihre API es wünscht, fügt Ihren Authentifizierungsheader hinzu und sendet sie. Ihr Eintrag wird in beiden Fällen in WordPress gespeichert.

Wann ein Webhook das richtige Werkzeug ist

Prüfen Sie zuerst auf ein natives Addon. Mailchimp, Salesforce, Google Sheets, Notion, Airtable und etwa vierzig andere lassen sich mit wenigen Klicks verbinden, und diese Verbindungen sind tiefer. Zapier, Make und n8n decken die lange Liste von SaaS-Anwendungen ab, mit Kosten pro Aufgabe und einem weiteren Konto in der Kette.

Webhooks sind für den Rest: ein proprietäres internes System, ein regionaler Dienst, das benutzerdefinierte Backend eines Kunden, ein Endpunkt, den Sie selbst geschrieben haben. Sie haben auch keine Übertragungsobergrenze, sodass ein Formular, das 4.000 Einreichungen pro Monat aufnimmt, genauso viel kostet wie eines, das 40 aufnimmt.

Was Sie benötigen werden

• WPForms Elite (das Webhooks-Addon ist in dieser Lizenzstufe enthalten)
• Ein Formular auf Ihrer Website
• Die Dokumentation der empfangenden API

Sie werden keinen Code schreiben. All dies geschieht im Formular-Builder.

Schritt 1: Holen Sie sich die Details von der API

Das Überspringen dieses Schritts ist der Grund, warum die meisten Webhooks beim ersten Versuch fehlschlagen. Notieren Sie sich aus den API-Dokumenten:

1. Die Endpunkt-URL, wie https://api.example.com/v1/deliveries
2. Die Request-Methode, normalerweise POST zum Erstellen eines Datensatzes
3. Die Authentifizierungsmethode, normalerweise ein Schlüssel in einem Header wie Authorization: Bearer YOUR_KEY
4. Die genauen Parameternamen. Wenn die API customer_email erwartet und Sie email senden, ist die Anfrage erfolgreich und der Wert verschwindet.

Beispiel in der Praxis: Ein Floristenkunde, dessen Lieferdispositionsystem neue Bestellungen an diesem Endpunkt per POST entgegennimmt und customer_name, customer_email, customer_phone, arrangement, quantity und order_total erwartet. Es gibt kein WordPress-Plugin dafür, und genau dann greifen Sie zu einem Webhook.

Schritt 2: Installieren Sie das Addon und aktivieren Sie es

Gehen Sie zu WPForms » Addons, suchen Sie nach Webhooks und klicken Sie auf Addon installieren. Es aktiviert sich selbst.

Öffnen Sie dann Ihr Formular, klicken Sie auf Einstellungen » Webhooks und aktivieren Sie Webhooks aktivieren.

Klicken Sie auf das Stiftsymbol, um es in etwas umzubenennen, das Sie später wiedererkennen, z. B. „Dispatch API“.

Schritt 3: Legen Sie die Anforderungs-URL, -methode und das -format fest

Konfigurieren Sie als Nächstes diese Einstellungen:

Request-URL. Fügen Sie den Endpunkt ein. Achten Sie auf den Versionssegment, da /v1/ und /v2/ leicht zu verwechseln sind.

Request-Methode. GET, POST, PUT, PATCH oder DELETE. POST erstellt einen neuen Datensatz und deckt die meisten Setups ab.

Request-Format. JSON sendet application/json und eignet sich für die meisten modernen APIs. FORM sendet application/x-www-form-urlencoded, verwenden Sie es also nur, wenn die Dokumentation dies verlangt. Im Zweifelsfall JSON.

Schritt 4: Fügen Sie Ihre Authentifizierungsheader hinzu

Fügen Sie schließlich Ihre Authentifizierungs-Header hinzu.

Request-Header nimmt Schlüssel/Wert-Paare auf. Für ein Bearer-Token verwenden Sie Authorization als Schlüssel und Bearer YOUR_TOKEN als Wert. Für einen benutzerdefinierten Header verwenden Sie den Namen, den die Dokumentation angibt, z. B. X-API-Key. Fügen Sie so viele Zeilen hinzu, wie Sie benötigen.

Das Feld Secret funktioniert umgekehrt und WPForms füllt es für Sie aus. Es signiert jede ausgehende Anfrage, damit der empfangende Server bestätigen kann, dass die Daten wirklich von Ihrer Website stammen. Verwenden Sie es, wenn Sie den Endpunkt kontrollieren und die Signatur überprüfen können; die meisten Drittanbieter-APIs ignorieren es.

Behandeln Sie den Header-Wert wie die Anmeldeinformation, die er ist. Jeder mit Builder-Zugriff kann ihn lesen. Beschränken Sie daher die API-Schlüssel von Kunden eng und rotieren Sie sie, wenn jemand das Projekt verlässt.

Erstellen Sie jetzt Ihr WordPress-Formular

Schritt 5: Ordnen Sie Ihre Formularfelder zu

Der Request Body ist dort, wo das Formular auf die API trifft. Jede Zeile ordnet einen Parameternamen, den Sie eingeben, einem Feld zu, das Sie auswählen:

• customer_name → Name
• customer_email → E-Mail
• customer_phone → Telefonnummer
• arrangement → Arrangement
• quantity → Menge
• order_total → Gesamtbetrag

Kopieren Sie die Schlüsselnamen direkt aus der Dokumentation. Groß-/Kleinschreibung und Unterstriche sind wichtig, und ein Fehler führt dazu, dass die Anfrage erfolgreich ist, aber der Wert ignoriert wird.

Kontrollkästchen, Mehrfachauswahlen und Adressfelder senden Werte, die durch ein doppeltes Pipe-Symbol (||) getrennt sind. Trennen Sie diese Zeichenkette serverseitig, falls die API ein Array erwartet.

Wählen Sie Benutzerdefinierten Wert hinzufügen, um etwas zu senden, das kein Formularfeld ist, wie z. B. ein statischer source-Parameter oder ein Smart Tag für die Eingabe-ID.

Schritt 6: Fügen Sie bedingte Logik hinzu (optional)

Schalten Sie Bedingte Logik aktivieren um zu steuern, wann der Webhook ausgelöst wird. Sie möchten vielleicht nur einen Arrangement-Typ an die Dispatch-API senden oder Bestellungen zurückhalten, die überhaupt keine Lieferung benötigen. Für zwei Ziele klicken Sie auf Neuen Webhook hinzufügen und geben jedem seine eigene Regel.

Schritt 7: Testen Sie, bevor Sie live gehen

Testen Sie in zwei Schritten.

Senden Sie zuerst an einen Request Inspector. Webhook.site und RequestBin generieren eine temporäre URL, die genau zeigt, was angekommen ist. Fügen Sie sie in die Request URL ein, speichern Sie und senden Sie das Formular ab. Ihre Header und die Payload werden sofort angezeigt, was Ihnen zeigt, ob die Schlüsselnamen korrekt sind.

Wechseln Sie dann zum echten Endpunkt, senden Sie erneut ab und bestätigen Sie, dass der Datensatz angekommen ist. Überprüfen Sie auch WPForms » Einträge.

Wenn Sie nicht weiterkommen, gehen Sie zu WPForms » Werkzeuge » Protokolle, aktivieren Sie Protokolle aktivieren und überprüfen Sie Anbieter und Fehler unter Protokolltypen. Senden Sie erneut ab und das Protokoll zeigt die Antwort der API. Schalten Sie die Protokollierung danach wieder aus, da diese Einträge Daten enthalten können, die Sie nicht auf dem Server speichern möchten.

Häufige Webhook-Fehler

• 401 oder 403. Authentifizierung: falscher Schlüssel, abgelaufener Schlüssel, fehlendes Bearer-Präfix oder falscher Header-Name.
• 404. Die URL: Tippfehler, fehlendes Versionssegment oder ein abschließender Schrägstrich, den die API ablehnt.
• 400 oder 422. Die API hat die Anfrage erhalten und den Inhalt abgelehnt, normalerweise ein fehlender erforderlicher Parameter oder ein nicht interpretierbares Datum.
• 200, aber nichts erscheint. Schlüsselnamen-Konflikt: Die API hat die Anfrage akzeptiert und die Felder ignoriert, die sie nicht erkannte.
• Nichts wird ausgelöst. Bedingte Logik prüfen: Bei mehrseitigen Formularen wird der Webhook einmal nach dem endgültigen Absenden ausgeführt.

FAQs zum Senden von WordPress-Formulardaten an eine API

Welcher WPForms-Plan beinhaltet das Webhooks-Addon?

Elite. Diese Stufe deckt auch Salesforce, Authorize.Net, ActiveCampaign und Airtable ab, weshalb Agenturen, die benutzerdefinierte Integrationsarbeiten durchführen, normalerweise dort landen.

Muss ich programmieren können, um Webhooks zu verwenden?

Nein. Alles geschieht im WPForms-Builder. Sie müssen lediglich die Dokumentation der API gut genug lesen, um ihre URL, ihre Authentifizierungsmethode und ihre Parameternamen zu finden.

Was ist der Unterschied zwischen Webhooks und den Addons Zapier oder Make?

Zapier und Make sitzen zwischen Ihrem Formular und dem Ziel und bieten Ihnen mehrstufige Workflows und einen großen Katalog von Verbindungen zu einem Preis pro Aufgabe. Ein Webhook geht direkt zum Endpunkt, funktioniert mit jeder API und zählt keine Einreichungen.

Kann ein Formular Daten an mehr als eine API senden?

Ja. Klicken Sie auf „Neuen Webhook hinzufügen“ und konfigurieren Sie die zweite Verbindung mit ihrer eigenen URL, Headern und Zuordnung. Jede kann ihre eigene bedingte Logik tragen.

Wie sende ich einen API-Schlüssel mit meinen Formulardaten?

Fügen Sie ihn in den Anforderungsheadern als Schlüssel/Wert-Paar hinzu. Die meisten APIs erwarten „Authorization“ und „Bearer DEIN_SCHLÜSSEL“, obwohl einige einen benutzerdefinierten Namen wie „X-API-Key“ verwenden.

Was passiert, wenn die API nicht verfügbar ist, wenn jemand mein Formular absendet?

Die Einreichung wird trotzdem abgeschlossen und Ihr Eintrag und Ihre Benachrichtigungen werden durchlaufen, da der Webhook eine separate Anfrage ist. Nur der Webhook schlägt fehl. Fügen Sie daher für geschäftskritische Dinge eine Überwachung auf der Empfängerseite hinzu.

Leiten Sie Ihre Einreichungen als Nächstes automatisch an den richtigen Ort weiter

Wenn die API-Verbindung funktioniert, besteht der nächste Schritt darin, sie zu umgehen, sodass Angebotsanfragen, Supportfragen und Newsletter-Anmeldungen jeweils an einen anderen Ort gelangen. So leiten Sie Formulareinreichungen basierend auf Antworten an verschiedene Listen und Tools weiter enthält die Anleitung.

Erstellen Sie jetzt Ihr WordPress-Formular

Bereit, Ihr Formular zu erstellen? Beginnen Sie noch heute mit dem einfachsten WordPress-Formularersteller-Plugin.  WPForms Pro enthält viele kostenlose Vorlagen und bietet eine 14-tägige Geld-zurück-Garantie.

Wenn Ihnen dieser Artikel geholfen hat, folgen Sie uns bitte auf Facebook und Twitter für weitere kostenlose WordPress-Tutorials und Anleitungen.