Fortgeschrittene Formulare - Wahre Alleskönner.
Wie bereits an anderer Stelle erwähnt, kann es unter Umständen erforderlich sein, fortgeschrittene Kontaktformulare zu programmieren.
Diese haben den Vorteil, dass Sie weitaus kompliziertere Aufgaben bewältigen können, als die gängigsten Kontaktformulare es tun. Einfache Textfelder übermitteln kann jedes Formular – und mit einem Plugin ist dieses schnell eingerichtet. Doch komplizierte Kalkulationen und logische Anweisungen, sind so gut wie unmöglich umzusetzen mit den gängigen, meist kostenlosen Plugins.
In diesem kleinen Blogbeitrag wollen wir einen kleinen Einblick verschaffen in Code-Schnipsel und ein spezifisches Problem: Die korrekte Übertragung von eingegebenen Daten an das Backend mit Hilfe von Ajax.
PS: Alle Fachbegriffe verlinken auf einen entsprechenden erläuternden Eintrag, um dem Beitrag besser folgen zu können.
1. Das Problem
Ausgefüllte Kontaktformulare werden im Normalfall an das Backend übertragen. Von hier aus werden diese dann verarbeitet, und in den meisten Fällen an den entsprechenden Empfänger weitergeleitet. Bei benutzerdefinierten Formularen bestimmt der Entwickler, wie mit dem ausgefüllten Formular umgegangen werden soll.
Wir möchten hierzu ein kleines Beispiel anhand von Code aufzeigen:
Möchte man Formulardaten an das eigene WordPress-Backend übermitteln, so passiert dies im Normalfall mittels JavaScript. Die client-seitige Programmiersprache, kann mittels Ajax-Aufruf das Backend ‚kontaktieren ohne dass der Besucher etwas mitbekommt. Der Aufruf erfolgt im Hintergrund. Je nach erhaltener Antwort kann dann weiter verfahren werden.
Ein entsprechender Ajax-Call sieht dann bspw. so aus:
let form = $(this).serialize(); $.ajax({ action: 'our_action', type: "POST", url: myParams.ajaxurl, dataType: "json", data: form, success: function (response) { // do whatever you want here }
Doch jetzt gibt es ein Problem: Da wir es in vielen Fällen mit komplexen Formularen zu tun haben, die einen Haufen an Variablen benötigen, reicht das Formular alleine nicht aus. Was passiert, wenn weitere Daten benötigt werden und an das Backend übergeben werden sollen?
2. Ajax Übertragung mit zusätzlichen Variablen
Sollen neben dem eigentlichen Formular weitere Daten übergeben werden, so müssen die zu übergebenden Daten entsprechend vorbereitet werden.
Anstelle einer Serialisierung des Formulars , ist nun ein anderer Schritt notwendig. Das Formular wird in einen Array umgewandelt, welchem nun zusätzliche Variablen hinzugefügt werden können. Auf diese Variablen kann anschließend im Backend zugegriffen werden. Die Serialisierung erfolgt erst dann mithilfe einer jQuery-Funktion namens param().
Dieser Vorgang ist vor Allem dann notwendig, wenn zusätzliche Daten übergeben werden sollen, die nicht Inhalt eines Formulars sind, bspw. das Datum/die Uhrzeit zum Zeitpunkt des Ausfüllens, oder ähnliches.
Der oben beschriebene Vorgang sieht als Code wie folgt aus:
let form = $(this).serializeArray(); form.push({name: "additionalData", value: ourValue}); $.ajax({ action: 'our_action', type: "POST", url: myParams.ajaxurl, dataType: "json", data: $.param(form), success: function (response) { //do whatever you want here } });
3. Fazit
Benutzerdefinierte Formulare sind für viele Unternehmen essenziell. Sie begegnen uns häufiger als wir glauben, und sorgen für vereinfachte Unternehmensprozesse. Steigen die Anforderungen an ein Formular, und sind komplexere Funktionalitäten als eine einfache Kontaktaufnahme nötig, führt kein Weg an einem entwickelten Formular vorbei.
