Wie man Feldwerte mit Webhooks sendet

Möchten Sie Feldwerte aus Ihren Kontrollkästchen mit dem WPForms Webhooks Addon senden? Standardmäßig wird die Feldbeschriftung gesendet, aber mit einem kleinen PHP-Snippet können Sie stattdessen ganz einfach den Wert senden. In diesem Tutorial zeigen wir Ihnen, wie Sie dies tun können.

In diesem Tutorial werden wir einen Slack-Workflow erstellen und Variablen erstellen, denen wir unsere Formularfelder zuweisen, damit unsere Formulardaten über unseren Webhook an Slack gesendet werden, so dass wir ein Online-Formular für Funktionsanfragen auf unserer Website bereitstellen können und die Daten an Slack gesendet werden, sobald das Formular von unseren Besuchern ausgefüllt wird.

Senden von Feldwerten

Derzeit ist die einzige Möglichkeit, mehrere Formularfelder von WPForms zu Slack durch einen Webhook zu senden, indem Sie den Slack Workflow verwenden. Für weitere Informationen über Slack Workflows, lesen Sie bitte diese Dokumentation.

Wir beginnen mit der Erstellung eines Workflows in Slack, damit wir die Variablen erstellen können, die wir später beim Einrichten des Webhooks im Form Builder verwenden werden.

1) Hinzufügen eines neuen Workflows in Slack

Zunächst müssen Sie sich über den Webbrowser bei Ihrem Slack anmelden. Sobald Sie eingeloggt sind, klicken Sie auf den Pfeil neben dem Firmennamen und wählen Sie unter Tools die Option Workflow Builder.

Als Nächstes klicken Sie auf die Schaltfläche Erstellen in der oberen rechten Ecke der Seite, geben Ihrem Workflow einen Namen und klicken auf Weiter.

2) Auswahl der Art des Arbeitsablaufs

Auf dem nächsten Bildschirm wählen Sie die Art des Workflows aus, den Sie erstellen möchten. Da wir das WPForms Webhooks Addon verwenden werden, klicken wir auf die Schaltfläche Auswählen neben Webhook.

3) Erstellen der Variablen für den Arbeitsablauf

Auf dem nächsten Bildschirm erstellen wir die Variablen, die wir veröffentlichen werden. Für die Zwecke dieses Tutorials wissen wir, dass wir ein Formular mit den Formularfeldern Name, E-Mail, Checkbox (für unsere Produktliste) und Absatztext (für unsere Kommentare) erstellen werden. Wir werden also Variablen erstellen, die mit diesen Feldern zusammenarbeiten werden.

Sobald Sie auf den Link Variablen hinzufügen klicken, werden Sie in einem neuen Fenster nach dem Schlüssel und dem Datentyp gefragt.

Der Schlüssel unserer ersten Variablen ist name und unser Datentyp ist Text.

Klicken Sie auf Fertig, wenn Sie die Variable hinzugefügt haben, und wiederholen Sie diesen Schritt für jede Variable, die Sie zu diesem Workflow hinzufügen möchten, indem Sie auf den Link Variable hinzufügen klicken, bis Sie alle Variablen hinzugefügt haben.

Wir werden diesen Schritt für die Formularfelder E-Mail, Kontrollkästchen und Absatztext wiederholen.

Nachdem wir nun alle unsere Variablen hinzugefügt haben, klicken Sie auf die Schaltfläche Weiter, um die Erstellung des Workflows abzuschließen.

4) Hinzufügen der Schritte zum Arbeitsablauf

Nun ist es an der Zeit, die Schritte hinzuzufügen, die unser neuer Arbeitsablauf ausführen wird.

Klicken Sie anschließend auf die Schaltfläche Hinzufügen neben Nachricht senden. Hier können Sie wählen, ob Sie eine Nachricht an einen bestimmten Kanal oder eine Person in Slack senden möchten.

Auf dem nächsten Bildschirm werden Sie aufgefordert, aus einer Dropdown-Liste auszuwählen, an wen Sie die Nachricht senden möchten. Dann können Sie die Nachricht erstellen, die gesendet werden soll.

Die Nachricht selbst akzeptiert den von Ihnen eingegebenen Text sowie die Variablen, die Sie im letzten Schritt hinzugefügt haben. Für unsere Nachricht beginnen wir mit dem Text "Eingehende Formularanmeldung für eine neue Funktion".

Dann fangen wir an, den Text und die Variablen in jeweils einer neuen Zeile zusammenzusetzen. Sobald Sie From eingegeben haben, klicken Sie auf den Link Variable einfügen und wählen die Namensvariable aus. Wiederholen Sie diesen Schritt für jede der Variablen, die Sie hinzugefügt haben, und klicken Sie auf Speichern, um die Änderungen zu speichern.

Das Popup-Fenster wird geschlossen und Sie müssen nur noch auf die Schaltfläche Veröffentlichen klicken, um den Workflow zu veröffentlichen. Sobald Sie Ihren Workflow veröffentlicht haben, können Sie auf die Schaltfläche Kopieren neben der URL klicken, die für den Webhook erstellt wird. Wir werden diese URL in einem späteren Schritt verwenden.

Erstellen des Formulars

Bevor wir unsere Feldwerte über den Webhook senden können, müssen wir unser Formular erstellen. Unser Formular wird die Formularfelder Name, E-Mail, Checkbox (für eine Liste unserer Produkte) und einen Absatztext (für unsere Kommentare) enthalten.

Wenn Sie Hilfe beim Erstellen eines Formulars benötigen, lesen Sie bitte diese Dokumentation.

Hinzufügen des Codeschnipsels

Jetzt ist es an der Zeit, den Codeschnipsel hinzuzufügen, der Feldwerte mit Webhooks aus unserem Checkbox-Formularfeld erstellt und sendet.

Kopieren Sie einfach dieses Code-Snippet und fügen Sie es auf Ihrer Website ein. Wenn Sie Hilfe beim Hinzufügen von Code-Snippets zu Ihrer Website benötigen, lesen Sie bitte diese Anleitung.

Zunächst fügen wir das Snippet hinzu, mit dem wir Feldwerte für Dropdowns, Kontrollkästchen und Multiple-Choice-Felder aus diesem Tutorial hinzufügen können.

/**
 * Werte in Dropdowns, Kontrollkästchen und Multiple Choice anzeigen.
 *
 * @link https://wpforms.com/developers/add-field-values-for-dropdown-checkboxes-and-multiple-choice-fields/
 */
  
add_action( 'wpforms_fields_show_options_setting', '__return_true' );

Als Nächstes fügen wir ein Snippet hinzu, das es uns ermöglicht, diese Feldwerte mit Webhooks zu senden.

/**
 * Send field values in Dropdown, checkboxes, and Multiple Choice through webhook.
 *
 * @link https://wpforms.com/developers/how-to-send-field-values-with-webhooks/
 */

function wpf_dev_webhooks_process_delivery_request_options($options, $webhook_data, $fields, $form_data, $entry_id) {
		
	    if ( ! wpforms_show_fields_options_setting() ) {
			return $options;
		}
	    
	    //Only run on form ID 322
		if ( empty( $form_data[ 'id' ] ) || $form_data[ 'id' ] !== '322' ) {
			return $options;
		}
	
		if (
			empty( $options[ 'body' ] ) ||
			empty( $webhook_data[ 'body' ] ) ||
			empty( $fields )
		) {
			return $options;
		}
	
		$body = ! is_array( $options[ 'body' ] ) ? json_decode( $options[ 'body' ], true ) : $options[ 'body' ];
		foreach ( $body as $param_key => $param_value ) {
			if (
				! isset( $webhook_data[ 'body' ][ $param_key ] ) ||
				empty( $fields[ $webhook_data[ 'body' ][ $param_key ] ] ) ||
				! isset( $fields[ $webhook_data[ 'body' ][ $param_key ] ][ 'value_raw' ] )
			) {
				continue;
			}
			$body[ $param_key ] = $fields[ $webhook_data['body'][ $param_key ] ]['value_raw'];
		}
	
		// Format request data.
		if (
			! empty( $options[ 'method' ] ) &&
			$options[ 'method' ] !== 'GET' &&
			$webhook_data[ 'format' ] === 'json'
		) {
			// Encode request body.
			$options[ 'body' ] = wp_json_encode( $body );
		}
	
		return $options;
	
	}

add_filter( 'wpforms_webhooks_process_delivery_request_options', 'wpf_dev_webhooks_process_delivery_request_options', 10, 5);

Bearbeiten des Formulars, um die Anzeige der Werte zu ermöglichen

Sobald Sie Ihr Codeschnipsel hinzugefügt haben, bearbeiten Sie einfach Ihr Formular und klicken Sie auf das Feld "Checkbox", damit Sie Ihre Feldwerte eingeben können. Diese werden dann über den Webhook anstelle des Labels an Slack gesendet.

Nun müssen Sie Ihr Formular bearbeiten und das Formularfeld Checkbox auswählen. Klicken Sie in den erweiterten Optionen auf das Kontrollkästchen für Werte anzeigen.

Sobald Sie dies getan haben, können Sie dem Feld Ihre Werte hinzufügen.

Zuordnung der Webhook-Felder

Der letzte Schritt besteht darin, die Formularfelder so zuzuordnen, dass sie mit den Variablen übereinstimmen, die wir in unserem Slack-Workflow eingerichtet haben. Um diesen Schritt abzuschließen, klicken Sie im Form Builder auf die Registerkarte Einstellungen. Klicken Sie dann auf Webhooks.

Schalten Sie diese Einstellung in der Dropdown-Liste Webhooks auf Ein.

Die Webhooks-URL ist die URL, die Sie in Schritt 4 oben kopiert haben. Die Anfragemethode ist "Post" und das Anfrageformat ist " JSON".

Sie können die Abschnitte Secret und Request Headers leer lassen. Wir brauchen diese Einstellungen nicht zu ändern.

Im Request Body werden wir unsere Variablen aus Schritt 3 unseren Formularfeldern zuordnen.

Wenn das Formular ausgefüllt ist, sendet ein Slackbot nicht nur eine Nachricht an die Person oder den Kanal, den Sie in Ihrem Webhook eingerichtet haben, sondern er sendet auch die Feldwerte über den Webhook anstelle der Feldbezeichnung.

Und das war's! Möchten Sie Ihrer Bestätigungsnachricht bei erfolgreicher Übermittlung des Formulars auch animiertes Konfetti hinzufügen? Werfen Sie einen Blick auf unsere Anleitung zum Hinzufügen von Konfetti-Animationen zu Bestätigungsnachrichten.