✅ WEB- und WordPress-Nachrichten, Themen, Plugins. Hier teilen wir Tipps und beste Website-Lösungen.

Schwerkraftformulare: Fügen Sie nach der Übermittlung benutzerdefinierte Eingaben zu Feldern und Remote-Posts hinzu

50

In diesem Gravity Forms-Tutorial lernen wir drei Dinge:

  • So fügen Sie jedem Feldtyp Ihrer Wahl eine benutzerdefinierte Eingabe hinzu
  • So fügen Sie Ihrem Formular benutzerdefinierte Einstellungen hinzu
  • Und schließlich, wie Sie übermittelte Werte für bestimmte Felder nach jeder Formularübermittlung remote posten können.

Dieser Beitrag geht davon aus, dass Sie Gravity Forms Funktionen hinzufügen möchten, um nach jeder Formularübermittlung eine Remote-Post-Anforderung zu senden. Innerhalb des Remote-Posts senden Sie Werte aus dem Formular, die durch zusätzliche Einstellungen im Formulareditor anpassbar sind. Übliche Beispiele dafür, wo dies nützlich wäre, sind z. B. das Senden von Name und E-Mail an eine Mailchimp-Newsletterliste oder wirklich jede andere Integration von Drittanbietern.

Um dies in der Praxis zu lösen, fügen Sie zunächst benutzerdefinierte Einstellungen zu jedem Feld hinzu, in das der Redakteur Schlüsselnamen eingeben kann. Der Schlüssel und die übermittelten Werte werden nach jeder Formularübermittlung an eine Drittanbieter-URL gesendet. Wir werden auch eine Einstellung hinzufügen, damit Sie für jedes Formular auswählen können, ob diese Art der Übermittlung durch Dritte aktiviert werden soll.

Der gesamte unten stehende Code kann in den Code Ihres Designs functions.phpoder Plugins eingefügt werden.

Hinzufügen einer benutzerdefinierten Eingabe zu Feldern

Der erste Schritt ist das Hinzufügen der Eingabe zu Feldern im Feldeditor, wo Sie den Schlüsselnamen für diesen Wert eingeben können. Wir werden nur Werte aufnehmen und übermitteln, bei denen diese Eingabe ausgefüllt wurde.

Wählen Sie aus, wo Sie Ihre Eingabe platzieren möchten

Gravity Forms bietet Hooks, mit denen wir benutzerdefinierte Inhalte in den Feldeditor einfügen können. Der Hook-Name hängt davon ab, auf welcher Registerkarte Ihr Feld erscheinen soll.

  • Reiter „Allgemein”:gform_field_standard_settings
  • Reiter „Aussehen”:gform_field_appearance_settings
  • Reiter „Erweitert”:gform_field_advanced_settings

In jedem Hook haben Sie zwei Parameter; Position und Formular-ID. Jede integrierte Gravity Forms-Einstellung hat eine feste Positionsnummer. Sie können diese Nummer vergleichen, um genau zu entscheiden, wo sich Ihr benutzerdefiniertes HTML oder Ihre Eingabe befinden soll. Alle Einstellungen und deren Position aufzuzählen, würde in diesem Beitrag viel zu lange dauern. Aber Gravity Forms fügt ihre Einstellungen in 5er-Schritten hinzu. Beispielsweise befindet sich auf der Registerkarte „Allgemein” die „Feldbezeichnung” an Position 0 und „Beschreibung” an Position 10. Wenn Sie Ihren HTML-Code an Position 10 platzieren, wird er nach Beschreibung angezeigt. Vergleichen Sie die Position nicht mit einer Zahl, die kein Multiplikator von 5 ist.

Ich füge mein benutzerdefiniertes Feld auf der Registerkarte „Erweitert” an Position 50 hinzu, die sich direkt nach der Eingabe „Admin Field Label” befindet.

Der Großteil des obigen Codes ist selbsterklärend. Ich füge HTML in demselben Format hinzu, in dem Gravity Forms eine Einstellung erwarten würde. Für die Eingabe selbst müssen Sie jedoch eine onchangeJavascript-Funktion bereitstellen. Wir weisen es einfach an, die Funktion von GravityForms auszuführen, um alle an unserer Eingabe vorgenommenen Änderungen zu speichern. Es ist wichtig, sich an die Eigenschaft zu erinnern, die wir in SetFieldProperty, thirdPartyInput, bereitstellen. In diesem Schlüssel wird unsere benutzerdefinierte Eingabe beim Senden im Feldarray von Gravity Forms gespeichert.

Hinzufügen eines Tooltips (optional)

Sie können eine andere optionale Sache mit Ihrer Eingabe machen; fügen Sie einen Tooltip hinzu. Wenn Sie dies wünschen, fügen Sie diesen Funktionsaufruf in den gerade hinzugefügten Code ein und geben Sie einen (eindeutigen) Schlüssel als Zeichenfolge an:

Fügen Sie dann eine weitere Funktion hinzu, die sich an den Filter anschließt gform_tooltips, und fügen Sie Ihren Tooltip-Inhalt wie folgt zur entsprechenden Taste hinzu:

Das Hinzufügen eines Tooltips ist völlig optional, aber eine nette Art, Websitebesitzern zu erklären, was diese Eingabe bewirkt. Passen Sie den Inhalt an Ihre Funktionalität an.

Definieren, welche Feldtypen Ihrer benutzerdefinierten Eingabe hinzugefügt werden sollen

Möglicherweise stellen Sie fest, dass Ihr Feld auf keiner Registerkarte „Erweitert” angezeigt wird. Dies liegt daran, dass wir Gravity Forms mitteilen müssen, in welchen Feldtypen diese Eingabe erscheinen soll. Standardmäßig erscheint sie in keinem.

Die Art und Weise, wie wir dies tun, ist eigentlich mit Javascript. GravityForms verfügt über Javascript, das automatisch alle Einstellungen ausblendet und dann bestimmte Einstellungen basierend auf dem Feldtyp anzeigt. Unser Feld ist also da, aber Gravity Forms hat es einfach ausgeblendet.

Wir hängen an gform_editor_jsund wir müssen zwei Dinge tun. Zuerst entscheiden wir, in welchen Feldtypen die Eingabe erscheinen soll. Und zweitens stellen wir sicher, dass die Eingabe beim Laden mit ihrem Wert gefüllt wird.

Ich füge die Eingabe den Feldtypen text, textarea, email, phoneund hinzu number. Denken Sie daran, zu überlegen, wie Sie mit den Werten der übermittelten Felder umgehen werden. Wenn Sie dieses Feld beispielsweise für den Feldtyp Kontrollkästchen zulassen, müssen Sie in der Lage sein, die übermittelten Werte korrekt zu analysieren und zu verarbeiten.

Schwerkraftformulare: Fügen Sie nach der Übermittlung benutzerdefinierte Eingaben zu Feldern und Remote-Posts hinzu

Jetzt sollten Sie endlich Ihre benutzerdefinierte Eingabe auf der Registerkarte Erweitert sehen können, wenn das Feld einem der bereitgestellten Typen entspricht. Sie werden auch sehen, dass es erfolgreich gespeichert wurde und mit seinem gespeicherten Wert geladen wird. Immer wenn das Formular ab jetzt gesendet wird und diese Eingabe ausgefüllt ist, enthält das Array des Formularfelds die Eigenschaft thirdPartyInput.

Der nächste Schritt ist das Hinzufügen einer Einstellung zum Formular selbst, um die Übermittlung an Dritte zu aktivieren. Dies ist optional, wird aber empfohlen. Wir möchten vermeiden, unnötigen Code auszuführen oder etwas an Dritte zu übermitteln, wenn wir dies nicht beabsichtigen.

Hinzufügen einer benutzerdefinierten Einstellung zu den Formulareinstellungen

Das Hinzufügen benutzerdefinierter Einstellungen zu Formulareinstellungen ist ziemlich einfach. Wir müssen uns in den Filter gform_form_settingseinklinken und unseren HTML-Code mit allen gewünschten Eingaben anhängen, und dann in den Filter gform_pre_form_settings_saveund sicherstellen, dass unsere benutzerdefinierten Eingaben im Formularobjekt gespeichert werden.

So fügen Sie den Formulareinstellungen eine benutzerdefinierte Einstellung hinzu:

Der Filter gform_form_settings erwartet als Schlüssel eine Abschnittsbezeichnung und dann ein Array für jede Einstellung. Wir fügen nur eine mit der Taste hinzu submit_3rd_party. An der Checkbox-Eingabe selbst verwenden wir die Methode von Gravity Forms rgar(), um Werte des angegebenen Schlüssels aus einem Array (dem Formular) zu extrahieren, um sicherzustellen, dass wir den gespeicherten Wert unseres Felds abrufen. Passen Sie den HTML-Code an Ihre Anforderungen an.

Das Feld erscheint nun unten in den Formulareinstellungen. Aber Ihre Änderungen werden noch nicht gespeichert, also müssen wir das beheben:

add_filter('gform_pre_form_settings_save', function($form) { $form['submit_3rd_party'] = rgpost('submit_3rd_party'); return $form; }, 10, 2);

Schwerkraftformulare: Fügen Sie nach der Übermittlung benutzerdefinierte Eingaben zu Feldern und Remote-Posts hinzu

Dieser Codeabschnitt verwendet eine andere Hilfsmethode von Gravity Forms, rgpost(), um gesendete Werte (aus $_POST) zu extrahieren und sie mit unserem gewünschten Schlüssel im bereitgestellten Formular-Array zu speichern. Wenn Sie weitere Einstellungen hinzufügen, müssen Sie dies für jede Einstellung wiederholen.

Und das ist alles, was wir brauchen, um benutzerdefinierte Formulareinstellungen hinzuzufügen! Wann immer Sie Zugriff auf das Formularobjekt haben, können Sie den Wert von überprüfen $form['submit_3rd_party'].

Übermittelte Werte an Dritte senden

Ein guter Hook für benutzerdefinierte Aktionen wie das Ausführen einer Anfrage und das Senden von Daten aus einem gesendeten Formular ist gform_after_submission. An diesem Punkt ist die gesamte Validierung bestanden und das Eintrags-(Antwort-)Objekt wurde erstellt. Mit diesem Hook erhalten wir Zugriff auf das Eintragsobjekt und das Formularobjekt.

Was Sie in dieser Aktion tun, liegt bei Ihnen und wie Sie die Daten extrahieren müssen und wie Sie die Post-Anfrage durchführen. In diesem Beispiel mache ich eine einfache Post-Anfrage mit der WordPress-Funktion wp_remote_post()mit einem Array aller Felder, die unsere benutzerdefinierte Eingabe im Textkörper ausgefüllt haben.

Sie werden sehen, dass ich zuerst überprüfe, ob das Formular aktivierte Einreichungen hat. Wenn es vorhanden ist, durchläuft der Code alle Formularfelder und prüft, ob jedes Feld etwas in unserer benutzerdefinierten Eingabe hinzugefügt hat. Wenn die Eingabe tatsächlich nicht leer ist, prüft der Code auch, ob für dieses Feld etwas übermittelt wurde. Sie können diese Wenn-Prüfung entfernen, wenn Sie leere Werte übermitteln möchten.

Der Teil über die URL und wie die Daten gesendet werden, müssen Sie natürlich selbst anpassen. Sie können optional auch etwas mit der Antwort tun, z. B. eine E-Mail senden, wenn sie fehlgeschlagen ist, oder so. Es liegt ganz bei Ihnen, wie Sie mit Ihrer Funktionalität umgehen möchten.

Aufnahmequelle: awhitepixel.com

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen