Guide complet : comment remplir dynamiquement des champs dans des formulaires de gravité

Construire des formulaires simples ou complexes dans Gravity Forms est facile et rapide. L’une des fonctionnalités offertes par Gravity Forms vous permet de présélectionner ou de préremplir de manière conditionnelle les champs d’un formulaire. Ceci est utile lorsque vous avez le même formulaire sur plusieurs pages de contact pour chaque service et que vous souhaitez présélectionner le service correspondant dans le formulaire. Ou vous intégrez un formulaire de demande sur des pages de produits ou de services et souhaitez pré-remplir automatiquement des informations sur le produit ou le service actuel dans chaque soumission.

Vous pouvez dynamiquement présélectionner ou préremplir les champs de plusieurs manières, et vous pouvez également remplacer dynamiquement les choix possibles dans une liste déroulante, un bouton radio ou un groupe de cases à cocher. Le champ que vous remplissez dynamiquement peut être un champ visible que l’utilisateur peut modifier, ou il peut être acheminé vers un champ masqué afin que le lecteur des soumissions de formulaire obtienne des informations vitales.

Les quatre façons de remplir dynamiquement des champs

Dans ce guide, nous examinerons quatre façons de remplir dynamiquement des champs dans un formulaire Gravity Forms. Trois d’entre eux que vous pouvez faire sans toucher à aucun code ! Mais si vous souhaitez modifier dynamiquement les choix possibles dans une sélection, un groupe de boutons radio ou des cases à cocher, vous devrez écrire du code PHP. Nous verrons comment faire cela à la toute fin.

Vous pouvez remplir dynamiquement les champs en :

• Ajout d’informations supplémentaires dans l’URL.
• Fournissez des informations supplémentaires au shortcode intégré de Gravity Forms.
• Définir des informations supplémentaires pour le bloc Gravity Forms (si vous utilisez WordPress avec Gutenberg).
• Utiliser des filtres avec du code PHP.

Mais nous devons d’abord expliquer comment activer le remplissage dynamique d’un champ.

Activer un champ pour permettre le remplissage dynamique

La première étape, quelle que soit la méthode que vous utilisez pour remplir le champ, consiste à l’activer sur le champ lui-même.

Dans l’édition du formulaire, développez le champ et dans l’onglet "Avancé", vous trouverez une case à cocher "Autoriser le remplissage dynamique du champ". Cochez cette case et une nouvelle entrée de texte apparaît vous permettant de définir le nom de votre paramètre. Cela peut être tout ce que vous voulez, mais doit être unique et sans espaces.

Enregistrez le formulaire et vous êtes prêt à décider de la méthode que vous souhaitez utiliser pour le remplir.

Remplissage dynamique à partir des paramètres d’URL

Vous pouvez ajouter des paramètres GET au lien vers la page qui intègre le formulaire, par exemple si le lien se trouve dans un autre texte de publication ou s’il s’agit d’un lien personnalisé dans les menus WordPress.

Ajoutez simplement des variables de requête dans des paires clé-valeur, avec le nom du paramètre comme clé et leur valeur comme vous le souhaitez. Il est possible d’ajouter plusieurs paires clé-valeur si vous souhaitez remplir plusieurs champs dans le formulaire, séparez simplement chaque paire par "&".

En supposant que votre formulaire existe sur cette page : " https://example.com/contact-me/", et que votre nom de paramètre est awp_populate_me, vous pouvez remplir le champ en utilisant cette URL : " https://example.com/contact-me/?awp_populate_me=Hello".

Gardez à l’esprit que les URL doivent être correctement encodées. Par exemple, vous ne pouvez pas simplement ajouter des espaces ou des caractères spéciaux directement comme valeur de paramètre. Fournir "Hello world!" comme valeur serait " Hello%20world%21". Il existe de nombreux outils en ligne pour coder les URL pour vous si vous souhaitez suivre cette voie.

Remplir dynamiquement à partir du shortcode

Tous les formulaires sont insérés via un shortcode. Vous pouvez remplir dynamiquement les champs directement à l’intérieur de ce shortcode. Cette méthode peut être utile si vous utilisez le même formulaire dans plusieurs messages (par exemple, inscrire des participants à plusieurs événements ou cours différents), et vous devez fournir quelque chose d’unique pour savoir de quel événement ou cours le formulaire provient ……

Normalement, lorsque vous intégrez un formulaire, cela se traduit par un shortcode qui ressemble à ceci :[gravityforms id="1" title="Contact us"]

Modifiez le shortcode et ajoutez le jeu de clés field_valuesà une chaîne contenant le nom de votre paramètre égal à la valeur souhaitée. Par exemple, définir un paramètre awp_populate_mesur "Hello World" se fait comme ceci :

[gravityforms id="1" title="Contact us" field_values="awp_populate_me=Hello World"]

Si vous devez remplir plusieurs champs, ajoutez un "&" entre les deux, comme ceci :

[gravityforms id="1" title="Contact us" field_values="awp_populate_me=Hello World&awp_another_field=Hello to you too"]

Remplissage dynamique à partir de Block in Gutenberg

Si vous avez GravityForms version 2.4.13+ et WordPress avec Gutenberg (WordPress 5+), vous pouvez ajouter Gravity Forms en tant que bloc. Dans ce bloc, vous avez également une méthode pour remplir les champs.

Ajoutez le bloc "Formulaires" dans Gutenberg et choisissez votre formulaire. Le bloc doit se transformer en un aperçu de formulaire. Dans le panneau de droite, développez Avancé et vous trouverez une zone de texte intitulée "Valeurs de champ". Dans cette zone de texte, vous pouvez saisir les noms et les valeurs de vos paramètres, tout comme vous le feriez dans le shortcode. Par exemple " awp_populate_me=Hello World!"

Remplir dynamiquement à partir du code

Et enfin, si vous préférez remplir vos champs en utilisant du code PHP, il existe des filtres pour cela. Vous pouvez placer ce code dans le fichier functions.php.

La manière dont vous codez cela dépend du type de champ dont il s’agit ; comme vous pouvez probablement le deviner, le remplissage (remplacement de tous les choix) dans une sélection, les cases à cocher ou le groupe radio doivent être gérés différemment que le simple remplissage d’un seul champ de texte.

Remplir un champ à valeur unique

Remplir un champ qui a une valeur unique (ceci s’applique au champ de texte, à la zone de texte, au champ de courrier électronique, au champ de téléphone et similaire) se fait facilement en filtrant gform_field_value_<parameter name>. Dans notre exemple :

add_filter('gform_field_value_awp_populate_me', function($value) {
    return 'Hello world!';
});

Vous pouvez également utiliser ce filtre pour présélectionner une option dans un champ à plusieurs valeurs, par exemple sélectionner (liste déroulante), boutons radio ou cases à cocher.

Remplir une sélection ou des boutons radio

Si vous souhaitez simplement présélectionner une option, veuillez suivre le guide ci-dessus pour remplir un champ à valeur unique. Ce code est destiné à personnaliser ou à remplacer les choix possibles que vous obtenez sur le terrain.

Filtres de rendu de formulaire de Gravity Forms

Le gform_pre_renderfiltre nous permet de modifier le formulaire juste avant qu’il ne soit affiché. Mais lorsque nous apportons des modifications ici, nous devons nous assurer que nos modifications sont appliquées dans tous les cas ; nous devons donc également nous accrocher à gform_admin_pre_render(filtre pre_render correspondant mais affecte l’édition admin/formulaire), gform_pre_validation(responsable de la validation du formulaire avant la soumission) et gform_pre_submission_filter(filtre après validation mais avant que l’entrée ne soit enregistrée). Rassurez-vous, nous utilisons une seule et même fonction pour tous ces filtres.

Vous pouvez les filtrer directement, ou vous pouvez fournir un trait de soulignement et l’ID du formulaire après le nom du filtre, pour filtrer un formulaire spécifique uniquement. Par exemple gform_pre_render_1, ne serait exécuté que sur un formulaire avec l’ID de formulaire 1.

En tant qu’argument de tous ces filtres, vous obtenez l’objet de formulaire, dans lequel vous pouvez obtenir l’ID de formulaire (méthode alternative à l’ajout de l’ID de formulaire au filtre) et tous ses champs. Les champs de formulaire sont un tableau d’ Fieldobjets – mais tout ce dont nous avons à nous soucier est de remplacer la choicespropriété du champ correct.

Changer les choix

Le type de données par lequel vous souhaitez remplacer les choix dépend entièrement de vous, mais la choicespropriété d’un champ nécessite un tableau contenant les éléments ‘text’ et ‘value’. Par exemple ['text' => 'Hello World!', 'value' => '1', 'text' => 'Second choice', 'value' => '2'].

Le code ci-dessus filtre uniquement l’ID de formulaire de 1. Il commence par parcourir les champs du formulaire. Il est important de noter le "&" avant l’élément dans la boucle, qui le passe par référence. Cela signifie que si nous apportons des modifications à $field, elles sont appliquées et enregistrées directement dans le fichier $form['fields'].

La deuxième étape consiste à cibler le champ qui a le nom du paramètre que nous voulons cibler. Pour chaque champ, il s’agit de la inputNamepropriété. Vous pouvez utiliser d’autres méthodes de ciblage des champs, par exemple son ID (id) ou sa classe CSS (cssClass). Lorsque nous avons trouvé notre champ, nous devons générer le tableau de remplacement pour les choix et le définir $field->choicessur ceci. Dans l’exemple ci-dessus, j’interroge toutes les pages et les parcourt en boucle pour générer un tableau formaté correct.

N’oubliez pas de retourner le $formtout à la fin, car il s’agit d’un filtre.

Il convient de mentionner que ce filtre s’applique également au formulaire d’édition (car nous filtrons gform_admin_pre_render). Mais rappelez-vous que vous ne pouvez plus manipuler les choix dans l’édition du formulaire – cela n’enregistrera tout simplement pas vos modifications car ce code le remplacera toujours.

Remplir les cases à cocher

Je vais le mentionner à nouveau; si vous souhaitez simplement présélectionner une case à cocher, veuillez suivre le guide ci-dessus pour remplir un champ à valeur unique. En ce qui concerne le remplacement de tous les choix dans les cases à cocher, le processus est très similaire au remplissage d’un bouton de sélection ou d’un bouton radio ci-dessus, mais avec quelques différences mineures. Je recommande de regarder d’abord l’explication ci-dessus pour les boutons de sélection et de radio.

Vous utilisez les mêmes filtres et le processus de démarrage est le même ; vous parcourez les champs du formulaire et trouvez celui que vous voulez. Cependant, avec les cases à cocher, vous devez remplacer deux propriétés dans l’objet champ ; choiceset inputs. La choicespropriété attend le même tableau que dans une sélection ou des boutons radio.

La inputpropriété attend un tableau avec les éléments ‘ label‘ et ‘ id‘. Le labelest explicite et devrait être identique à textdans le tableau de choix. L’ idélément doit suivre les règles d’identification de Gravity Forms ; en concaténant l’ID de champ, un point et l’ID de choix, en commençant par 1 (par exemple, si l’ID de champ est 2 et l’ID de choix est 3, le bon idest " 2.3").

Étant donné que l’ID de choix doit commencer à 1, nous commençons une variable de compteur avant la boucle et ajoutons 1 pour chaque élément de la boucle, et l’utilisons avec l’ID de champ et un point comme iddans le inputstableau.

Lorsque nous avons nos deux tableaux, nous les définissons sur les champs choiceset les inputspropriétés, et renvoyons le formulaire modifié.