Depuis la version 3.4.1 du 26 mai 2018, Divi intègre une option dans son module formulaire
Dans le Visual Builder UNIQUEMENT, ouvrez les paramètres de votre module formulaire et dans les options du champ case à cocher :
- Saisissez le début de votre phrase, par exemple : “En cochant cette case, j’accepte la”
- cliquez sur l’icone qui va vous permettre d’ajouter un lien
Dans le premier champ, saisissez le lien de votre page de politique de confidentialité.
Dans le second champ, saisissez le texte de votre lien. Si nous continuons l’exemple commencé plus haut, nous écrirons “politique de confidentialité”.
Validez, sauvegardez et vous avez un formulaire Divi conforme avec le RGPD !
Bien que l’ajout de cette nouvelle option dans Divi rende inutile la manipulation exposée dans cet article, les explications détaillées ici en pas à pas sur l’utilisation de jQuery conservent toute leur valeur pédagogique et peuvent être utilisées dans un autre cas de figure. 😉
Avec le RGPD (Règlement Général sur la Protection des Données) qui arrive à grand pas (il entre en vigueur le 25 mai 2018), il nous faudra ajouter dans nos formulaires une case à cocher indiquant que l’utilisateur consent à partager ses données, ainsi qu’un lien vers la politique de confidentialité du site (si vous voulez des infos détaillées sur le RGPD, je vous invite à lire cet article très complet sur WP Marmite).
Les grands éditeurs d’extensions de formulaires ont (ou vont incessamment sous peu) modifier leurs outils de manière à les rendre conformes à la législation, mais si vous utilisez le module “formulaire” de Divi… et bien Elegant Themes n’a encore rien fait à ce sujet…
Voici donc comment remédier à ce manque.
Ajoutez la case à cocher dans votre module Formulaire Divi
Commencez par ajouter un champ à votre formulaire en précisant un identifiant (retenez-le car nous le retrouverons plus tard).
Donnez-lui également un titre qui s’affichera à gauche de la case à cocher mais aussi dans les erreurs de formulaire (si l’utilisateur ne rempli pas ce champ alors qu’il est requis).
Choisissez ensuite le type de champ Checkboxes.
Et précisez l’intitulé de la case à cocher.
Vérifiez au passage que la case sous Options n’est pas cochée (par défaut, elle doit être vierge).
Et bien sûr, notez ce champ comme requis.
Et voila, vous avez une belle case à cocher !
Bon, ça c’était la partie la plus facile… nous allons maintenant quitter les sentiers battus car nous arrivons à la limite des possibilités offertes par le module Formulaire de Divi.
Il nous faut cette fois ajouter un lien qui permettra de diriger le visiteur vers la page des mentions légales contenant les infos sur la politique de confidentialité.
jQuery à la rescousse !
Et oui, par défaut, impossible d’ajouter un lien sur du texte via le module Formulaire de Divi…
Heureusement, quelques lignes de jQuery vont nous aider !
Je vais profiter de ce tuto pour bien détailler le code utilisé afin de vous démontrer que jQuery n’est pas si compliqué que ça à prendre en main et surtout qu’il n’a pas son pareil pour manipuler le DOM.
Si vous faites un clic droit sur l’intitulé de votre case à cocher et choisissez “Inspecter” ou “Examiner” selon votre navigateur (Tout savoir sur les outils de développement du navigateur), vous pourrez constater qu’on a pas grand chose à quoi s’accrocher pour ajouter un lien sur le texte “En cochant cette phrase…”.
Gardez bien l’image ci-dessus en tête, car elle vous permettra de mieux comprendre la suite du tuto.
Commencez par ajouter un module Code à votre page, avant ou après votre formulaire de contact, pour y coller les lignes de code de l’une ou l’autre des 2 solutions que je vous propose.
Solution 1
Examinons le code de la ligne 3
- Avec $(“label[for=’et_pb_contact_rgpd_5_0′]”), nous ciblons donc spécifiquement la balise label qui contient notre case à cocher, mais notez que :
- rgpd correspond à l’identifiant du champ Checkboxes tel que vous l’avez indiqué dans le module Formulaire
- 5_0 correspond au numéro d’ordre de votre champ Checkboxes, en comptant à partir de “0” (dans mon cas, c’est donc le sixième champ du formulaire)
- .contents() nous permet d’aller fouiller dans le contenu de la balise label
- .eq(1) nous permet de cibler le deuxième élément (là aussi on compte à partir de “0”) contenu dans la balise label, donc pas la balise <i></i> mais le texte “En cochant cette case…” qui suit
- avec .wrap(“<a href=’https://www.divi-community.fr’ target=’_blank’>”), nous indiquons que :
- nous voulons envelopper (.wrap) le résultat de notre recherche (c’est-à-dire le texte : “En cochant cette case…”)
- avec une balise lien (<a>) contenant :
- la cible du lien (href=”)
- que celui-ci s’ouvre dans un nouvel onglet (target=’_blank’)
- et nous lui ajoutons une classe (class=’lien_rgpd’) pour nous aider à le styler ensuite avec les CSS
Inconvénient de ce code
Si vous ajoutez dans votre formulaire un ou plusieurs champs avant votre case à cocher, il vous faudra obligatoirement modifier le numéro d’ordre de votre label (le fameux 5_0 de mon exemple).
Solution 2
Examinons le code de la ligne 3
- Avec $(“label:contains(‘politique’)”) nous ciblons un élément contenant le mot “politique” (à vous d’ajuster en fonction de la phrase que vous avez choisie pour votre intitulé)
- .contents() nous permet d’aller fouiller dans le contenu de la balise label
- .eq(1) nous permet de cibler le deuxième élément (là aussi on compte à partir de “0”) contenu dans la balise label, donc pas la balise <i></i> mais le texte “En cochant cette case…” qui suit
- avec .wrap(“<a href=’https://www.divi-community.fr’ target=’_blank’>”), nous indiquons que :
- nous voulons envelopper (.wrap) le résultat de notre recherche (c’est-à-dire le texte : “En cochant cette case…”)
- avec une balise lien (<a>) contenant :
- la cible du lien (href=”)
- que celui-ci s’ouvre dans un nouvel onglet (target=’_blank’)
- et nous lui ajoutons une classe (class=’lien_rgpd’) pour nous aider à le styler ensuite avec les CSS
Inconvénient de ce code
Ici, pas de souci si vous modifiez le nombre ou l’ordre des champs de votre formulaire, étant donné que nous nous appuyons sur un mot pour cibler la bonne balise label.
Par contre, dans le cas d’un site multilingue, ça va être compliqué (voire impossible) d’avoir un terme commun dans toutes les langues…
Un peu de CSS pour enjoliver le lien
Par défaut, votre lien prend la couleur des liens telle que vous l’avez définie dans les options de Divi.
Je vous propose donc d’ajouter un soulignement (c’est “old school”, mais dans l’esprit des internautes, rien de tel pour symboliser un lien) et un petit icone “Information” à la fin du lien.
Il est donc temps de vous servir de la classe lien_rgpd que vous avez ajoutée avec jQuery.
Comme d’habitude, ce code est à ajouter selon votre préférence, à l’un des 3 emplacements suivants :
- Paramétrage de la page -> Avancé -> Personnaliser CSS
- Divi -> Options du thème -> Personnaliser CSS
- le fichier style.css de votre thème enfant (vous n’avez pas de thème enfant ? Téléchargez ici celui de Divi Community)
Examinons le code
- Ligne 2 : on ajoute un soulignement au lien
- Ligne 4 : la pseudo-classe :after va nous servir à insérer un icone après le lien
- Ligne 5 : on choisit d’utiliser la polices d’icones de Divi
- Ligne 6 : c’est le caractère “p” qui correspond à l’icone d’informations (voir la liste complète des icones de la police ET Modules)
- Lignes 7 à 9 : on définit la position de l’icone
Pour conclure
Et voila, en quelques lignes de code, votre formulaire Divi est maintenant en règle avec la législation !
Et si ce n’est pas encore fait, il ne vous reste “plus qu’à” rédiger le texte de la politique de confidentialité de votre site (voici un peu d’inspiration ici et là).
Malgré le côté rébarbatif de cette nouvelle obligation légale, nous avons pu découvrir quelques rouages de jQuery que vous pourrez très certainement réutiliser dans d’autres situations.
Si vous souhaitez en savoir un peu plus sur les méthodes de manipulation du DOM avec jQuery, je vous invite à consulter sa documentation qui est très claire et agrémentée de nombreux exemples.
Merci Pierre pour ce super article !
Sur des formulaires qui permettent aux internautes d’envoyer des messages, est ce qu’il y a d’autres obligations que celle de l’ajout de la case à cocher ?
Merci Lilian !
Tout est expliqué en détails ici dans l’article de WP Marmite 😉
Bonjour, j’ai une critique et une question:
– vous proposez d’ajouter un soulignement qui n’est pas un lien, alors que ceci est contraire aux règles de qualité web (un soulignement = un lien, règle numéro 108). cela me semble donc être une très mauvaise idée.
– l’idée est d’ajouter un LIEN pointant vers la page des CGU. J’ai essayé d’ajouter du code HTML pour y intégrer mon lien, mais cela ne fonctionne pas. Avez-vous uen solution SVP ?
Merci et bonne journée !
PS : la règle numero 108 cobncernant les soulignements reservés aux liens : https://checklists.opquast.com/oqs-v3/criteria/le-soulignement-est-reserve-aux-hyperliens
Bonjour Rashel,
relis bien le tuto, l’idée est d’ajouter un lien avec jQuery sur la phrase “J’accepte…”, c’est pour ça que je préconise d’ajouter un soulignement.
Bonjour Rashel, on propose justement d’ajouter un soulignement SUR un lien, donc je ne comprends pas vraiment la remarque. On utilise également JQuery pour ajouter un lien vers des CGU…
As-tu cliquer sur le bouton pour voir l’exemple?
Désolée, j’ai lu trop vite, et c’est le CSS qui m’a fait fait mal comprendre 🙂
.lien_rgpd {
text-decoration:underline;
}
Super Pierre, un tutoriel très utile et bien écrit (comme d’habitude).
En me basant sur ta méthode, j’ai apporté une modification pour ne créer un lien que vers la page de confidentialité, et pas toute la phrase. Merci pour le partage.
Merci Fabrice, en espérant que cette méthode soit obsolète avec la prochaine mise à jour de Divi 😉
Merci ! Ça m’a vraiment beaucoup aidé, j’ai jamais vu une explication aussi facile, compréhension et simple 🙂
Merci 😉
Merci beaucoup Marie. 🙂
Au passage, j’ai regardé vite fait ton site et te conseille de changer la couleur de la coche de ta checkbox car elle est à peine visible.
Merci bien Fabrice . 🙂
C’est sûr, ma méthode est une base de départ fonctionnelle, mais qui peut ensuite être adaptée selon les besoins et envies de chacun.
C’est pour cette raison que j’ai tenu à bien détailler les quelques lignes de jQuery que j’ai employées.
Bonjour, J’ai appliqué la méthode 2 sur un de mes sites DIVI sans aucun problème. Sur le deuxième site, lorsque je colle le code et que sauvegarde et publie la page, j’ai toutes mes images qui ne s’affichent plus, et si je reviens voir mon module de code, la balise fermante a disparu ! une idée de l’origine du problème ?
Merci pour ce tutoriel que j’ai déjà utilisé sur plusieurs formulaires !
Sur une page accueil, je l’ai installé sur un premier formulaire de capture de numéro de téléphone (2 champs de formulaire y compris le RGPD) et sur un second formulaire de contact en bas de page (6 champs de formulaire y compris le RGPD)
Le second formulaire ne fonctionnait pas lorsque que j’avais ‘et_pb_contact_rgpd_5_0’. En inspectant, je me suis rendu compte qu’il me fallait mettre ‘et_pb_contact_rgpd_7_0’.
Les champs de formulaire s’additionnent lorsque l’on a plusieurs formulaires dans une même page.
Re,
@fabriceesquirol : Est-ce qu’il serait possible d’ajouter au tuto ta méthode pour cibler uniquement “Politique de confidentialité” pour ajouter le lien dessus ?
Salut et merci !
Pour cibler le lien sur une partie de la phrase (ici “politique de confidentialité”) :
jQuery(document).ready(function($) {
$(“label:contains(‘politique’)”).html(function(_, html) {
return html.replace(/(politique de confidentialité)/g, ‘$1‘);
});
});
Oups, le lien dans mon message a été interprété…
Tentative en remplaçant les ‘$1[/a>’);
});
});
Lol, faut surtout pas écrire de BIIIIIIP dans les commetaires, sinon c’est le bordel 😉
Dernier essai, après j’abdondonne !
jQuery(document).ready(function($) {
$(“label:contains(‘politique’)”).html(function(_, html) {
return html.replace(/(politique de confidentialité)/g, ‘[a href=”#” target=”_blank” class=”lien-rgpd”>$1[/a>’);
});
});
Il faut juste remplacer les deux crochets ouvrant (balises a et /a) par des signes “inférieur”.
Bonjour,
Merci Yan d’avoir partagé le code.
Par contre, je viens de le mettre en place dans des formulaires qui se trouvent dans des overlays (divi overlays) et à première vue ça ne fonctionne pas.
Est-ce que vous avez testé de votre côté ?
Merci pour ce tuto ! Comme d’habitude, simple et efficace 🙂
Ava
Merci 😉
Bonjour,
Merci pour votre tuto, j’étais à 2 doigts de créer un autre formulaire avec un plugin différent pour étre conforme au RGPD.
Juste un petit détail, peut-être que je n’ai pas tout compris, mais dans les options il y a la possibilité d’ajouter un lien vers la page de confidentialité, qui ne nécessite pas de code…
Salut Jenny, ne te soucis plus de ce tuto, Elegant Themes a sorti une mise à jour aujourd’hui par l’ajouter facilement au formulaire de Divi directement depuis le module 😉
Bonjour,
A noter que l’option dans Divi n’est visible que dans le Visual builder (en admin classique ça ne marche pas)
Merci Fabien, je vais le préciser.
Je n’utilise quasiment que le Visual Builder, donc je ne m’en étais pas rendu compte…
Merci pour vos tutoriels
Bonjour,
Y-a-t-il également un moyen d’ajouter un élément pour joindre des fichiers tel une image au formulaire ? Je n’ai rien trouvé sur le net. Merci d’avance
Bonjour, non cette fonctionnalité n’est pas disponible dans le module “formulaire” de Divi.
Tu peux utiliser Caldera Forms pour faire ça. Je t’invite à lire mon article présentant ce plugin.
Bonjour,
j’ai beaucoup la façon dont vous décortiquez vos tutos au niveau du code, c’est rare de voir des explications bien détaillées comme ça. j’aime comprendre le code que j’injecte dans mes projets c’est très appreciable vraiment merci
Bonjour et merci pour tes encouragements. 🙂
On essaye d’être le plus didactique possible, car c’est clair que ce n’est pas en copiant/collant du code sans comprendre à quoi il sert qu’on peut progresser.
Bonjour ,
Tres bien pour ce tuto. Mais je me demande comment devons nous faire pour garder une trace de l’pprobation de l’utilisateur ??
Soit avec le plugin Divi Form DB que nous avons testé ici, soit avec un autre plugin de formulaire tel que Caldera Forms pour ne citer que lui.
Bonjour,
Merci beaucoup pour ce auto.
J’ai créé une case à cocher obligatoire dans mon formulaire de contact pour le RGPD l’envoi de message est bloqué car il ne détecte pas si la case est cochée ou pas. Que faire
Ta case à cocher pour la politique de confidentialité ne doit pas être obligatoire.
Bonjour,
J’ai une petite question concernant les lignes de texte dans le sous menu.
J’en ai trois et mes lignes vont à la ligne alors qu’elles ont largement la place (le bloc est assez grand) de rester sur une ligne !
Y a t’il un moyen avec du code de forcer une ligne à rester sur une ligne (pas facile à expliquer !) ?
Merci pour votre aide ☺️
Ehu, je ne vois pas le rapport entre cet article et ta question ?…
Si tu souhaites de l’aide pour utiliser Divi, je t’invite à nous rejoindre sur notre groupe Facebook d’entraide. 🙂