Feldwerte mit Webhooks senden

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

Dieses Tutorial wird einen Slack-Workflow erstellen und Variablen erstellen, die wir unseren Formularfeldern zuweisen werden, damit unsere Formulardaten über unseren Webhook an Slack gesendet werden, damit wir ein Online-Feature-Anfrageformular auf unserer Website bereitstellen können und diese Daten jedes Mal an Slack gesendet werden, wenn das Formular von unseren Besuchern ausgefüllt wird.

Feldwerte senden

Derzeit ist der einzige Weg, mehrere Formularfelder von WPForms über einen Webhook an Slack zu senden, die Verwendung des Slack-Workflows. Weitere Informationen zu Slack-Workflows finden Sie in dieser Dokumentation.

Wir beginnen damit, zuerst einen Workflow in Slack zu erstellen, damit wir die Variablen erstellen können, die wir später bei der Einrichtung des Webhooks im Formular-Builder verwenden werden.

1) Neuen Workflow in Slack hinzufügen

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

Klicken Sie dann oben rechts auf der Seite auf die Schaltfläche Erstellen, geben Sie Ihrem Workflow einen Namen und klicken Sie dann auf Weiter.

2) Auswahl des Workflow-Typs

Auf dem nächsten Bildschirm wählen Sie den Workflow-Typ 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 Workflow

Auf dem nächsten Bildschirm erstellen wir die Variablen, die wir posten werden. Für dieses Tutorial wissen wir, dass wir ein Formular mit den Formularfeldern Name, E-Mail, Kontrollkästchen (für unsere Produktliste) und Absatztext (für unsere Kommentare) erstellen werden. Daher erstellen wir Variablen, die mit diesen Feldern funktionieren.

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

Unser erster Variablen-Schlüssel wird name sein und unser Datentyp wird Text sein.

Klicken Sie auf Fertig, wenn Sie mit dem Hinzufügen der Variable fertig sind, 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 den Workflow fertigzustellen.

4) Hinzufügen der Schritte zum Workflow

Jetzt ist es an der Zeit, die Schritte hinzuzufügen, die unser neuer Workflow ausführen soll.

Klicken Sie als Nächstes auf die Schaltfläche Hinzufügen neben Nachricht senden. Hier können Sie wählen, ob Sie in Slack an einen bestimmten Kanal oder eine bestimmte Person posten 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 wird.

Die Nachricht selbst akzeptiert den eingegebenen Text sowie die Variablen, die Sie im letzten Schritt hinzugefügt haben. Für unsere Nachricht beginnen wir mit dem, was diese Nachricht ist: „Eingehende Formularübermittlung für eine neue Funktion“.

Dann beginnen wir, den Text und die Variablen Zeile für Zeile zusammenzustellen. Sobald Sie Von eingegeben haben, klicken Sie auf den Link Variable einfügen und wählen Sie die Variable name aus. Wiederholen Sie diesen Schritt für jede der von Ihnen hinzugefügten Variablen 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.

Erstellung 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, Kontrollkästchen (für eine Liste unserer Produkte) und Absatztext (für unsere Kommentare) enthalten.

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

Hinzufügen des Code-Snippets

Jetzt ist es an der Zeit, das Code-Snippet hinzuzufügen, das Feldwerte mit Webhooks aus unserem Kontrollkästchen-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 dieses Tutorial.

Zuerst fügen wir das Snippet hinzu, das es uns ermöglicht, Feldwerte für Dropdown-, Kontrollkästchen- und Mehrfachauswahlfelder aus diesem Tutorial hinzuzufügen.

/**
 * Show values in Dropdown, checkboxes, and Multiple Choice.
 *
 * @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 aktivieren

Nachdem Sie Ihr Code-Snippet hinzugefügt haben, bearbeiten Sie einfach Ihr Formular und klicken Sie auf das Kontrollkästchen-Feld, um Ihre Feldwerte einzugeben. Dies ist das, was an Slack über den Webhook gesendet wird, anstelle des Labels.

Jetzt müssen Sie Ihr Formular bearbeiten und das Kontrollkästchen-Formularfeld auswählen. Klicken Sie unter Erweiterte Optionen auf das Kontrollkästchen für Werte anzeigen.

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

Zuordnung der Webhook-Felder

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

Schalten Sie diese Einstellung im Dropdown-Menü 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 den Abschnitt „Geheimnis“ und „Anforderungsheader“ leer lassen. Wir müssen diese Einstellungen nicht ändern.

Im Anfragekörper ordnen wir unsere Variablen aus Schritt 3 unseren Formularfeldern zu.

Wenn das Formular nun ausgefüllt ist, sendet nicht nur ein Slackbot 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 des Feldnamens.

Und das ist alles! Möchten Sie Ihrer Bestätigungsnachricht nach erfolgreicher Formularübermittlung auch animiertes Konfetti hinzufügen? Sehen Sie sich unser Tutorial So fügen Sie eine Konfetti-Animation zur Bestätigungsnachricht hinzu an.