Automatisierung deiner Formulare in WordPress mit samarbeid

Das samarbeid-Team setzt überall dort, wo es geht, auf Open-Source-Lösungen. Daher läuft auch unsere Webseite auf WordPress. Ein Weltmarktanteil von WordPress von über 60% zeigt, dass Open-Source-Lösungen von vielen Leuten als gute Wahl wertgeschätzt werden.

Und natürlich wollen wir unser WordPress mit unseren samarbeid-Prozessen verbinden. Bei uns sollen keine Anfragen den Umweg über E-Mails gehen müssen, wenn Formulare in WordPress gleich Prozesse in samarbeid starten können. Mit solchen Automatisierungen geht nichts verloren und ihr könnt eure Webseite zum Ausgangspunkt von gut gemanagten Prozessen machen. Und wenn dein Team WordPress und samarbeid hat, dann habt ihr schon (fast) alles, um eure Automatisierung zu starten.

In diesem Tutorial zeigen wir dir, wie du Formulare in WordPress mit samarbeid automatisieren kannst. Dafür braucht es ein Formular-Plugin in WordPress, die samarbeid-API und ein Tool, dass die Schnittstelle zur Übersetzung zwischen dem Formular und der samarbeid-API ist. In unserem Tutorial nehmen wir als Formular-Plugin Contact Form 7 und als Schnittstelle zur Übersetzung Make. Es geht auch mit anderen Plugins und Schnittstellen – aber das vorgestellte Setup funktioniert gut und es spricht nichts dagegen, dass du es auch nutzt.

Schritt 1: Deine Formulare in WordPress erstellen

Als erstes brauchst du das Formular in WordPress, das den mit den Formulardaten vorbefüllten Prozess in samarbeid starten soll. Das kann zum Beispiel eine einfache Supportanfrage sein. Dazu kannst du das in unserem Beispiel benutzte Formular-Plugin Contact Form 7 installieren. Zusätzlich brauchst du in dem Fall das Plugin CF7 to Webhook, damit dein Formular die Übersetzungsschnittstelle per API aufrufen kann. Das klingt vielleicht etwas komplizierter, als es ist. Wir führen dich Schritt-für-Schritt durch.

Ein einfaches Support-Formular ist mit dem Formular-Plugin schnell gemacht. Die Nutzer haben drei Eingabefelder (Name, E-Mail-Adresse und Anliegen) – die sie alle eingeben müssen – und wenn sie auf Anfrage absenden klicken wird das Formular abgesendet.

Üblicherweise erhältst du dann eine Mail mit allen Informationen und musst diese per Hand weiter verarbeiten. Viel komfortabler ist, wenn euer Support-Prozess in samarbeid gestartet wird, die Daten aus dem Formular da schon drin sind und sofort ein Verantwortlicher an den Prozess gesetzt wird.

Schritt 2: Webhook-Plug-In für die Schnittstelle deiner Formulare in WordPress installieren

Durch das Plug-In CF7 to Webhook hat dein Formular den Reiter Webhook. Aber was ist eigentlich ein Webhook? Ein Webhook ist wie ein Klingelknopf an einer Tür. Wenn jemand auf den Knopf drückt, wissen alle im Haus, das jemand vor der Tür steht. Genauso funktioniert ein Webhook: Wenn etwas Bestimmtes auf einer Website passiert, sendet die Website eine Nachricht an eine andere Website oder Anwendung, um sie darüber zu informieren. Das ermöglicht es den Programmen, miteinander zu kommunizieren und automatisch auf Ereignisse zu reagieren, ohne dass jemand ständig nachsehen muss.

Mit CF7 to Webhook könnte dein WordPress-Fomular eigentlich jetzt direkt die API zum starten eines neuen Prozesses in samarbeid aufrufen. Jedoch es ist leider oft so, dass die Struktur der Daten, wie WordPress sie versendet, nicht zur Struktur der Daten passt, wie samarbeid sie erwartet. Daher brauchst du noch ein Programm, das als Schnittstelle die Daten „übersetzt“. Doch vorher bereiten wir erst einmal deine API in samarbeid vor.

Schritt 3: Die API in samarbeid vorbereiten

Damit du eine API in deinem samarbeid nutzen kannst, musst du als erstes einen API-Token erstellen. Wie das genau geht steht in der Hilfe zu samarbeid-API. Keine Sorge, das sind nur ein paar Klicks.

Sobald du den API-Token aktiviert hast, kannst du durch den Aufruf einer URL einen neuen Prozess starten. Wie die Struktur der URL aussieht, siehst du unten. Aber die URL musst du dir ein bisschen „zusammenzubasteln“, denn alle Angaben, die in geschweiften Klammern stehen, musst du durch konkrete Werte ersetzen. Erst wenn du alles ersetzen kannst, wird ein Prozess gestartet, wenn du die URL aufrufst.

{URL deines samarbeids}/api/v0/process?
api_token={API-Token}&
fields[][definition_id]={ID des Datenfelds für E-Mail}&
fields[][value]={Wert der Variable your-email}&
fields[][definition_id]={ID des Datenfelds für Name}&
fields[][value]={Wert der Variable your-name}&
fields[][definition_id]={ID des Datenfelds für Anfrage}&
fields[][value]={Wert der Variable your-request&
process_definition_id={ID der Vorlage des zu startenden Prozesses}

Am einfachsten kommst du an deinen API -Token. Das ist in der Hilfe zur samarbeid-API beschrieben. Als nächstes brauchst du die ID der Prozessvorlage, die gestartet werden soll.

Die ID der Prozessvorlage findest du im Header des Bearbeitungsbereichs einer Prozessvorlage. In dem Beispiel oben wäre die ID 17. Nehmen wir an, dass es in dieser Prozessvorlage drei Datenfelder gibt: ein Datenfeld für die E-Mail-Adresse, ein Datenfeld für den Namen und ein Datenfeld für den Request. Wie kommst du an die IDs dieser Datenfelder? Denn diese IDs brauchst du noch, um die URL für den API-Aufruf vollständig zu machen.

Hierfür kannst du auch die API nutzen. Ruf die folgende URL in deinem Browser auf. Auch hier musst die die geschweiften Klammern wieder durch deine konkreten Werte ersetzen. Aber die URL deines samarbeids und deinen API-Token kennst du ja bereits, daher ist das kein Problem.

{URL deines samarbeids}/api/v0/process_definitions?
api_token={API-Token}

Im Ergebnis siehst du jetzt, welche IDs die einzelnen Datenfelder deiner Prozessvorlagen haben. In dem Beispiel hat das Datenfeld „Datum der Ausleihe“ die ID 99. Diese IDs kannst du jetzt nutzen, um den obenstehenden API-Aufruf zu vervollständigen.

Probiere es einfach mal aus. Vervollständige deine URL und rufe sie über den Browser auf. Wird in samarbeid ein neuer Prozess mit den von dir in der URL angegebenen Daten gestartet? Prima! Dann kannst du jetzt WordPress mit deinem samarbeid verbinden.

Schritt 4: samarbeid mit WordPress verbinden – mit Make als Übersetzer

Wenn deine Formulare in WordPress abgesendet werden, dann ruft das Plugin CF7 to Webhook auch eine API auf. Leider sind die Daten in einer anderen Struktur als von det samarbeid-API das erwartet wird. Daher nutzen wir Make um, die Daten zu „übersetzen“.

Dazu musst du dich bei Make anmelden und einen Account erstellen. (Für kleine Projekte reicht der kostenlose Account aus.) Dann musst du in Make ein neues Szenario erstellen. Szenarios sind kleine Automatisierungsabläufe.

Dein Szenario in Make besteht dann aus zwei Schritten. Als erstes musst du einen Webhook erstellen und diesen aktivieren (Hier findest du die Hilfeseite von Make zum Thema Webhooks). Sobald er aktiv ist, wird dir in den Eigenschaften eine URL angezeigt. Das ist die URL, die das Formular in WordPress aufrufen soll, sobald ein Formular abgesendet wurde.

Wenn Du die URL hast, gehst du zurück in WordPress und dann in den Reiter Webhook deines Formular (Achtung: dazu muss das Plugin CF7 to Webhooks installiert sein). Kopiere die URL aus Make in das Feld Webhook URL und stelle dein Formular live, so dass du es ausfüllen und absenden kannst.

Starte dann in Make dein Szenario und sende ein Formular aus WordPress ab. Wenn alles klappt, kennt Make danach die Datenstruktur, die es aus WordPress von deinem Formular erhält. Füge dann in dein Szenario als zweiten Schritt ein Modul HTTP-Request ein und verbinde es mit dem Webhook. (Hier findest du die Hilfeseite von Make zum Thema HTTP-Requests). In dem HTTP-Request musst du die aufzrufende URL genau spezifizieren – und kannst dabei die Werte nutzen, die der Webhook vom WordPress-Formular empfangen hat.

Jetzt kannst du die URL, die durch das HTTP-Modul aufgerufen werden soll, parametrisieren. Nimm als Ausgangspunkt die URL, die du in Schritt 3 genutzt hast, um erfolgreich einen neuen Prozess in samarbeid zu starten. Kopiere die URL in das Feld URL (wie in der Abbildung oben) und passe sie noch an. Dabei schlägt dir Make alle Datenelemente, die es aus dem Webhook von deinem WordPress-Forumlar erhalten hat, vor. Das sind die roten Boxen in der Abbildung. So kannst du mit allen Informationen, die du hast, leicht die korrekte URL angeben.

Jetzt heißt es, das Szenario auszuprobieren. Du bist fertig, wenn du deine Formulare in WordPress ausfüllen und absenden kannst und kurze Zeit später unter deinem Namen in samarbeid die gewünschten Prozesse mit den übergebenen Daten gestartet werden. Wenn alles so funktioniert, wie du dir das vorstellst, musst du nur sicherstellen, dass das Szenario in Make auch auf aktiv gestellt ist und läuft. Dann kann es losgehen und dein Team kann eure Supportanfragen in WordPress entgegennehmen und direkt in samarbeid managen.

---

Samarbeid wird kontinuierlich weiterentwickelt. Da kann es passieren, dass Hilfetexte ungenau werden. Bitte schreibe uns eine Mail, wenn du Fragen oder Anregungen zu diesem Hilfetext hast: kontakt@samarbeid.org

---

Beitragsfoto von KOBU Agency auf Unsplash