WebHooks-Add-On

Einführung

Mit dem WebHooks-Add-On können Sie Daten aus Ihren Formularen an eine beliebige Seite oder ein eigenes Skript senden. Diese Seite oder dieses Skript kann Integrationsaufgaben übernehmen, Daten transformieren, verarbeiten, manipulieren und dann an den gewünschten Zielort weiterleiten.

Wenn Sie eine Anwendung entwickeln, die bei jeder neuen Formularübermittlung aktualisiert werden soll, ist WebHooks genau das Richtige für Sie. Der Vorteil von WebHooks besteht darin, dass die Datenübertragung sofort erfolgt und Sie alle übermittelten Formulardaten auf einmal erhalten können.

Was ist ein WebHook?

Ein WebHook ist im Grunde eine Push-Benachrichtigung von iform4u an einen anderen Server, die jedes Mal ausgelöst wird, wenn jemand eines Ihrer Formulare abschickt.

Was kann man mit einem WebHook machen?

WebHooks erleichtern die Integration zwischen zwei Systemen. Das häufigste Anwendungsbeispiel ist, Leads automatisiert in ein CRM-System zu übertragen. Allerdings lassen sich damit noch zahlreiche weitere Aufgaben umsetzen.

Was wird benötigt?

Da WebHooks naturgemäß einen Programmieraufwand erfordern, sollten Sie selbst in der Lage sein zu programmieren oder jemanden beauftragen, der dies kann. Sie benötigen einen Server, der POST-Anfragen (wie bei Formularübermittlungen) empfangen kann, sowie ein Skript, das als Reaktion auf diese POST-Anfragen gewisse Aktionen ausführt.

Hinweis: iform4u unterstützt mehrere WebHooks pro Formular.

Einen WebHook erstellen

Um einen WebHook zu erstellen, gehen Sie wie folgt vor:

1. Öffnen Sie den Add-Ons Manager und klicken Sie auf „WebHooks“.
2. Klicken Sie auf die Schaltfläche „Create a Webhook“.
3. Es erscheint ein Formular, mit dem Sie den WebHook konfigurieren:
   • Form: Wählen Sie das Formular aus, das Benachrichtigungen senden soll.
   • Handshake Key: Dies ist ein optionaler Schlüssel, der als Authentifizierungsmechanismus dient, um Spam an Ihren WebHook zu verhindern. Dieser Schlüssel wird als POST-Parameter gesendet, wenn unsere Server Ihre URL aufrufen. Sollten Sie diesen Schlüssel verwenden, vergleichen Sie ihn auf Ihrer Seite mit Ihrer lokalen Kopie, um sicherzustellen, dass die Übermittlung legitim ist.
   • Url: Geben Sie die URL an, unter der Ihr Skript erreichbar ist.
   • Status: Kann folgende Werte haben:
     • On: Sendet Benachrichtigungen
     • Off: Sendet keine Benachrichtigungen
   • Json: Kann folgende Werte haben:
     • On: Sendet Daten als JSON-String
     • Off: Sendet Daten als URL-kodierten String
   • Alias: Kann folgende Werte haben:
     • On: Sendet Daten, wobei Feld-Aliase als Parameter-Keys genutzt werden. Beispiel: Aus „text_0“ wird „name“.
     • Off: Sendet Daten, wobei die Feld-ID als Parameter-Keys genutzt wird.
   • Klicken Sie abschließend auf „Create“.

Hinweis: Sie können auch mehrere Formulare auswählen, um für jedes Formular denselben WebHook zu erstellen.

Einen WebHook deaktivieren/aktivieren

Wenn Sie einen WebHook vorübergehend deaktivieren möchten (z.B. um ihn später wieder zu aktivieren), gehen Sie folgendermaßen vor:

1. Öffnen Sie den Add-Ons Manager und klicken Sie auf „WebHooks“.
2. Klicken Sie auf die Schaltfläche „Actions“ des entsprechenden WebHooks.
3. Klicken Sie auf „Update“.
4. Ändern Sie den Status von „On“ auf „Off“ oder umgekehrt.
5. Klicken Sie auf „Update“.

Einen WebHook löschen

Um einen WebHook zu löschen, führen Sie bitte folgende Schritte aus:

1. Setzen Sie ein Häkchen bei dem WebHook, den Sie löschen möchten.
2. Klicken Sie auf „Bulk Actions“.
3. Klicken Sie auf „Delete“.
4. Bestätigen Sie im erscheinenden Popup, dass Sie den WebHook wirklich löschen möchten.

Der WebHooks Manager wird neu geladen und der ausgewählte WebHook wird gelöscht.

Daten als JSON senden

Um POST-Daten als JSON-String zu senden, gehen Sie wie folgt vor:

1. Öffnen Sie den Add-Ons Manager und klicken Sie auf „WebHooks“.
2. Klicken Sie auf „Actions“ für den WebHook, den Sie anpassen möchten.
3. Klicken Sie auf „Update“.
4. Ändern Sie das Feld „Json“ von „Off“ auf „On“ (oder umgekehrt).
5. Klicken Sie auf „Update“.

Verwendung von WebHooks

Nun wissen Sie, was WebHooks sind und wie Sie sie in iform4u verwenden. Schauen wir uns ein Beispiel an.

In diesem Tutorial senden wir Benachrichtigungen eines unserer Formulare an die Seite Beeceptor. Diese Seite nimmt unsere Benachrichtigungen entgegen und zeigt sie auf dem Bildschirm an.

Erste Schritte:

1. Besuchen Sie https://beeceptor.com/.
2. Geben Sie einen Endpoint-Namen ein.
3. Klicken Sie auf „Create Endpoint“.
4. Kopieren Sie die Endpoint-URL.

Sehr gut! Nun haben Sie eine URL, die Benachrichtigungen von iform4u empfangen kann.

Nächste Schritte:

1. Öffnen Sie iform4u.
2. Gehen Sie in den Add-Ons Manager und installieren Sie WebHooks (falls noch nicht geschehen).
3. Klicken Sie anschließend auf „WebHooks“.
4. Klicken Sie auf „Create a Webhook“.
5. Füllen Sie das Formular aus:
   • Form: Wählen Sie beispielsweise „Mailing List“.
   • Url: Fügen Sie die eben kopierte Endpoint-URL ein.
   • Handshake Key: In diesem Beispiel „my_handshake_key“.
   • Status: ON
6. Klicken Sie auf „Create“.

Letzter Schritt: Benachrichtigungen testen

1. Gehen Sie in den Form Manager.
2. Klicken Sie auf das Formular „Mailing List“.
3. Klicken Sie auf den Button „Publish and Share“ (das grüne Pfeilsymbol).
4. Klicken Sie auf „Share Form Link“.
5. Wählen Sie „Without“ und klicken Sie auf „Go!“. (Dadurch wird das Formular ohne Design eingeblendet.)
6. Füllen Sie das Mailing-List-Formular aus und senden Sie es ab.

Wenn die Übermittlung erfolgreich war, erscheint eine Bestätigungsnachricht.

Wechseln Sie nun zur Endpoint-URL (ohne die Seite zu aktualisieren). Dort sollten Sie nun folgende Informationen sehen:

• Form ID
• Form Name
• User IP
• Übermittlungsdaten
• Handshake Key

Und das war’s schon! Sie haben Ihre erste Benachrichtigung an einen anderen Server gesendet. Herzlichen Glückwunsch!

Formularübermittlungen in einer externen Datenbank speichern

Da wir nun wissen, wie man Formularübermittlungen in Echtzeit an eine externe Anwendung sendet, schauen wir uns an, wie diese Übermittlungen in einer Datenbank gespeichert werden können.

Wenn Sie eine eigene Website besitzen, können Sie folgende Schritte durchführen, um Übermittlungen eines Demobezogenen Formulars in Ihrer eigenen Datenbank zu speichern. Sie müssen lediglich die WebHook-URL anpassen.

Auf Ihrer eigenen Website:

1. Erstellen Sie eine Datenbank, z. B. „test“. Das können Sie über Ihr bevorzugtes Datenbank-Tool (z. B. phpMyAdmin) oder über den folgenden MySQL-Befehl erledigen:

CREATE DATABASE 'test';

2. Legen Sie eine Tabelle „subscribers“ in der Datenbank „test“ an, z. B. mit vier Feldern: id, name, email und ip_address. Sie könnten dazu den folgenden MySQL-Befehl verwenden:

CREATE TABLE `test`.`subscribers` (
    `id` INT(11) NOT NULL AUTO_INCREMENT,
    `name` VARCHAR(255) NOT NULL,
    `email` VARCHAR(255) NOT NULL,
    `ip_address` VARCHAR(255) NOT NULL,
    PRIMARY KEY (`id`)
) ENGINE = InnoDB;

3. Konfigurieren Sie die Datenbank-Zugangsdaten für „test“. In der Datei saveToDB.php können Sie folgende Parameter anpassen:

define('DB_SERVER', "localhost");
define('DB_USER', "root");
define('DB_PASSWORD', "");
define('DB_DATABASE', "test");
define('DB_DRIVER', "mysql");

4. Laden Sie die Datei @app/custom/saveToDB.php auf Ihren Server hoch.

Sobald Sie nun in iform4u für Ihr gewünschtes Formular den WebHook auf die URL http://ihredomain.com/saveToDB.php setzen, werden alle neuen Übermittlungen an dieses Skript gesendet und in Ihrer Datenbank gespeichert.

Damit könnten Sie beispielsweise in der saveToDB.php über $_POST auf die gesendeten Daten zugreifen. Wenn Sie Feld-IDs (z. B. „text_0“) verwenden, stellen Sie sicher, dass Sie den entsprechenden Code zur Verarbeitung der Daten einfügen, um diese in die Datenbank zu schreiben.

Und das war‘s auch schon! Auf diese Weise können Sie ein eigenes Skript erstellen, um Formulardaten zu empfangen und in Ihrer Datenbank zu speichern.