Souhaitez-vous envoyer les valeurs des champs de vos cases à cocher avec l'addon WPForms Webhooks? Par défaut, le libellé du champ est envoyé, mais avec un petit extrait de PHP, vous pouvez facilement envoyer la valeur à la place. Dans ce tutoriel, nous allons vous expliquer comment faire.
Ce tutoriel va créer un flux de travail Slack ainsi que des variables auxquelles nous assignerons les champs de notre formulaire afin que les données de notre formulaire soient envoyées à Slack par le biais de notre webhook. Nous pourrons ainsi fournir un formulaire de demande de fonctionnalité en ligne sur notre site et faire en sorte que les données soient envoyées à Slack chaque fois que le formulaire est rempli par nos visiteurs.
Envoi de valeurs de champs
Actuellement, la seule façon d'envoyer plusieurs champs de formulaire de WPForms à Slack à travers un webhook est d'utiliser le Slack Workflow. Pour plus d'informations sur les Workflows Slack, veuillez consulter cette documentation.
Si vous ne souhaitez envoyer qu'une seule valeur à Slack par le biais d'un webhook, veuillez consulter cette documentation.
Nous allons commencer par créer un flux de travail dans Slack afin de pouvoir créer les variables que nous utiliserons plus tard lors de la configuration du webhook dans le constructeur de formulaires.
1) Ajouter un nouveau flux de travail dans Slack
Tout d'abord, vous devez vous connecter à votre Slack via le navigateur web. Une fois connecté, cliquez sur la flèche située à côté du nom de l'entreprise et, sous Outils, sélectionnez Workflow Builder.
Ensuite, vous cliquez sur le bouton Créer dans le coin supérieur droit de la page et donnez un nom à votre flux de travail, puis cliquez sur Suivant.
2) Sélection du type de flux de travail
L'écran suivant vous permet de sélectionner le type de flux de travail que vous souhaitez créer. Puisque nous allons utiliser l'addon WPForms Webhooks, nous allons cliquer sur le bouton Select à côté de Webhook.
3) Création des variables pour le flux de travail
L'écran suivant est celui où nous allons créer les variables que nous allons afficher. Pour les besoins de ce tutoriel, nous savons que nous allons créer un formulaire avec les champs Nom, Email, Case à cocher (pour notre liste de produits), et Texte du paragraphe (pour nos commentaires). Nous allons donc créer des variables qui fonctionneront avec ces champs.
Une fois que vous avez cliqué sur le lien Ajouter des variables, une nouvelle fenêtre vous demande d'indiquer la clé et le type de données.
La clé de notre première variable sera nom et le 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 flux de travail en cliquant sur le lien Ajouter une variable jusqu'à ce que vous ayez fini d'ajouter toutes les variables.
Nous allons répéter cette étape pour les champs de formulaire Email, Checkbox et Paragraph Text.
Maintenant que nous avons ajouté toutes nos variables, cliquez sur le bouton Suivant pour terminer la construction du flux de travail.
4) Ajout des étapes au flux de travail
Il est maintenant temps d'ajouter les étapes de notre nouveau flux de travail.
Ensuite, cliquez sur le bouton Ajouter en regard de Envoyer un message. Ici, vous pouvez choisir d'envoyer un message à un canal ou à une personne en particulier dans Slack.
L'écran suivant vous demandera de sélectionner dans une liste déroulante les personnes à qui vous souhaitez envoyer le message. Vous pourrez ensuite créer le message qui sera envoyé.
Le message lui-même acceptera le texte saisi ainsi que les variables que vous avez ajoutées à la dernière étape. Pour notre message, nous commencerons par définir ce qu'il est : "Soumission d'un formulaire pour une nouvelle fonctionnalité".
Ensuite, nous commencerons à construire le texte et les variables ensemble sur une nouvelle ligne pour chacun. Une fois que vous avez tapé De, cliquez sur le lien Insérer une variable et sélectionnez le nom de la variable. 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 popup se ferme et il ne vous reste plus qu'à cliquer sur le bouton Publier pour publier le flux de travail. Une fois que vous avez publié votre flux de travail, vous pouvez cliquer sur le bouton Copier à côté de l'URL 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 Nom, Email, Case à cocher (pour une liste de nos produits), et un Paragraphe Texte (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 du champ avec des webhooks à partir de notre champ de formulaire Checkbox.
Il suffit de copier et de coller 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 allons ajouter le snippet qui nous permet d'ajouter des valeurs aux champs de type Dropdown, Checkboxes et Multiple Choice de ce tutoriel.
/** * Afficher les valeurs dans les listes déroulantes, les cases à cocher et les choix multiples. * * @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 snippet qui nous permettra d'envoyer les valeurs de ces champs 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);
N'oubliez pas de mettre à jour l'ID du formulaire de 322 à l'ID de votre formulaire. Si vous avez besoin d'aide pour trouver votre identifiant de formulaire, veuillez consulter ce tutoriel.
Modification du formulaire pour permettre l'affichage des valeurs
Une fois que vous avez ajouté votre extrait de code, il vous suffit d'éditer votre formulaire et de cliquer sur le champ Checkbox afin que vous puissiez remplir les valeurs de votre champ. C'est ce qui sera envoyé à Slack via le webhook au lieu de l'étiquette.
Vous devez maintenant modifier votre formulaire et sélectionner le champ de formulaire Case à cocher. Dans les options avancées, cochez la case Afficher les valeurs.
Une fois cette étape franchie, vous pourrez ajouter vos valeurs au champ.
Mappage des champs du webhook
La dernière étape consiste à faire correspondre les champs du formulaire aux variables que nous avons définies dans notre flux de travail Slack. Pour réaliser cette étape, dans le générateur de formulaires, cliquez sur l'onglet Paramètres. Cliquez ensuite sur Webhooks.
Dans le menu déroulant Webhooks, activez ce paramètre.
L'URL Webhooks 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 les sections Secret et En-têtes de requête vides. Nous n'aurons pas besoin de modifier ces paramètres.
Dans le corps de la requête, c'est ici que nous allons faire correspondre les variables de l'étape 3 aux champs du formulaire.
Maintenant, lorsque le formulaire est rempli, non seulement un Slackbot enverra un message à la personne ou au canal que vous avez défini dans votre webhook, mais il enverra également les valeurs des champs à travers le webhook au lieu de l'étiquette du champ.
Et c'est tout ! Vous souhaitez également ajouter des confettis animés à votre message de confirmation lorsque le formulaire a été envoyé avec succès ? Jetez un coup d'œil à notre tutoriel sur la façon d'ajouter une animation de confettis au message de confirmation.