Webhooks-Add-on

Möchtest du Daten von deinen WordPress-Formularen an eine Drittanbieter-App oder ein Plugin senden? Mit dem WPForms Webhooks Addon kannst du deine Formulare mit einem sekundären Dienst verbinden.

Dieses Tutorial zeigt dir, wie du das Webhooks Addon mit WPForms installierst und verwendest.

---

Was sind Webhooks?

Ein Webhook ermöglicht es dir, automatisch Informationen von deinem Formular an einen anderen Dienst oder ein anderes Tool außerhalb deiner WordPress-Website zu senden. Dies ist besonders hilfreich, wenn du eine Integration benötigst, aber noch kein Addon dafür verfügbar ist.

Der anfängerfreundlichste Weg, einen Webhook einzurichten, ist über unser Zapier Addon. Zapier ist für alle Benutzerstufen großartig, da es eine Assistenten-ähnliche Einrichtung verwendet, die dich durch jeden Schritt führt, der zum Verbinden deiner Formulare mit einem separaten Dienst erforderlich ist.

Eine weitere Option ist unsere Uncanny Automator Integration. Diese Funktion ermöglicht es dir, Verbindungen zwischen unterstützten Apps und Diensten herzustellen.

Für fortgeschrittenere Benutzer bietet das Webhooks Addon ähnliche Funktionen ohne einen Connector-Dienst. Als Ausgleich ist der Einrichtungsprozess jedoch technischer.

Installation des Webhooks Addons

Bevor du beginnst, musst du zuerst sicherstellen, dass WPForms auf deiner WordPress-Website installiert und aktiviert ist.

Sobald WPForms installiert und deine Lizenz verifiziert ist, kannst du schnell das Webhooks Addon installieren und aktivieren.

Einrichtung eines Webhooks

Nach Abschluss des Installationsvorgangs bist du bereit, deinen Webhook einzurichten. Um zu beginnen, musst du ein neues Formular erstellen oder ein bestehendes bearbeiten.

Nach dem Öffnen des Formular-Builders kannst du Webhooks unter Einstellungen » Webhooks aktivieren. Schalte von hier aus die Option Webhooks aktivieren ein.

Dadurch werden weitere Einstellungen geöffnet, die du konfigurieren kannst, einschließlich der Benennung deines Webhooks.

Standardmäßig sind neue Webhooks unbenannt. Wenn du einen Namen für deinen Webhook bearbeiten oder hinzufügen möchtest, klicke auf das Stiftsymbol.

Zusätzlich kannst du, wenn du weitere Webhooks hinzufügen möchtest, auf die Schaltfläche Neuen Webhook hinzufügen klicken und die Einstellungen für jede zusätzliche Verbindung ausfüllen.

Unter dem Namen deines Webhooks siehst du alle verfügbaren Einstellungen für diese Verbindung. Wir haben unten umrissen, was jede davon tut.

Anforderungs-URL

Die Anforderungs-URL wird verwendet, um WPForms mit einer sekundären App zu verbinden. Du kannst diese URL normalerweise aus der API des Dienstes oder Tools erhalten, nachdem du eine grundlegende Verbindung eingerichtet hast.

Anforderungsmethode

Die Anforderungsmethode ermöglicht es dir, die HTTP-Methode auszuwählen, die du verwenden möchtest, wenn deine Webhook-Anforderung ausgeführt wird.

Es gibt mehrere verschiedene Methoden zur Auswahl, je nachdem, welche Art von Verbindung Sie herstellen möchten:

• GET: Die GET-Methode ruft Informationen aus einem übermittelten Formular ab und sendet die Details an eine verbundene App.
• POST: Die POST-Methode nimmt die über WPForms übermittelten Informationen entgegen und sendet sie an einen sekundären Dienst.
• PUT: Die PUT-Methode ermöglicht es Ihnen, Daten zu aktualisieren, wenn Ihr Webhook ausgeführt wird.
• PATCH: Die PATCH-Methode ermöglicht es Ihnen, Daten zu ersetzen, wenn Ihr Webhook ausgeführt wird.
• DELETE: Die DELETE-Methode ermöglicht es Ihnen, Informationen zu löschen, wenn dieser spezielle Webhook ausgeführt wird.

Anfrageformat

Das Anfrageformat teilt Ihrem Server mit, welche Art von Daten über Ihren Webhook gesendet wird. Dies legt auch den Wert des Content-Type-Headers für Ihre Daten fest.

Es stehen zwei verschiedene Anfrageformate zur Verfügung:

• JSON: Die JSON-Methode formatiert Ihre Daten im application/json-Format und setzt den Content-Type auf charset=utf-8.
• FORM: Die FORM-Methode formatiert Ihre Daten im application/x-www-form-urlencoded-Format und setzt den Content-Type auf charset=utf-8.

Geheimnis

Der Secret-Schlüssel generiert einen Hash (oder eine eindeutige ID) für jede abgeschlossene Anfrage. Dies dient als Signatur zur Überprüfung des Ursprungs Ihrer HTTP-Anfrage und wird immer im Request Header angegeben.

Anforderungsheader

Request Headers ermöglichen es Ihnen, die Schlüssel und Werte des HTTP-Headers zu definieren, die mit Ihrer Webhook-Anfrage gesendet werden sollen.

Anforderungskörper

Ähnlich wie bei den Request Headers können Sie mit der Request Body-Einstellung die Schlüssel und Werte definieren, die im Body der Anfrage Ihres Webhooks gesendet werden.

Beispiel: Webhooks zur Verbindung von WPForms mit Slack

Als Beispiel führen wir Sie durch die Verbindung von WPForms mit Ihrem Slack-Konto mithilfe eines Webhooks.

Erstellen Ihrer Slack-App

Navigieren Sie zuerst zur API-Seite von Slack. Klicken Sie dann auf die Schaltfläche App erstellen.

Dies öffnet ein Overlay, in dem Sie auswählen müssen, wie Sie Ihre App konfigurieren möchten. Wählen Sie die Option Von Grund auf neu.

Anschließend können Sie Ihrer App einen Namen geben und auswählen, an welchen Arbeitsbereich Sie Formulardaten senden möchten. Für unser Beispiel nennen wir unsere App Kontakt Sullie. Klicken Sie auf die Schaltfläche App erstellen, um fortzufahren.

Dies führt Sie zu einer Seite mit einigen grundlegenden Informationen zu Ihrer App. Scrollen Sie nach unten zu den Einstellungen Funktionen und Funktionalität hinzufügen und aktivieren Sie die Option Eingehende Webhooks.

Sobald Sie die Einstellung für eingehende Webhooks aktiviert haben, schalten Sie die Option Eingehende Webhooks aktivieren auf Ein. Dies öffnet weitere Details weiter unten auf der Seite.

Klicken Sie im Abschnitt Webhook-URLs für Ihren Arbeitsbereich auf die Schaltfläche Neue Webhook-URL zum Arbeitsbereich hinzufügen.

Dies leitet Sie zu einem weiteren Overlay weiter, in dem Sie einen Slack-Kanal auswählen müssen, an den Ihre Nachrichten gesendet werden sollen. Wählen Sie einen Kanal aus dem Dropdown-Menü aus und klicken Sie auf Zulassen.

Dies bringt Sie zur vorherigen Seite zurück. Im Abschnitt Webhook-URLs für Ihren Arbeitsbereich sehen Sie eine neue URL. Kopieren Sie diese URL, da Sie sie im nächsten Schritt verwenden werden.

Stellen Sie sicher, dass Sie diesen Browser-Tab oder dieses Fenster geöffnet lassen, da Sie die Informationen in diesem Bereich später benötigen.

Hinzufügen Ihres Slack-Webhooks zu einem Formular

Öffnen Sie als Nächstes das Formular, in dem Sie Ihren Webhook verwenden möchten. Wenn Sie dies noch nicht getan haben, stellen Sie sicher, dass Sie Ihr Webhooks-Addon in WPForms eingerichtet haben.

Sobald Sie Webhooks für Ihr Formular aktiviert haben, fügen Sie die von Slack kopierte URL in das Feld Anforderungs-URL ein, um Ihr Formular mit der API von Slack zu verbinden.

Konfigurieren Sie als Nächstes die restlichen Webhook-Einstellungen. Wir haben alle unsere konfigurierten Einstellungen für dieses Beispiel unten aufgeführt:

• Anfragemethode: Da wir Daten von unseren Formularen an Slack senden möchten, setzen wir die Anfragemethode auf die Option POST.
• Anfrageformat: Wir setzen das Anfrageformat auf Standard-JSON.
• Geheimnis: Für unser Beispiel lassen wir das Feld Geheimnis leer und lassen es automatisch generieren, wenn unser Webhook ausgeführt wird. Wenn Sie Entwickler sind und Ihren eigenen Geheimniswert eingeben möchten, können Sie dies hier tun.
• Anforderungsheader: Wir haben keine spezifischen Werte, die wir mit unserer Anfrage senden müssen, daher lassen wir die Einstellung Anforderungsheader leer. Wenn der Webhook ausgeführt wird, wird das automatisch generierte Geheimnis hier platziert.
• Anfragekörper:
  • Schlüssel: Geben Sie text in das Feld für den Parameter „Request Body“ ein, da das Formular Informationen im Klartext sendet. Wenn Sie text nicht als Wert für dieses Feld eingeben, wird Ihre Verbindung wahrscheinlich fehlerhaft sein.
  • Feld auswählen: Die Einstellung „Feld auswählen“ ist der Name des Feldes, dessen Daten Sie senden möchten. In unserem Beispiel senden wir die Daten des Feldes Kommentar oder Nachricht an Slack.

Denken Sie daran, Ihre Änderungen zu speichern, bevor Sie den Formular-Generator verlassen. Wir empfehlen außerdem, Ihr Formular zu testen, um sicherzustellen, dass Ihr Webhook ordnungsgemäß funktioniert, sobald Sie ihn eingerichtet haben.

Bedingte Logik hinzufügen (Optional)

Bedingte Logik ermöglicht es Ihnen zu wählen, ob eine Aktion basierend auf den Auswahlmöglichkeiten eines Benutzers in Ihrem Formular ausgeführt wird oder nicht.

Als Beispiel zeigen wir Ihnen, wie Sie bedingte Logik verwenden können, um eine Nachricht an Slack zu senden, wenn ein Benutzer einen Eintrag in unser Kontaktformular mit einer Nachricht sendet, die das Wort „Hilfe“ enthält.

Um dies einzurichten, müssen Sie sicherstellen, dass Ihr Formular entweder ein Feld für einzeiligen Text oder Absatztext enthält. In unserem Beispiel fügen wir ein Feld für Absatztext hinzu.

Dann müssen Sie die Bezeichnung für das Nachrichten-Eingabefeld anpassen. In unserem Beispiel fügen wir die Bezeichnung Kommentar oder Nachricht hinzu.

Als Nächstes müssen Sie Ihre bedingte Logik einrichten. Schalten Sie am unteren Rand der Einstellungen Ihres Slack-Webhooks die Option Bedingte Logik aktivieren ein, um die Dropdown-Menüs zur Erstellung Ihrer Regel anzuzeigen.

Fügen Sie dann die Regel für Ihre bedingte Logik hinzu. In unserem Beispiel stellen wir die Dropdown-Menüs so ein, dass sie lauten: Sende diesen Webhook, wenn Kommentar oder Nachricht Hilfe enthält.

Denken Sie wie immer daran, Ihr Formular zu speichern, bevor Sie den Generator verlassen.

Häufig gestellte Fragen

Dies sind einige der häufigsten Fragen, die wir im Zusammenhang mit dem Webhooks-Addon sehen.

Wie kann ich Smart Tags im Request Header und Request Body verwenden?

Smart Tags können verwendet werden, um dynamisch Informationen in den Request Header und Request Body Ihres Formulars einzufügen.

Um Smart Tags zu verwenden, wählen Sie Benutzerdefinierten Wert hinzufügen aus dem Dropdown-Menü „Request Headers“ in den Einstellungen Ihres Webhooks aus und fügen Sie dann den Smart Tag als Parameternamen hinzu. Sie können den gleichen Schritt für die Einstellung „Request Body“ wiederholen.

Für eine vollständige Liste der Smart Tags, die verwendet werden können, schauen Sie sich unbedingt alle verfügbaren Smart Tags in WPForms an.

Das ist alles! Jetzt wissen Sie, wie Sie das Webhooks-Addon für WPForms einrichten.

Suchen Sie als Nächstes nach einer Möglichkeit, Ihre WPForms einfach von einer Website auf eine andere zu übertragen? Sehen Sie sich unser Tutorial an, wie Sie Ihre Formulare importieren und exportieren.