Webhooks Addon

Möchten Sie Daten aus Ihren WordPress-Formularen an eine App oder ein Plugin eines Drittanbieters senden? Mit dem WPForms Webhooks Addon können Sie Ihre Formulare mit einem sekundären Dienst verbinden.

Dieses Tutorial zeigt Ihnen, wie Sie das Webhooks-Addon mit WPForms installieren und verwenden können.

---

Was sind Webhooks?

Ein Webhook ermöglicht es Ihnen, Informationen aus Ihrem Formular automatisch an einen anderen Dienst oder ein Tool außerhalb Ihrer WordPress-Website zu senden. Dies ist besonders hilfreich, wenn Sie eine Integration benötigen, aber noch kein Addon dafür verfügbar ist.

Die anfängerfreundlichste Art, einen Webhook einzurichten, ist unser Zapier-Addon. Zapier eignet sich für alle Benutzerebenen, da es eine Einrichtung im Stil eines Assistenten verwendet, der Sie durch alle Schritte führt, die für die Verbindung Ihrer Formulare mit einem separaten Dienst erforderlich sind.

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

Für fortgeschrittene Benutzer bietet das Webhooks-Addon ähnliche Funktionen ohne einen Verbindungsdienst. Im Gegenzug ist der Einrichtungsprozess jedoch etwas technischer.

Installieren des Webhooks Addons

Bevor Sie loslegen, müssen Sie zunächst sicherstellen, dass WPForms auf Ihrer WordPress-Website installiert und aktiviert ist.

Sobald WPForms installiert ist und Ihre Lizenz verifiziert wurde, können Sie das Webhooks-Addon schnell installieren und aktivieren.

Einrichten eines Webhooks

Sobald der Installationsvorgang abgeschlossen ist, können Sie Ihren Webhook einrichten. Um zu beginnen, müssen Sie ein neues Formular erstellen oder ein bestehendes Formular bearbeiten.

Nach dem Öffnen des Formularerstellers können Sie Webhooks unter Einstellungen " Webhooks aktivieren. Schalten Sie hier die Option "Webhooks aktivieren" ein.

Daraufhin werden weitere Einstellungen angezeigt, die Sie konfigurieren können, einschließlich der Benennung Ihres Webhooks.

Standardmäßig sind neue Webhooks unbenannt. Wenn Sie Ihren Webhook bearbeiten oder einen Namen hinzufügen möchten, klicken Sie auf das Bleistiftsymbol.

Wenn Sie weitere Webhooks hinzufügen möchten, können Sie auf die Schaltfläche " Neuen Webhook hinzufügen" klicken und die Einstellungen für jede weitere Verbindung ausfüllen.

Unter dem Namen Ihres Webhooks sehen Sie alle verfügbaren Einstellungen für diese Verbindung. Im Folgenden wird erläutert, was jede dieser Einstellungen bewirkt.

URL anfordern

Die Anfrage-URL wird verwendet, um WPForms mit einer sekundären Anwendung zu verbinden. Sie können diese URL in der Regel von der API des Dienstes oder Tools erhalten, nachdem Sie eine grundlegende Verbindung eingerichtet haben.

Anfrage Methode

Mit der Anforderungsmethode können Sie die HTTP-Methode auswählen, die Sie bei der Ausführung Ihrer Webhook-Anforderung verwenden möchten.

Je nachdem, welche Art von Verbindung Sie herstellen möchten, können Sie aus verschiedenen Methoden wählen:

• GET: Die GET-Methode erfasst Informationen aus einem übermittelten Formular und sendet die Details an eine verbundene Anwendung.
• POST: Die POST-Methode nimmt die über WPForms übermittelten Informationen und sendet sie an einen sekundären Dienst.
• PUT: Mit der PUT-Methode können Sie Daten aktualisieren, wenn Ihr Webhook läuft.
• PATCH: Mit der PATCH-Methode können Sie Daten ersetzen, wenn Ihr Webhook läuft.
• DELETE: Mit der DELETE-Methode können Sie Informationen löschen, wenn dieser spezielle Webhook ausgeführt wird.

Format der Anfrage

Das Anfrageformat teilt Ihrem Server mit, welche Art von Daten über Ihren Webhook gesendet wird. Damit wird auch der Content-Type-Header-Wert für Ihre Daten festgelegt.

Es sind zwei verschiedene Anfrageformate verfügbar:

• JSON: Die JSON-Methode formatiert Ihre Daten in einer application/json Format und setzt den Inhaltstyp als charset=utf-8.
• FORMEL: Die FORM-Methode formatiert Ihre Daten in einem application/x-www-form-urlencoded Format und setzt den Inhaltstyp als charset=utf-8.

Geheimnis

Der geheime Schlüssel erzeugt einen Hash (oder eine eindeutige ID) für jede abgeschlossene Anfrage. Diese fungiert als Signatur, um den Ursprung Ihrer HTTP-Anfrage zu überprüfen, und wird immer im Request Header angegeben.

Kopfzeilen anfordern

Mit Request Headers können Sie die HTTP-Header-Schlüssel und -Werte definieren, die mit Ihrer Webhook-Anfrage gesendet werden sollen.

Anfrage Körper

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

Beispiel: Verwendung von Webhooks zur Verbindung von WPForms mit Slack

Als Beispiel zeigen wir Ihnen, wie Sie WPForms über einen Webhook mit Ihrem Slack-Konto verbinden können.

Erstellen Ihrer Slack-App

Zunächst müssen Sie zur API-Seite von Slack navigieren. Klicken Sie dann auf die Schaltfläche " Create an App".

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

Sie können dann Ihre App benennen und auswählen, an welchen Arbeitsbereich Sie die Formulardaten senden möchten. In unserem Beispiel nennen wir unsere App Contact Sullie. Klicken Sie auf die Schaltfläche App erstellen, um fortzufahren.

Dies bringt Sie zu einer Seite mit einigen grundlegenden Informationen über Ihre App. Scrollen Sie nach unten zu den Einstellungen für Features und Funktionen hinzufügen und aktivieren Sie die Option Eingehende Webhooks.

Sobald Sie die Einstellung Eingehende Webhooks aktiviert haben, schalten Sie die Option Eingehende Webhooks aktivieren auf Ein. Daraufhin werden weiter unten auf der Seite weitere Details angezeigt.

Klicken Sie unter dem Abschnitt Webhook-URLs für Ihren Arbeitsbereich auf die Schaltfläche Neuen Webhook zum Arbeitsbereich hinzufügen.

Dadurch werden Sie zu einem weiteren Overlay weitergeleitet, in dem Sie einen Slack-Kanal auswählen müssen, an den Sie Ihre Nachrichten senden möchten. Wählen Sie einen Kanal aus der Dropdown-Liste und klicken Sie auf Zulassen.

Dies bringt Sie zurück zur vorherigen Seite. 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.

Lassen Sie diese Browser-Registerkarte oder dieses Fenster geöffnet, da Sie die Informationen in diesem Bereich später noch benötigen werden.

Hinzufügen eines Slack-Webhooks zu einem Formular

Als Nächstes müssen Sie das Formular öffnen, in dem Sie Ihren Webhook verwenden wollen. Wenn Sie nicht bereits haben, stellen Sie sicher, dass Sie Ihre Webhooks Addon in WPForms einrichten.

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

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

• Anforderungsmethode: Da wir Daten aus unseren Formularen an Slack senden wollen, stellen wir die Anfragemethode auf die Option POST ein.
• Anfrageformat: Wir stellen das Anfrageformat auf Standard-JSON ein.
• Secret: Für unser Beispiel lassen wir das Feld Secret leer und lassen es automatisch generieren, wenn unser Webhook ausgeführt wird. Wenn Sie ein Entwickler sind und Ihren eigenen geheimen Wert eingeben möchten, können Sie dies hier tun.
• Kopfzeilen der Anfrage: Wir haben keine spezifischen Werte, die wir mit unserer Anfrage senden müssen, also lassen wir die Einstellung Request Headers leer. Wenn der Webhook ausgeführt wird, wird das automatisch generierte Secret hier platziert.
• Anfrage Körper:
  • Schlüssel: Geben Sie Text in das Feld Schlüssel für den Parameter Request Body ein, da das Formular die Informationen im Klartext sendet. Wenn Sie keinen Text als Wert für dieses Feld eingeben, wird wahrscheinlich ein Fehler in Ihrer Verbindung auftreten.
  • Feld auswählen: Die Einstellung "Feld auswählen" ist der Name des Feldes, dessen Daten Sie senden möchten. In unserem Beispiel werden wir die Daten des Feldes " Kommentar" oder "Nachricht" an Slack senden.

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

Hinzufügen von bedingter Logik (optional)

Mit der bedingten Logik können Sie festlegen, ob eine Aktion auf der Grundlage der vom Benutzer in Ihrem Formular getroffenen Entscheidungen ausgeführt wird oder nicht.

Als Beispiel zeigen wir Ihnen, wie Sie eine 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 ein Feld für Absatztext enthält. Für unser Beispiel fügen wir ein Absatztextfeld hinzu.

Dann müssen Sie die Beschriftung für das Eingabefeld für die Nachricht anpassen. Für unser Beispiel fügen wir die Beschriftung Kommentar oder Nachricht hinzu.

Als nächstes müssen Sie Ihre bedingte Logik einrichten. Aktivieren Sie unten in den Einstellungen Ihres Slack-Webhooks die Option " Enable Conditional Logic" (Bedingte Logik aktivieren ), um die Dropdowns zum Erstellen Ihrer Regel zu öffnen.

Fügen Sie dann die Regel für Ihre bedingte Logik hinzu. Für unser Beispiel legen wir die Dropdowns so fest, dass sie lauten: Sende diesen Webhook, wenn Kommentar oder Nachricht Hilfe enthält.

Vergessen Sie nicht, Ihr Formular zu speichern, bevor Sie den Builder 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 die Kopfzeile und den Textkörper Ihres Formulars einzufügen.

Um Smart Tags zu verwenden, wählen Sie in den Einstellungen Ihres Webhooks die Option Benutzerdefinierten Wert hinzufügen aus dem Dropdown-Menü Request Headers und fügen dann den Smart Tag als Parameterschlüssel 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, achten Sie darauf, alle verfügbaren Smart Tags in WPForms zu überprüfen.

Das war's! Jetzt wissen Sie, wie Sie das Webhooks-Addon für WPForms einrichten können.

Suchen Sie nun nach einer Möglichkeit, Ihre WPForms einfach von einer Website auf eine andere zu übertragen? In unserem Tutorial erfahren Sie, wie Sie Ihre Formulare importieren und exportieren können.