So verwenden Sie Webhooks mit WordPress-Formularen

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

Wenn Sie eine einfache Möglichkeit benötigen, Daten direkt aus Ihrem WordPress-Formular an eine Webanwendung zu senden, sind Webhooks die perfekte Lösung. Mit einem Webhook-Formular müssen Sie nicht die Hilfe eines Drittanbieter-Konnektors wie Zapier in Anspruch nehmen.

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 ein Anfänger sind, werden wir behandeln, was Webhooks sind und warum sie wichtig sind. Denken Sie daran, dass Sie für die Methode, die wir heute verwenden, keine Programmierkenntnisse benötigen.

Was sind Webhooks?

Webhooks ermöglichen es zwei Webanwendungen, miteinander zu kommunizieren. Wenn also beispielsweise jemand ein Bestellformular auf Ihrer Website einreicht, können Sie diese Daten an Ihren Slack-Kanal senden, um Ihr Produktteam darüber zu informieren, dass eine Bestellung aufgegeben wurde. Sie können dies auch tun, wenn Sie einen neuen Lead oder Abonnenten erhalten.

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

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

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

• Automatisches Übertragen von Informationen zwischen zwei Diensten/Apps
• Automatisieren Sie Aufgaben und reduzieren Sie die Verwaltungszeit
• Reduzieren Sie die Kosten für die Verwendung von Connector-Diensten wie Zapier und Hubspot, um Daten in Apps zu verarbeiten.

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

Beginnen wir damit mit unserer Schritt-für-Schritt-Anleitung zum Erstellen eines Webhook-Formulars in WordPress.

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 werden WPForms für dieses Tutorial verwenden, da es ein Webhooks-Addon bietet, das für jedermann einfach zu verwenden ist, auch für Anfänger. Es ist absolut keine Codierung erforderlich.

WPForms ist das beste Formularerstellungs-Plugin für WordPress-Sites. Und was Sie wissen müssen, ist, dass es unzählige vorgefertigte Vorlagen und gebrauchsfertige Formularfelder bietet, mit denen Sie alle Arten von WordPress-Formularen erstellen können. Dazu gehören Produktbestellung, Registrierung, Terminbuchung, einfache Kontaktformulare und mehr.

WPForms wird mit einem Drag-and-Drop-Formular-Builder geliefert, der das Anpassen von Formularen zum Kinderspiel macht. Es verfügt über unzählige Add-Ons und Integrationen, mit denen Sie eine Verbindung zu E-Mail-, Zahlungs- und Marketing-Apps herstellen können.

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 Funktion zu aktivieren.

Außerdem können Sie mit WPForms bedingte Regeln verwenden, um eine Webhook-Aktion basierend auf der Formularantwort des Benutzers auszulösen. Der Webhook wird also nur ausgeführt, wenn der Wert eines Felds erfüllt ist. Dadurch haben Sie mehr Kontrolle darüber, welche Daten Sie an welche App senden möchten.

Sie können sich mit unzähligen Apps und Diensten verbinden. In diesem Tutorial zeigen wir dir, wie du dich mit Slack verbindest. Denken Sie jedoch daran, dass Sie mit den gleichen Schritten auch eine Verbindung zu anderen Apps und Endpunkten herstellen können.

Schritt 1: Erstellen Sie eine neue Slack-App

Indem Sie Ihr Webhook-Formular mit Slack verbinden, können Sie automatisch Nachrichten und Informationen von Ihrer Website an Ihre Slack-Kanäle senden. Sie können Ihre Teammitglieder oder Abteilungen auf dem Laufenden halten, wenn eine Person ein Formular einreicht, ein Formular verlässt und mehr.

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

Wenn Sie neu darin sind, machen Sie sich keine Sorgen, es ist ganz 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 Möglichkeiten:

• Von Grund auf neu
• Aus einem App-Manifest.

Hier werden wir eine Slack-App von Grund auf neu erstellen. 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-Arbeitsplatz auswählen können. Wenn Sie fertig sind, klicken Sie auf App erstellen .

Dadurch wird die Seite Basisinformationen geöffnet. Hier müssen Sie auf die Option Eingehende Webhooks klicken.

Aktivieren Sie im nächsten Bildschirm die Einstellungen Eingehende Webhooks aktivieren . Auf diese Weise können Sie Nachrichten von externen Diensten auf Slack posten.

Nach der Aktivierung sehen Sie auf der Seite den Abschnitt Webhooks-URLs für Ihren Workspace .

Jetzt müssen Sie einen neuen Webhook erstellen, um Informationen aus 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 veröffentlichen.

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

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

Jetzt müssen Sie nur noch die Webhook-URL kopieren. Sie benötigen es ein paar Schritte später.

Schritt 2: Installieren und aktivieren Sie WPForms

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

Melden Sie sich zunächst für ein Konto auf der WPForms-Website an.

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 wird mit einer 100% risikofreien Geld-zurück-Garantie geliefert, sodass Sie den Service ausprobieren können, bevor Sie eine Verpflichtung eingehen.

Nachdem Sie sich angemeldet haben, finden Sie die Plug-in-Download-Datei und den Lizenzschlüssel auf der Registerkarte Downloads .

Gehen Sie jetzt zu Ihrem WordPress-Dashboard und installieren Sie das Plugin. Wenn Sie weitere Details wünschen, können Sie unsere Anleitung zur Installation eines WordPress-Plugins lesen.

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

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

Gehen Sie dazu auf die Registerkarte WPForms » Addons und Sie werden unzählige Addons finden, die Ihnen helfen, die Funktionalität Ihrer WordPress-Formulare zu erweitern. Klicken Sie hier auf die Schaltfläche Add-on installieren für das Webhooks -Add-on.

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

Schritt 3: Erstellen Sie ein Webhook-Formular

Um ein neues Formular zu erstellen, gehen Sie zur Seite WPForms »Neu hinzufügen , wo Sie eine Liste vorgefertigter Vorlagen sehen. Diese Vorlagen sind bereits mit den Feldern ausgefüllt, die Sie je nach Zweck Ihres Formulars benötigen. Die Vorlagenbibliothek umfasst:

• Einfaches Kontaktformular
• Fordern Sie ein Angebotsformular an
• 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. Fühlen Sie sich frei, eine zu wählen, die am besten zu Ihren Anforderungen passt.

Alles, was Sie tun müssen, ist, Ihrem Formular oben auf der Seite einen Namen zu geben. Wählen Sie dann je nach Bedarf eine beliebige Vorlage aus, oder Sie können die leere Vorlage auswählen, um von vorne 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 per Drag & Drop aus dem linken Menü in die Formularvorschau.

WPForms bietet viele Anpassungsoptionen, sodass Sie auf jedes Feld klicken können, um es zu bearbeiten. Sie können die Feldnamen, die Beschreibung 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 erfahren wir, wie Sie Webhooks für dieses Formular einrichten und Ihre Slack-App verbinden.

Schritt 4: Richten Sie einen Webhook für Slack ein

Damit Webhooks in Ihrem Formular funktionieren, müssen Sie zur Registerkarte Einstellungen » Webhooks navigieren und auf die Option Webhooks aktivieren klicken.

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

Zunächst können Sie den Namen des Webhooks ändern. Das hilft dir später beim Wiedererkennen.

Erinnern Sie sich jetzt an die Webhook-URL, die Sie in Schritt 1 aus Ihrer Slack-App kopiert haben? Sie müssen es hier in die Option URL anfordern einfügen. Auf diese Weise können Sie Ihr WordPress-Formular mit anderen Diensten wie Slack verbinden.

Danach sehen Sie verschiedene Einstellungen zum Einrichten Ihres Webhook. Wir werden hier besprechen, was jeder tut und was zu diesen Feldern hinzugefügt werden kann.

• Anforderungsmethode: Hier können Sie auswählen, welche Art von Verbindung 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 : Dadurch werden Daten aus dem übermittelten Formular abgerufen und die Details an eine verbundene App gesendet.
  • POST : Dadurch werden die Daten an einen sekundären Dienst gesendet. Wir verwenden die HTTP-POST-Anforderung, da wir Daten von Ihrem Formular an Ihren Slack-Kanal senden müssen.
  • PUT : Damit können Sie Daten aktualisieren, wenn Ihr Webhook ausgeführt wird.
  • PATCH : Damit können Sie Daten ersetzen, wenn Ihr Webhook ausgeführt wird.
  • DELETE : Damit können Sie Informationen löschen, wenn dieser spezielle Webhook ausgeführt wird.
• Anforderungsformat: Diese Option zeigt dem Server, über welche Art von Inhalt Sie senden. Das ist ein bisschen technisch, aber im Grunde gibt es zwei verschiedene Arten von Anfrageformaten:
  • JSON : Formatiert Ihre Daten in einem Anwendungs-/ JSON-Format und legt den Inhaltstyp als charset=utf-8 fest.
  • FORM : Formatiert Ihre Daten in einem 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 brauchen wir diese Option nicht, also lassen wir sie leer.
• Anforderungsheader: Dies sendet bestimmte Werte, wenn die Anforderung an die App gesendet wird. Wenn der Webhook ausgeführt wird, werden die Felder automatisch generiert. Auch dieses Feld lassen wir leer.
• Anfragetext: Für diese Option müssen Sie den Nachrichtentyp einrichten und ein Feld zum Posten von Nachrichten auswählen. Da die Benutzer Vorschläge im Textformat eingeben, setzen wir den Schlüssel auf Text . Wählen Sie dann das Feld aus, in das die Benutzer ihre Nachricht eingeben.

Nachdem Sie mit den Einstellungen der Webhook-Anfrage fertig sind, 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. Auf diese Weise können Sie automatisierte E-Mails an den Administrator, jedes Teammitglied und den Kunden/Benutzer senden, sobald sie das Formular gesendet haben.

Um diese E-Mail-Workflows einzurichten, gehen Sie zur Registerkarte 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.

Mit WPForms können Sie auch automatisierte E-Mail-Benachrichtigungen an die Formularbenutzer 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 in das Formular eingegebene E-Mail-Adresse.

Im Abschnitt E- Mail-Nachricht können Sie Ihre benutzerdefinierte Nachricht hinzufügen und das Smarttag {all_fields} verwenden, um alle Formulardaten anzuzeigen, die der Benutzer eingegeben hat.

Vergessen Sie am Ende nicht, Ihre Einstellungen zu speichern.

Schritt 6: Passen Sie die Bestätigungsnachricht an

Mit WPForms können Sie auch Bestätigungsmeldungen am Frontend Ihrer Website anzeigen, nachdem Benutzer das Formular erfolgreich gesendet haben.

Auf der Registerkarte 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 aufgegeben haben.
• Seite anzeigen: Leiten Sie Ihre Benutzer auf eine beliebige Seite Ihrer Website weiter.
• Gehe zu URL (Umleitung): Leiten Sie Benutzer zu einer bestimmten URL weiter.

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 Sie mit WPForms Ihren bevorzugten E-Mail-Dienst wie Constant Contact und Mailchimp integrieren können.

Sie müssen lediglich unter der Registerkarte „ 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 beim E-Mail-Anbieter generieren können.

Wenn Sie auch Online-Formulare mit einem Zahlungs-Gateway verbinden möchten, können Sie dies hier lernen: So erstellen Sie ein Online-Bestellformular

Jetzt müssen Sie nur noch Ihr Webhook-Formular auf Ihrer WordPress-Seite veröffentlichen.

Schritt 7: Veröffentlichen Sie das Webhooks-Formular auf Ihrer Website

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

Für dieses Tutorial fügen wir das Formular zu einer neuen Seite auf unserer Website hinzu. Navigieren Sie also zur Registerkarte Seiten » Neu hinzufügen in Ihrem WP-Admin-Panel. Fügen Sie im Blockeditor-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ü, in dem Sie das soeben erstellte Webhook-Formular auswählen können.

Anschließend 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 hinzufügen.

Sie können Ihr Webhook-Formular sogar in einen Widget-bereiten Bereich wie eine Fußzeile oder Seitenleiste einfügen. Gehen Sie dazu zur Registerkarte Aussehen »Widgets und ziehen Sie das WPForms-Widget per Drag & Drop in die Seitenleiste oder das Fußzeilenmenü auf der rechten Seite.

Anschließend können Sie das von Ihnen erstellte Formular aus dem Dropdown-Menü auswählen und Ihre Änderungen speichern.

Jetzt wird Ihr Webhooks-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 mithilfe von Webhook-URLs eine Verbindung zu verschiedenen Apps herzustellen. Sie erhalten die vollständige Kontrolle über die Daten, die Sie abrufen und an andere Apps senden möchten.

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

Sie können es auch verwenden, um andere professionelle WordPress-Formulare wie Bestellformulare, Buchungsformulare, Registrierungsformulare und mehr zu erstellen.

Für Ihre nächsten Schritte können Sie sich diese Ressourcen ansehen:

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

Diese Beiträge helfen Ihnen dabei, die Funktion „Speichern und später fortsetzen“ in Ihre WordPress-Formulare einzufügen und die Abbruchrate von Formularen zu reduzieren. Letzteres wird Ihnen helfen, Ihre E-Mail-Marketing-Liste zu erweitern.