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 :

  1. Saisissez le début de votre phrase, par exemple : “En cochant cette case, j’accepte la”
  2. 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).

Divi Community - Ajoutez une case à cocher à votre formulaire Divi - RGPD

Choisissez ensuite le type de champ Checkboxes.

Divi Community - Ajoutez une case à cocher à votre formulaire Divi - RGPD

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.

Divi Community - Ajoutez une case à cocher à votre formulaire Divi - RGPD

Et voila, vous avez une belle case à cocher !

Divi Community - Ajoutez une case à cocher à votre formulaire Divi - RGPD

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

<script>
  jQuery(document).ready(function($){
    $("label[for='et_pb_contact_rgpd_5_0']").contents().eq(1).wrap("<a href='https://www.divi-community.fr' target='_blank'>");
  });
</script>

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

<script>
  jQuery(document).ready(function($){
    $("label:contains('politique')").contents().eq(1).wrap("<a href='https://www.divi-community.fr' target='_blank' class='lien_rgpd'>");  
  });
</script>

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

Divi Community - Ajoutez une case à cocher à votre formulaire Divi - RGPD

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)
.lien_rgpd {
  text-decoration:underline;
}
.lien_rgpd:after {
  font-family:"ETmodules";
  content:'p';
  position:absolute;
  margin-left:3px;
  bottom:3px;
}

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 ).

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.

D'autres tutoriels pouvant vous intéresser: