Comment envoyer des valeurs de champ avec des Webhooks

Souhaitez-vous envoyer les valeurs des champs de vos cases à cocher avec le module complémentaire Webhooks WPForms ? Par défaut, l'étiquette du champ serait envoyée, mais avec un petit extrait de code PHP, vous pouvez facilement envoyer la valeur à la place. Dans ce tutoriel, nous vous expliquerons comment faire.

Ce tutoriel va créer un Workflow Slack ainsi que des variables que nous attribuerons à nos champs de formulaire afin que nos données de formulaire soient publiées sur Slack via notre webhook, nous permettant ainsi de fournir un formulaire de demande de fonctionnalité en ligne sur notre site et d'avoir ces données publiées sur Slack chaque fois que le formulaire est complété par nos visiteurs.

Envoi des valeurs des champs

Actuellement, la seule façon d'envoyer plusieurs champs de formulaire de WPForms à Slack via un webhook est d'utiliser le Workflow Slack. Pour plus d'informations sur les Workflows Slack, veuillez consulter cette documentation.

Nous allons commencer par créer un workflow dans Slack afin de pouvoir créer les variables que nous utiliserons plus tard lors de la configuration du webhook dans le constructeur de formulaire.

1) Ajout d'un nouveau workflow dans Slack

Tout d'abord, vous devrez vous connecter à votre Slack via le navigateur Web. Une fois connecté, cliquez sur la flèche à côté du nom de l'entreprise, et sous Outils, sélectionnez Workflow Builder.

Ensuite, cliquez sur le bouton Créer dans le coin supérieur droit de la page, donnez un nom à votre workflow, puis cliquez sur Suivant.

2) Sélection du type de workflow

L'écran suivant vous permettra de sélectionner le type de workflow que vous souhaitez créer. Comme nous allons utiliser le module complémentaire Webhooks WPForms, nous cliquerons sur le bouton Sélectionner à côté de Webhook.

3) Création des variables pour le workflow

L'écran suivant est celui où nous allons créer les variables que nous publierons. Aux fins de ce tutoriel, nous savons que nous allons créer un formulaire avec les champs Nom, E-mail, Case à cocher (pour notre liste de produits) et Texte de paragraphe (pour nos commentaires). Nous allons donc créer des variables qui fonctionneront avec ces champs.

Une fois que vous aurez cliqué sur le lien Ajouter des variables, une nouvelle fenêtre vous demandera la Clé et le Type de données.

Notre première Clé de variable sera name et notre Type de données sera Texte.

Cliquez sur Terminé lorsque vous avez fini d'ajouter la variable et répétez cette étape pour chaque variable que vous souhaitez ajouter à ce workflow en cliquant sur le lien Ajouter une variable jusqu'à ce que vous ayez terminé d'ajouter toutes les variables.

Nous allons répéter cette étape pour les champs de formulaire E-mail, Case à cocher et Texte de paragraphe.

Maintenant que nous avons ajouté toutes nos variables, cliquez sur le bouton Suivant pour terminer la création du workflow.

4) Ajout des étapes au workflow

Il est maintenant temps d'ajouter les étapes que notre nouveau workflow va suivre.

Ensuite, cliquez sur le bouton Ajouter à côté de Envoyer un message. Ici, vous pouvez choisir de publier dans un canal ou une personne spécifique sur Slack.

L'écran suivant vous demandera de sélectionner dans une liste déroulante à qui vous souhaitez envoyer le message. Ensuite, vous pourrez créer le message qui sera envoyé.

Le message lui-même acceptera le texte que vous saisissez ainsi que les variables que vous avez ajoutées à l'étape précédente. Pour notre message, nous commencerons par ce que ce message est « Soumission de formulaire entrante pour une nouvelle fonctionnalité ».

Ensuite, nous commencerons à assembler le texte et les variables sur une nouvelle ligne pour chacun. Une fois que vous avez tapé De, cliquez sur le lien Insérer une variable et sélectionnez la variable nom. Répétez cette étape pour chacune des variables que vous avez ajoutées et cliquez sur Enregistrer pour sauvegarder les modifications.

La fenêtre contextuelle se fermera et vous n'aurez qu'à cliquer sur le bouton Publier pour publier le workflow. Une fois que vous avez publié votre workflow, vous pouvez cliquer sur le bouton Copier à côté de l'URL qui sera créée pour le webhook. Nous utiliserons cette URL dans une étape ultérieure.

Création du formulaire

Avant de pouvoir envoyer les valeurs de nos champs via le webhook, nous devons créer notre formulaire. Notre formulaire contiendra les champs de formulaire Nom, E-mail, Case à cocher (pour une liste de nos produits) et Texte de paragraphe (pour nos commentaires).

Si vous avez besoin d'aide pour créer un formulaire, veuillez consulter cette documentation.

Ajout de l'extrait de code

Il est maintenant temps d'ajouter l'extrait de code qui créera et enverra les valeurs des champs avec des webhooks à partir de notre champ de formulaire Case à cocher.

Copiez et collez simplement cet extrait de code sur votre site. Si vous avez besoin d'aide pour ajouter des extraits de code à votre site, veuillez consulter ce tutoriel.

Tout d'abord, nous ajouterons l'extrait qui nous permet d'ajouter des valeurs de champ pour les listes déroulantes, les cases à cocher et les choix multiples à partir de ce tutoriel.

/**
 * 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' );

Ensuite, nous allons ajouter un extrait qui nous permettra d'envoyer ces valeurs de champ avec des webhooks.

/**
 * 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);

Modification du formulaire pour activer l'affichage des valeurs

Une fois que vous avez ajouté votre extrait de code, modifiez simplement votre formulaire et cliquez sur le champ Case à cocher afin de pouvoir renseigner les valeurs de vos champs. C'est ce qui sera envoyé à Slack via le webhook au lieu de l'étiquette.

Vous devrez maintenant modifier votre formulaire et sélectionner le champ de formulaire Case à cocher. Dans les Options avancées, cochez la case pour Afficher les valeurs.

Une fois que vous aurez fait cela, vous pourrez ajouter vos valeurs au champ.

Mappage des champs webhook

La dernière étape consiste à mapper les champs du formulaire aux variables que nous avons configurées dans notre flux de travail Slack. Pour terminer cette étape, depuis l'intérieur du générateur de formulaires, cliquez sur l'onglet Paramètres. Ensuite, cliquez sur Webhooks.

Dans le menu déroulant Webhooks, activez ce paramètre sur Activé.

L'URL du Webhook est l'URL que vous avez copiée à l'Étape 4 ci-dessus. La Méthode de Requête sera Post et le Format de Requête sera JSON.

Vous pouvez laisser la section Secret et En-têtes de Requête vide. Nous n'aurons pas besoin de modifier ces paramètres.

Dans le Corps de la Requête, c'est ici que nous allons mapper nos variables de l'Étape 3 à nos champs de formulaire.

Maintenant, lorsque le formulaire sera complété, non seulement un Slackbot enverra un message à la personne ou au canal que vous avez configuré dans votre webhook, mais il enverra également les valeurs des champs via le webhook au lieu des étiquettes des champs.

Et voilà ! Souhaitez-vous également ajouter une animation de confettis à votre message de confirmation après la soumission réussie du formulaire ? Consultez notre tutoriel sur Comment ajouter une animation de confettis au message de confirmation.