Dans ce tutoriel Gravity Forms, nous apprendrons trois choses :
- Comment ajouter une entrée personnalisée à n’importe quel type de champ de votre choix
- Comment ajouter des paramètres personnalisés à votre formulaire
- Et enfin, comment publier à distance les valeurs soumises pour des champs spécifiques après chaque soumission de formulaire.
Ce message suppose que vous souhaitez ajouter des fonctionnalités à Gravity Forms pour envoyer une demande de publication à distance après chaque soumission de formulaire. Dans la publication distante, vous enverrez des valeurs à partir du formulaire, qui sont personnalisables par des paramètres supplémentaires dans l’éditeur de formulaire. Des exemples courants de cas où cela serait utile sont la soumission, par exemple, d’un nom et d’un e-mail à une liste de newsletter Mailchimp, ou à toute autre intégration tierce.
La façon de résoudre ce problème en pratique consiste d’abord à ajouter des paramètres personnalisés à chaque champ, où l’éditeur peut saisir des noms de clé. La clé et leurs valeurs soumises seront envoyées à une URL tierce après chaque soumission de formulaire. Nous ajouterons également un paramètre afin que vous puissiez choisir pour chaque formulaire d’activer ce type de soumission de tiers.
Tout le code ci-dessous peut être placé dans le code de votre thème functions.phpou plugin.
Ajouter une entrée personnalisée aux champs
La première étape consiste à ajouter l’entrée aux champs dans l’éditeur de champs où vous pouvez saisir le nom de la clé pour cette valeur. Nous inclurons et soumettrons uniquement les valeurs où cette entrée a été remplie.
Choisir où placer votre entrée
Gravity Forms propose des crochets que nous pouvons utiliser pour ajouter des éléments personnalisés dans l’éditeur de champs. Le nom du hook dépend de l’onglet dans lequel vous souhaitez que votre champ apparaisse.
- Onglet "Général" :
gform_field_standard_settings - Onglet "Apparence" :
gform_field_appearance_settings - "Onglet Avancé:
gform_field_advanced_settings
Dans chaque crochet, vous aurez deux paramètres ; ID de position et de formulaire. Chaque paramètre Gravity Forms intégré a un numéro de position fixe. Vous pouvez comparer ce nombre pour décider précisément où vous voulez que votre HTML personnalisé ou votre entrée soit. Lister tous les paramètres et leur position serait beaucoup trop long dans ce post. Mais Gravity Forms ajoute ses paramètres par incréments de 5. Par exemple, dans l’onglet Général, le "Libellé du champ" est à la position 0 et la "Description" est à la position 10. Mettre votre code HTML à la position 10 le fera apparaître après Description. Ne comparez pas la position à un nombre qui n’est pas un multiplicateur de 5.
J’ajoute mon champ personnalisé dans l’onglet Avancé, à la position 50, qui se trouve juste après l’entrée "Admin Field Label".
La plupart du code ci-dessus est explicite. J’ajoute du HTML dans le même format que celui auquel Gravity Forms s’attendrait à ce qu’un paramètre soit présent. Cependant, sur l’entrée elle-même, vous devez fournir une onchangefonction Javascript. Nous lui disons simplement d’exécuter la fonction de GravityForms pour enregistrer toutes les modifications apportées à notre entrée. La propriété que nous fournissons dans SetFieldProperty, thirdPartyInput, est importante à retenir, à l’intérieur de cette clé est l’endroit où notre entrée personnalisée sera enregistrée dans le tableau de champs de Gravity Forms lors de la soumission.
Ajout d’une info-bulle (facultatif)
Vous pouvez faire une autre chose facultative avec votre entrée ; ajouter une info-bulle. Si vous le souhaitez, ajoutez cet appel de fonction dans le code que vous venez d’ajouter et fournissez une clé (unique) en tant que chaîne :
Et puis ajoutez une autre fonction qui s’accroche au filter gform_tooltips, et ajoutez le contenu de votre info-bulle à la clé correspondante, comme ceci :
L’ajout d’une info-bulle est complètement facultatif, mais c’est une bonne façon d’expliquer aux propriétaires de sites ce que fait cette entrée. Modifiez le contenu en fonction de votre fonctionnalité.
Définir les types de champ pour ajouter votre entrée personnalisée
Vous remarquerez peut-être que votre champ n’apparaît dans aucun onglet Avancé. En effet, nous devons indiquer à Gravity Forms dans quels types de champs nous voulons que cette entrée apparaisse. Par défaut, elle n’apparaîtra dans aucun.
La façon dont nous le faisons est en fait avec Javascript. GravityForms a Javascript qui masque automatiquement tous les paramètres, puis choisit d’afficher ceux spécifiques en fonction du type de champ. Notre champ est donc là, mais Gravity Forms l’a simplement caché.
Nous nous accrochons gform_editor_jset nous devons faire deux choses. Premièrement, nous décidons dans quels types de champs l’entrée doit apparaître. Et deuxièmement, nous nous assurons que l’entrée est remplie avec sa valeur au chargement.
J’ajoute l’entrée aux types de champs text, textarea, email, phoneet number. N’oubliez pas de considérer comment vous allez gérer les valeurs des champs soumis. Si vous choisissez d’autoriser ce champ, par exemple sur le type de champ de case à cocher, vous devez être en mesure d’analyser et de gérer correctement les valeurs soumises.
Maintenant, enfin, vous devriez pouvoir voir votre entrée personnalisée dans l’onglet Avancé, si le champ est de l’un des types fournis. Vous verrez également qu’il a été enregistré avec succès et qu’il est chargé avec sa valeur enregistrée. Chaque fois que le formulaire est soumis à partir de maintenant, si cette entrée est renseignée, le tableau du champ du formulaire contiendra la propriété thirdPartyInput.
La prochaine étape consiste à ajouter un paramètre sur le formulaire lui-même pour activer la soumission à un tiers. Ceci est facultatif mais recommandé. Nous voulons éviter d’exécuter du code inutile ou de soumettre quelque chose à un tiers lorsque nous n’en avons pas l’intention.
Ajout d’un paramètre personnalisé aux paramètres de formulaire
L’ajout de paramètres personnalisés aux paramètres de formulaire est assez simple. Nous devons nous accrocher au filtre gform_form_settingset ajouter notre HTML avec toutes les entrées que vous souhaitez, puis sur le filtre gform_pre_form_settings_saveet nous assurer que nos entrées personnalisées sont enregistrées sur l’objet de formulaire.
Voici comment ajouter un paramètre personnalisé aux paramètres de formulaire :
Le filtre gform_form_settings s’attend à ce que les clés soient une étiquette de section, puis un tableau pour chaque paramètre. Nous en ajoutons un seul avec la clé submit_3rd_party. À l’entrée de la case à cocher elle-même, nous utilisons la méthode de Gravity Forms rgar()pour extraire les valeurs d’une clé donnée d’un tableau (le formulaire), pour nous assurer que nous récupérons la valeur enregistrée de notre champ. Modifiez le HTML pour l’adapter à vos besoins.
Le champ apparaîtra maintenant au bas des paramètres du formulaire. Mais cela n’enregistrera pas encore vos modifications, nous devons donc résoudre ce problème :
add_filter('gform_pre_form_settings_save', function($form) {
$form['submit_3rd_party'] = rgpost('submit_3rd_party');
return $form;
}, 10, 2);
Ce morceau de code utilise une autre des méthodes d’assistance de Gravity Forms, rgpost(), pour extraire les valeurs soumises (à partir de $_POST) et les enregistre dans le tableau de formulaire fourni avec la clé souhaitée. Si vous ajoutez d’autres paramètres, vous devrez répéter cette opération pour chaque paramètre.
Et c’est tout ce dont nous avons besoin pour ajouter des paramètres de formulaire personnalisés ! Chaque fois que vous avez accès à l’objet de formulaire, vous pouvez vérifier la valeur de $form['submit_3rd_party'].
Envoyer les valeurs soumises à un tiers
Un bon crochet à utiliser pour des actions personnalisées telles que l’exécution d’une demande et l’envoi de données à partir d’un formulaire soumis est gform_after_submission. À ce stade, toutes les validations ont réussi et l’objet d’entrée (réponse) a été créé. Avec ce crochet, nous avons accès à l’objet entry et à l’objet form.
Ce que vous faites dans cette action dépend de vous, de la manière dont vous devez extraire les données et de la manière dont vous effectuez la demande de publication. En ce qui concerne cet exemple, je fais une simple demande de publication en utilisant la fonction WordPress wp_remote_post()avec un tableau de tous les champs qui avaient rempli notre entrée personnalisée dans le corps.
Vous verrez que je vérifie d’abord si le formulaire a activé les soumissions. S’il a le code, il parcourt tous les champs du formulaire et vérifie si chaque champ a ajouté quelque chose dans notre entrée personnalisée. Si l’entrée n’est effectivement pas vide, le code vérifie également si quelque chose a été soumis pour ce champ. Vous pouvez supprimer cette vérification si vous êtes d’accord pour soumettre des valeurs vides.
La partie concernant l’URL et la manière dont les données seront envoyées est quelque chose que vous devrez évidemment ajuster vous-même. Vous pouvez également éventuellement faire quelque chose avec la réponse, par exemple envoyer un e-mail en cas d’échec ou quelque chose du genre. C’est à vous de décider comment vous voulez gérer vos fonctionnalités.