Webhooks mit WordPress-Formularen verwenden

Möchten Sie Ihre WordPress-Formulare mit verschiedenen Webanwendungen und Diensten integrieren?

Wenn Sie eine einfache Möglichkeit benötigen, Daten aus Ihrem WordPress-Formular direkt an eine Webanwendung zu senden, sind Webhooks die perfekte Lösung. Mit einem Webhook-Formular benötigen Sie keine Hilfe von Drittanbietern wie Zapier.

In diesem Beitrag zeigen wir Ihnen, wie Sie Webhooks in Ihren WordPress-Formularen verwenden, damit Sie ganz einfach Echtzeitdaten an Ihre bevorzugten Apps und Dienste senden können.

Aber zuerst, wenn Sie Anfänger sind, werden wir behandeln, was Webhooks sind und warum sie wichtig sind. Beachten Sie, dass die Methode, die wir heute verwenden, keine Programmierkenntnisse erfordert.

Was sind Webhooks?

Webhooks ermöglichen die Kommunikation zwischen zwei Webanwendungen. Wenn also beispielsweise jemand ein Bestellformular auf Ihrer Website ausfüllt, können Sie diese Daten an Ihren Slack-Kanal senden, um Ihr Produktteam darüber zu informieren, dass eine Bestellung eingegangen ist. Dies können Sie auch tun, wenn Sie einen neuen Lead oder Abonnenten erhalten.

Technisch gesehen sind Webhooks benutzerspezifische HTTP-Callbacks, die durch ein Ereignis in einem Quellsystem ausgelöst und an das Zielsystem gesendet werden.

Das bedeutet, dass bei einem Ereignis oder Auslöser auf Ihrer Website automatisierte Nachrichten an einen verbundenen Dienst gesendet werden. Ein Auslöser kann alles sein, wie Blog-Kommentare, Produktkäufe, Benutzerregistrierungen und Formularübermittlungen.

Wenn Sie sich fragen, warum Sie Webhooks verwenden sollten, hier sind einige Vorteile:

• Übertragen Sie Informationen automatisch zwischen zwei Diensten/Apps
• Automatisieren Sie Aufgaben und reduzieren Sie den Verwaltungsaufwand
• Senken Sie die Kosten für die Nutzung von Connectordiensten wie Zapier und Hubspot zur Datenverarbeitung in Apps.

Webhooks sind unglaublich nützlich für Entwickler und technisch versierte WordPress-Benutzer.

Damit beginnen wir mit unserer Schritt-für-Schritt-Anleitung, wie Sie ein Webhook-Formular in WordPress erstellen.

Erstellen eines Webhook-Formulars in WordPress [Einfache Methode]

Es gibt viele Möglichkeiten, wie Sie Webhooks verwenden können, um Ihre WordPress-Formularübermittlungen an andere Webanwendungen zu senden.

Wir verwenden für dieses Tutorial WPForms, da es ein Webhooks Addon bietet, das für jeden einfach zu bedienen ist, auch für Anfänger. Es sind absolut keine Programmierkenntnisse erforderlich.

WPForms ist das beste Formular-Builder-Plugin für WordPress-Websites. Und was Sie wissen müssen, ist, dass es unzählige vorgefertigte Vorlagen und einsatzbereite Formularfelder bietet, mit denen Sie alle Arten von WordPress-Formularen erstellen können. Dazu gehören Produktbestellungen, Registrierungen, Terminbuchungen, einfache Kontaktformulare und mehr.

WPForms verfügt über einen Drag-and-Drop-Formular-Builder, der die Anpassung von Formularen zum Kinderspiel macht. Es gibt unzählige Addons und Integrationen, die Sie verwenden können, um sich mit E-Mail-, Zahlungs- und Marketing-Apps zu verbinden.

Mit seinem Webhooks Addon können Sie Ihr WordPress ganz einfach mit jedem Dienst oder jeder App verbinden. Es sind nur wenige Klicks erforderlich, um diese Funktionalität zu aktivieren.

Außerdem erlaubt Ihnen WPForms, bedingte Regeln zu verwenden, um eine Webhook-Aktion basierend auf der Formularantwort des Benutzers auszulösen. Nur wenn der Wert eines Feldes erfüllt ist, wird der Webhook ausgeführt. Dies gibt Ihnen mehr Kontrolle darüber, welche Daten Sie senden möchten und an welche App.

Sie können sich mit unzähligen Apps und Diensten verbinden. In diesem Tutorial zeigen wir Ihnen, wie Sie sich mit Slack verbinden. Aber denken Sie daran, dass Sie die gleichen Schritte verwenden können, um sich mit anderen Apps und Endpunkten zu verbinden.

Schritt 1: Erstellen Sie eine neue Slack-App

Durch die Verbindung Ihres Webhook-Formulars mit Slack können Sie automatisch Nachrichten und Informationen von Ihrer Website an Ihre Slack-Kanäle senden. Sie können Ihre Teammitglieder oder Abteilungen darüber informieren, wenn eine Person ein Formular absendet, ein Formular abbricht und mehr.

Um Daten von WordPress mit Webhooks an einen anderen Dienst zu senden, müssen Sie eine Brücke zwischen den beiden Apps erstellen. Um sich mit Slack zu verbinden, müssen Sie eine Slack-App (die Brücke) erstellen.

Wenn Sie neu hier sind, machen Sie sich keine Sorgen, es ist ziemlich einfach und wir führen Sie Schritt für Schritt durch. Zuerst müssen Sie die Slack API-Seite öffnen und auf die Schaltfläche App erstellen klicken.

Im nächsten Popup-Fenster können Sie auswählen, wie Sie eine App mit Slack erstellen möchten. Es gibt zwei Optionen:

• Von Grund auf
• Aus einem App-Manifest.

Hier erstellen wir eine Slack-App von Grund auf. Es klingt nach viel Arbeit, aber es dauert wirklich nur ein paar Klicks.

Dann sehen Sie das Popup, in dem Sie den Namen der App hinzufügen und Ihren Slack-Arbeitsbereich auswählen können. Sobald Sie fertig sind, klicken Sie auf App erstellen.

Dies öffnet die Seite mit den grundlegenden Informationen. Hier müssen Sie auf die Option Eingehende Webhooks klicken.

Auf dem nächsten Bildschirm aktivieren Sie die Einstellungen Eingehende Webhooks aktivieren. Dies ermöglicht es Ihnen, Nachrichten von externen Diensten an Slack zu senden.

Sobald aktiviert, sehen Sie den Abschnitt Webhook-URLs für Ihren Arbeitsbereich auf der Seite.

Nun müssen Sie einen neuen Webhook erstellen, um Informationen von Ihrem WordPress-Formular zu erhalten. Klicken Sie also auf die Schaltfläche Neuen Webhook zum Arbeitsbereich hinzufügen.

Als Nächstes sehen Sie das Popup, in dem Sie einen Slack-Kanal auswählen können, um Ihre Formularübermittlungen zu posten.

Nachdem Sie einen Slack-Kanal ausgewählt haben, klicken Sie auf Zulassen.

Nun können Sie die neue Webhook-URL für Ihre Slack-App sehen.

Alles, was Sie jetzt tun müssen, ist, die Webhook-URL zu kopieren. Sie werden sie in ein paar Schritten benötigen.

Schritt 2: WPForms installieren und aktivieren

Sobald Sie Ihre Webhook-URL haben, können Sie sie zu Ihrem WordPress-Formular hinzufügen.

Um loszulegen, registrieren Sie sich für ein Konto auf der WPForms-Website.

Es gibt eine kostenlose Version des Plugins, aber Sie benötigen die Premium-Version, um auf erweiterte Formularfunktionen wie Webhooks zugreifen zu können. WPForms bietet eine 100% risikofreie Geld-zurück-Garantie, sodass Sie den Dienst ausprobieren können, bevor Sie sich festlegen.

Nach der Registrierung finden Sie die Plugin-Download-Datei und den Lizenzschlüssel im Tab Downloads.

Navigieren Sie nun zu Ihrem WordPress-Dashboard und installieren Sie das Plugin. Wenn Sie weitere Details wünschen, können Sie unseren Leitfaden zum Installieren eines WordPress-Plugins aufrufen.

Sobald Sie WPForms auf Ihrer Website installiert und aktiviert haben, müssen Sie Ihren Lizenzschlüssel eingeben, um alle Premium-Funktionen und Add-ons nutzen zu können.

Bevor Sie mit der Erstellung Ihres Formulars beginnen, müssen Sie das Webhooks-Add-on installieren.

Gehen Sie dazu zum Tab WPForms » Addons. Dort finden Sie zahlreiche Add-ons, die Ihnen helfen, die Funktionalität Ihrer WordPress-Formulare zu erweitern. Klicken Sie hier auf die Schaltfläche Addon installieren für das Webhooks-Addon.

Jetzt können Sie Ihr Webhook-Formular in WordPress erstellen.

Schritt 3: Erstellen eines Webhook-Formulars

Um ein neues Formular zu erstellen, navigieren Sie zur Seite WPForms » Neu hinzufügen, wo Sie eine Liste mit vorgefertigten Vorlagen sehen. Diese Vorlagen sind mit den Feldern vorausgefüllt, die Sie je nach Zweck Ihres Formulars benötigen. Die Vorlagenbibliothek enthält:

• Einfaches Kontaktformular
• Angebot anfordern-Formular
• Spendenformular
• Rechnungs-/Bestellformular
• Umfrageformular
• Vorschlagsformular

...und mehr! Für dieses Tutorial wählen wir die Vorlage Vorschlagsformular, da wir im vorherigen Schritt eine Slack-App für Benutzerfeedback erstellt haben. Wählen Sie gerne eine aus, die Ihren Bedürfnissen am besten entspricht.

Geben Sie Ihrem Formular einfach oben auf der Seite einen Namen. Wählen Sie dann eine Vorlage, die Ihren Bedürfnissen entspricht, oder wählen Sie die leere Vorlage, um von Grund auf neu zu beginnen.

Nachdem Sie eine Vorlage ausgewählt haben, sehen Sie im nächsten Fenster den Drag-and-Drop-Formularersteller.

Wenn Sie weitere Felder hinzufügen möchten, ziehen Sie einfach neue Felder aus dem linken Menü in die Formularvorschau.

WPForms bietet viele Anpassungsoptionen. Sie können auf jedes Feld klicken, um es zu bearbeiten. Sie können Feldnamen, Beschreibungen und erweiterte Einstellungen ändern.

Wenn Sie mit dem Hinzufügen Ihrer Formularfelder fertig sind, klicken Sie auf die Schaltfläche Speichern.

Im nächsten Schritt lernen wir, wie Sie Webhooks für dieses Formular einrichten und Ihre Slack-App verbinden.

Schritt 4: Einrichten eines Webhooks für Slack

Damit Webhooks für Ihr Formular funktionieren, müssen Sie zum Tab Einstellungen » Webhooks navigieren und die Option Webhooks aktivieren anklicken.

Ein neuer Webhook wird erstellt, den Sie bearbeiten können, um Ihre Slack-Integration einzurichten.

Zuerst können Sie den Namen des Webhooks ändern. Dies hilft Ihnen, ihn später wiederzuerkennen.

Erinnern Sie sich an die Webhook-URL, die Sie in Schritt 1 aus Ihrer Slack-App kopiert haben? Fügen Sie diese hier in die Option Anforderungs-URL ein. So können Sie Ihr WordPress-Formular mit anderen Diensten wie Slack verbinden.

Danach sehen Sie verschiedene Einstellungen für die Einrichtung Ihres Webhooks. Wir werden besprechen, was jede einzelne bewirkt und was in diese Felder einzutragen ist.

• Anfragemethode: Hiermit können Sie den Verbindungstyp auswählen, den Sie mit Ihrem verbundenen Dienst erstellen möchten. Es gibt viele Arten von HTTP-Methoden, die Sie verwenden können, je nachdem, welche Art von Verbindung Sie erstellen möchten:
  • GET: Dies ruft Daten aus dem übermittelten Formular ab und sendet die Details an eine verbundene App.
  • POST: Dies sendet die Daten an einen sekundären Dienst. Wir verwenden die HTTP POST-Anfrage, da wir Daten von Ihrem Formular an Ihren Slack-Kanal senden müssen.
  • PUT: Hiermit können Sie Daten aktualisieren, wenn Ihr Webhook ausgeführt wird.
  • PATCH: Hiermit können Sie Daten ersetzen, wenn Ihr Webhook ausgeführt wird.
  • DELETE: Hiermit können Sie Informationen löschen, wenn dieser spezielle Webhook ausgeführt wird.
• Anfrageformat: Diese Option zeigt dem Server an, welche Art von Inhalt Sie senden. Dies ist etwas technisch, aber im Grunde stehen zwei verschiedene Anfrageformate zur Verfügung:
  • JSON: Formatiert Ihre Daten im application/json-Format und setzt den Inhaltstyp auf charset=utf-8.
  • FORM: Formatiert Ihre Daten im application/x-www-form-urlencoded-Format und setzt den Inhaltstyp auf charset=utf-8.
• Geheimnis: Wenn Sie ein Entwickler sind und Ihre eigene API zur Authentifizierung integrieren möchten, können Sie einen geheimen Schlüssel verwenden. Aber für unser Tutorial benötigen wir diese Option nicht, daher lassen wir sie leer.
• Anforderungsheader: Dies sendet spezifische Werte, wenn die Anfrage an die App gesendet wird. Wenn der Webhook ausgeführt wird, werden die Felder automatisch generiert. Wir lassen dieses Feld ebenfalls leer.
• Anforderungsbody: Für diese Option müssen Sie den Nachrichtentyp einrichten und ein Feld zum Posten von Nachrichten auswählen. Da die Benutzer Vorschläge in Textform eingeben, setzen wir den Schlüssel auf Text. Wählen Sie dann das Feld aus, in dem die Benutzer ihre Nachricht eingeben werden.

Nachdem Sie die Einstellungen für die Webhook-Anfrage vorgenommen haben, klicken Sie auf die Schaltfläche Speichern.

Schritt 5: Formularbenachrichtigungen einrichten

Als Nächstes können Sie E-Mail-Benachrichtigungen für das WordPress-Formular einrichten. Dies ermöglicht Ihnen, automatisierte E-Mails an den Administrator, jedes Teammitglied und den Kunden/Benutzer zu senden, sobald diese das Formular absenden.

Um diese E-Mail-Workflows einzurichten, gehen Sie zum Tab Einstellungen » Benachrichtigungen und aktivieren Sie die Option Benachrichtigungen aktivieren, um die Standardeinstellungen anzuzeigen.

Hier können Sie die Benachrichtigungseinstellungen anpassen und Empfänger-E-Mail-Adressen hinzufügen.

WPForms ermöglicht es Ihnen auch, automatisierte E-Mail-Benachrichtigungen an die Formularbenutzer zu senden. Um dies einzurichten, klicken Sie oben rechts auf der Seite auf die Schaltfläche Neue Benachrichtigung hinzufügen.

Dann müssen Sie die Option Smart Tags anzeigen verwenden und E-Mail auswählen. Mit diesem Tag erkennt WPForms automatisch die vom Benutzer im Formular eingegebene E-Mail-Adresse.

Im Abschnitt E-Mail-Nachricht können Sie Ihre benutzerdefinierte Nachricht hinzufügen und den Smart Tag {all_fields} verwenden, um alle vom Benutzer eingegebenen Formulardaten anzuzeigen.

Vergessen Sie nicht, Ihre Einstellungen am Ende zu speichern.

Schritt 6: Bestätigungsnachricht anpassen

WPForms ermöglicht es Ihnen auch, Bestätigungsnachrichten im Frontend Ihrer Website anzuzeigen, nachdem Benutzer das Formular erfolgreich abgesendet haben.

Im Tab Einstellungen » Bestätigungen sehen Sie die Bestätigungseinstellungen. Standardmäßig ist der Bestätigungstyp auf „Nachricht“ eingestellt, aber es gibt 3 Optionen in diesem Menü:

• Nachricht: Fügen Sie eine Bestätigungsnachricht hinzu, die im Frontend angezeigt wird, nachdem Kunden ihre Bestellung abgeschickt haben. 
• Seite anzeigen: Leiten Sie Ihre Benutzer zu einer beliebigen Seite auf Ihrer Website weiter.
• Zu URL (Weiterleitung): Senden Sie Benutzer an eine bestimmte URL.

Um mehr darüber zu erfahren, können Sie unseren Leitfaden zur richtigen Einrichtung von Formularbenachrichtigungen und -bestätigungen lesen.

Wenn Sie mit den Einstellungen fertig sind, klicken Sie auf die Schaltfläche Speichern.

Wir müssen hier auch erwähnen, dass WPForms die Integration mit Ihrem bevorzugten E-Mail-Dienst wie Constant Contact und Mailchimp ermöglicht.

Sie müssen einfach unter dem Tab Marketing darauf zugreifen und den Anweisungen auf dem Bildschirm folgen, um Ihr E-Mail-Konto zu verbinden. In den meisten Fällen müssen Sie einen API-Schlüssel angeben, den Sie bei Ihrem E-Mail-Anbieter generieren können.

Wenn Sie Online-Formulare auch mit einem Zahlungs-Gateway verbinden möchten, erfahren Sie hier, wie das geht: So erstellen Sie ein Online-Bestellformular

Alles, was Sie jetzt tun müssen, ist, Ihr Webhook-Formular auf Ihrer WordPress-Website zu veröffentlichen.

Schritt 7: Webhook-Formular auf Ihrer Website veröffentlichen

Um Formularübermittlungen an externe Dienste zu senden, müssen Sie zuerst das Webhook-Formular veröffentlichen. Mit dem benutzerdefinierten Block von WPForms können Sie Ihre Formulare zu jeder Seite oder jedem Beitrag auf Ihrer WordPress-Website hinzufügen.

Für dieses Tutorial fügen wir das Formular zu einer neuen Seite auf unserer Website hinzu. Navigieren Sie also im WP-Admin-Panel zum Tab Seiten » Neu hinzufügen. Fügen Sie auf dem Block-Editor-Bildschirm einen neuen Block hinzu und suchen Sie nach „WPForms“.

Wenn Sie den WPForms-Block zu Ihrer Seite hinzufügen, sehen Sie ein Dropdown-Menü, mit dem Sie das gerade erstellte Webhook-Formular auswählen können.

Dann können Sie Ihre Seite auf Ihrer Website veröffentlichen.

Wenn Sie den klassischen WordPress-Editor verwenden, können Sie das Formular über die Schaltfläche Formular hinzufügen im Editor einfügen.

Sie können Ihr Webhook-Formular sogar in einen Widget-fähigen Bereich wie eine Fußzeile oder Seitenleiste einfügen. Gehen Sie dazu zum Tab Design » Widgets und ziehen Sie das WPForms-Widget per Drag & Drop in das Menü der Seitenleiste oder Fußzeile auf der rechten Seite.

Dann können Sie das erstellte Formular aus dem Dropdown-Menü auswählen und Ihre Änderungen speichern.

Jetzt ist Ihr Webhook-Formular auf Ihrer Website veröffentlicht. Wenn Benutzer das Formular ausfüllen und absenden, erhalten Sie Slack-Benachrichtigungen von Ihrer Website.

Auf diese Weise können Sie WPForms verwenden, um sich mit Webhook-URLs mit verschiedenen Apps zu verbinden. Sie haben die vollständige Kontrolle über die Daten, die Sie abrufen und an andere Apps senden möchten.

Das ist alles! Wir hoffen, dieser Beitrag hat Ihnen geholfen zu lernen, wie Sie Webhooks in Ihren WordPress-Formularen verwenden. Mit WPForms können Sie ganz einfach ein Webhook-Formular erstellen und sich mit einem Drittanbieterdienst verbinden.

Sie können es auch verwenden, um andere professionelle WordPress-Formulare zu erstellen, wie z. B. Bestellformulare, Buchungsformulare, Registrierungsformulare und mehr. Möglicherweise möchten Sie auch lernen, wie Sie WPForms verwenden, um Formulardaten in Ihrer WordPress-Datenbank zu speichern.

Für Ihre nächsten Schritte können Sie diese Ressourcen prüfen:

• So fügen Sie die Option „Speichern und später fortsetzen“ zu WordPress-Formularen hinzu
• So reduzieren Sie Formularabbrüche und steigern die Konversionen
• Beste E-Mail-Erfassungstools & Formularersteller für WordPress

Diese Beiträge helfen Ihnen dabei, die Funktion „Speichern und später fortsetzen“ zu Ihren WordPress-Formularen hinzuzufügen und die Abbruchraten von Formularen zu reduzieren. Der letzte Beitrag hilft Ihnen, Ihre E-Mail-Marketingliste zu erweitern.