Lorsqu’on édite un site WordPress, respecter les RGPD, et notamment les préconisations de la CNIL en matière de cookies n’est pas une question si facile. Cet article couvre le sujet de la manière la plus complète possible. Nous allons commencer par un récapitulatif de ce qui doit être fait pour être légal . Puis nous passerons à la pratique avec un Tuto Borlabs Cookie: je vous expliquerai pourquoi j’ai choisi cette extension plutôt qu’une autre, quels sont ses avantages, en enfin nous verrons comment la mettre en place avec quelques conseils maison pour vous faciliter la vie et aller plus loin.
Cookies et RGDP : ce qui doit être fait
Avant de chercher la moindre solution, commençons par un tour d’horizon du problème. Voici un résumé ce qui doit être fait si vous être l’éditeur ou le propriétaire d’un site web.
Dans quel cas un consentement de l’internaute est nécessaire ?
La directive de loi européenne ePrivacy stipule que les internautes doivent être informés et doivent donner leur consentement (par une action volontaire) pour le fonctionnement de certains cookies et traceurs.
Les technologies concernées sont:
Dès lors que leur utilisation concerne:
Dans les faits donc, certains cookies techniques n’ont pas besoin d’un consentement préalable. On note par exemple un cookie permettant de mémoriser le contenu du panier du sur un site e-commerce ou un cookie permettant de distinguer l’accès ou non à un espace payant…
Mais ce qu’il faut aussi concrètement retenir, c’est que dès lors qu’un site utilise des outils des GAFA (Google Analytics, pixels invisibles facebook, l’intégration d’une vidéo Youtube en iframe…) ceux-ci doivent faire d’abord appel à une action de consentement de l’utilisateur avant leur mise en marche. Ceci est doublement nécessaire car ils concernent la transmission de données d’audience, et aussi car ces acteurs américains sont hors UE.
Concernant la mesure d’audience Google Analytics, on note que des alternatives européennes se dessinent petit à petit (Matomo Analytics par exemple commence à avoir une bonne réputation). Elles sont techniquement de plus en plus matures et la CNIL incite même à les considérer, les meilleurs étant dispensé de consentement: un bon argument.
Mais selon moi cependant, il reste un problème de fond: Tant que le moteur de recherche favoris des internautes en France demeurera Google (utilisé pour plus de 90% des recherches en France), il reste profitable d’utiliser un outil d’analyse de la même maison. J’espère qu’à l’avenir l’avancé es alternatives me fera changer d’avis. Mais tant que nous n’aurons pas un équivalent de Google européen majoritairement adopté par les internautes, je trouve risqué de se passer des outils « made in Google ». Je le déplore bien sûr, car un monopôle n’est jamais bon, et la situation actuelle n’est pas idéale pour le respect des données privées…
Comment présenter ou implémenter le consentement de l’internaute ?
Concernant l’acte de consentement, c’est-à-dire comment présenter et demander les chose à vos internautes, attardons-nous sur ces quelques d’écrans pouvant être considérées comme de bonnes pratiques légales. Je vous conseille de parcourir les 3 exemples (onglets) que je vous ai sélectionné. Ces images proviennent des documents de la CNIL : « Cookies et traceurs: comment mettre mon site web en conformité » ou encore « La délibération n°2020-092 du 17 septembre 2020« . Je vous conseille d’ailleurs de vous y attarder.
On note bien la présence des boutons « Tout Refuser » et « Tout Accepter » avec le même niveau d’importance, au même plan.
Source : CNIL.fr
Selon la CNIL, un menu de personnalisation doit permettre de consulter le détail de chaque utilisation et offrir la possibilté d’accepter ou de refuser à la carte.
Source: CNIL.fr
La CNIL suggère un widget accessible depuis n’importe quelle page pour permettre à l’internaute de modifier son consentement
Source: CNIL.fr, document PDF page 12
Si l’on devait faire un résumé simplifié des bonnes pratiques attendues, on noterai donc :
De d’abord informer l’internaute
Puis demander une action de consentement
Ce rappel étant fait, vous savez maintenant de quoi un site, et donc votre WordPress, à besoin.
Une nébuleuse de plugins WordPress
Une mise en conformité légale étant un sujet important, de nombreux acteurs ont senti le filon pour proposer leurs plugins. Sur la majorité d’entre eux, les versions gratuites permettent une mise en conformité plus ou moins complète, mais il manque toujours un petit détail pour vous pousser à adopter la version premium et sortir votre carte de crédit. Voici une petite étude non exhaustive, mais qui reprend des noms de plugins très populaires. Deux approches sont à votre disposition dans ces deux fiches (à déplier).
Borlabs Cookies : Présentation de ses atouts
Beaucoup de qualités
Premièrement Borlabs est un plugin développé en Allemagne. Ce n’est pas négligeable, car nous partageons une réglementation Européenne. Sur le papier un plugin « made in Europe« , me semblait un choix plus judicieux que d’investir dans un plugin américain avec une surcouche de comptabilité pour s’adapter aux RGPD.
Borlabs permet bien sûr l’implémentation d’un cookie wall avec de nombreuses options pour le rendre très proche des recommandations de la CNIL. Le petit widget pour changer d’avis fait aussi partie des fonctions, ainsi que quelques outils (shortcode) pour implémenter ces pages légales (politique de confidentialité…).
Il permet aussi de bloquer du contenu si le consentement aux cookies associé à la plateforme n’est pas donné. Par exemple si vous refusez les cookies de Youtube, et que votre page intègre un iframe Youtube, ce plugin va automatiquement proposer une surcouche pour bloquer la vidéo ou finalement donner son consentement. Contrairement a beaucoup d’autres plugins premium qui proposent cette fonction, Borlabs est ouvert à des réglages très avancés et vous permet de bloquer a peut-être tout et n’importe quoi en paramétrant un peu de code javascript dans les options de leur plugin par exemle. Vous n’êtes donc pas limités à tous les blocages que l’équipe de Borlabs a prévu en standard, c’est un très bon point pour envisager l’avenir.
Borlabs vient aussi avec un écran de statistiques qui vous permettent de voir l’adoption des cookies, et il permet aussi de tracer les consentements. Vous pouvez donc choisir afficher à l’internaute tout l’historique de ses modifications. Une option pas si répandue et qui va dans le sens de la transparence soutenus par la CNIL.
Une courbe d’apprentissage pour en profiter à 100%
Après cet élogieux tour du prioritaire, il faut aussi parler de ces défauts.
Borlabs est un plugin autonome, donc sans mensuel abonnement à un quelconque service en ligne associé. C’est ce que l’on recherchait à travers cet article, mais cela s’accompagne d’un inconvénient. Ne proposant pas de « service en ligne » pour scanner automatiquement les plugins de votre site, il faudra venir les saisir manuellement. Vous aurez donc besoin d’apprendre comment faire. C’est donc un peu plus d’efforts que certains plugins très cher qui font tout ce la pour vous, mais je vous rassure rien d’insurmontable et vous verrez comment le faire sur le tutoriel présent sur cette page. De plus, le faire soit même vous permet de vraiment comprendre quels sont les cookies que vous utilisez avant de les lister bêtement, donc dans une démarche d’en apprendre plus sur le sujet, ce n’est pas du temps inutilement investi.
Un autre point, Borlabs vient avec énormément d’option de personnalisation. C’est super, sauf tester toutes les combinaisons pour choisir vos réglages préférés peut vite prendre du temps! Encore une fois, dans ce tutoriel je vous donnerai mes réglages préférés, et quelques petites astuces complémentaires qui devraient vous aider.
Tutoriel de A à Z – Tuto Borlabs Cookie
Si comme moi, vous voulez tenter l’apprivoiser Borlabs Cookies, ce tutoriel étape par étape devrait vous permettre de régler la question des RGPD de A à Z.
1- Scanner les cookies de son site
Comme Borlabs cookie n’intègre pas dans son offre un service en ligne pour scanner automatiquement les cookies, nous allons devoir faire cette étape manuellement.
Premièrement, assurez-vous qu’aucune extension de cookie n’est installé sur votre site. Si vous avez déjà installé Borlabs par exemple, désactivez l’extension pour que tous les cookies passent sans filtre.
Je vous conseille deux façon de faire, qui peuvent être complémentaires (à déplier) :
Allez sur cookieserve.com et entrez l’url de votre page d’accueil. Cet outil vous donne un tableau de tous les cookies trouvés sur la page.
Pensez à scanner toute les pages de votre site comportant une fonctionnalité différentes. Par exemple :
Le but est de faire l’éventail des différentes intégrations que vous proposez à vos lecteurs.
Pour plus de sécurité, vous pouvez aussi vous inscrire gratuitement (il faut ouvrir un compte gratuit avec un email et un mot de passe) sur la plateforme https://app.cookieyes.com/manage-cookies. Une fois inscrit vous pourrez lancer un scan de tout le site. Cela peut être utile pour les plus gros sites, ou par sécurité pour faire une deuxième passe, même si normalement vous devriez avoir tout balayé avec vos quelques scans manuels.
Gardez en tête que les infos découvertes par ces outils seront à copier / coller dans les réglages de Boarlabs cookies, donc gardez les de côté. Et gardez aussi en tête qu’il faudra venir traduire la description du cookie de l’anglais au français. Google traduction ou Deepl sont vos amis 🙂
Si vous le préférez, vous pouvez vous adonner exactement au même exercice depuis l’inspecteur de votre navigateur. Dans Chrome, un clic droit sur la page pour afficher l’inspecteur va vous permettre de vous diriger sur l’onglet Application. Dans le menu de gauche apparait une section Cookies.
Chaque dossier (1) représente un domaine, commencez par tous les nettoyer avec le petit bouton Clear all cookies (2).
Maintenant que tout est propre, naviguez sur votre site. Comme conseillé précédemment visitez le maximum de page contenant des intégrations différentes.
Une fois votre tour d’horizon terminé, allez consultez les cookie de chaque domaine (1), vous les découvrirez dans la liste (4).
Cela fait toujours un test complémentaire pour vérification.
Lorsque vous avez besoin de plus d’informations sur un cookie, vous pouvez taper son nom dans le site https://cookiedatabase.org/ qui vous donnera des explications complémentaire pour enrichir vos descriptions.
2- Installer l’extension, Tuto Borlabs Cookie
Après achat par carte bancaire sur leur site borlabs.io/borlabs-cookie vous recevrez par email de quoi vous connecter à votre compte client. Inutile de chercher l’extension dans le store intégré de WordPress, c’est bien depuis votre espace client que vous pourrez télécharger l’extension sous forme d’un fichier zip. Vous devrez alors l’importer dans WordPress via Extensions → Ajouter → Téleverser une extension. Confirmer en l’activant.
Dans votre menu d’administration WordPress vous trouverez alors un menu Borlabs Cookies → License. Vous devrez y coller votre clé de licence. Elle se trouve sur votre espace client, un peu au dessous du bouton de téléchargement que vous avez utilisé, dans le champ « License Key ».
3- Paramétrer Borlabs cookies, saisir la liste des cookies
Ouvrez le menu Borlabs Cookies → Cookies, vous arrivez alors sur un ensemble de 4 tableaux: Essentiels, Marketing, Média externes (déjà rempli) et Statistiques.
C’est ici que vous allez pouvoir renseigner la description des cookies de votre site. L’exemple ci-dessous (à déplier) est à votre disposition pour bien comprendre la démarche.
Procédons avec ce premier exemple si vous utilisez sur votre site Google reCAPTCHA. Cliquez sur le bouton Ajouter du tableau Essentiels.
Choisissez service : Personnalisé et cliquez sur suivant.
Dans le tableau Paramètres des cookies, choisissez un ID que vous décidez comme : grecaptcha.
Remplissez alors les informations comme suit :
Puis descendez au panneau Informations du cookie et remplissez :
| Nom: | Google reCAPTCHA |
| Fournisseur: | Alphabet Inc, Google LLC, Google Ireland Limited |
| But: | Google reCAPTCHA protège les formulaires de saisie en vérifiant si les données sont saisies par un humain ou par un programme automatisé. Utilisé à des fins antispam sur les formulaires de contact. reCAPTCHA définit ce cookie obligatoire lorsqu’il est exécuté dans le but de fournir son analyse des risques. |
| URL de politique de confidentialité: | https://policies.google.com/privacy?hl=fr |
| Hôtes(s): | www.google.com |
| Nom du cookie: | _GRECAPTCHA |
| Bloquer les cookies avant consentement | ON |
| Expiration | 6 mois |
Une fois fait, cliquer sur un bouton Enregistrer tous les paramètres.
4- Google Analytics avec Borlabs Cookies (en direct ou via MonsterInsight)
Google Analytics étant un candidat très répandu, Borlabs Cookie nous facilite la tâche et nous permet une intégration en direct, permettant même d’activer Google Analytics sans avoir besoin d’aucun autre autre plugin. En fonction de vos préférence vous pourrez donc opter pour l’une ou l’autre des solutions que je vous résume ici:
Allons dans Borlabs Cookies → Cookies et cliquez sur le bouton Ajouter Nouveau du tableau Statistiques.
Si vous le souhaitez Borlabs peut intégrer Google Analytics pour vous de A à Z : présenter le cookie, gérer le blocage du script tant qu’il n’y a pas de consentement, et finalement charger Google Analytics si le visiteur donne son consentement. Avec cette solution vous n’avez besoin d’aucun autre plugin ou code HTML.
Cette fois choisissez le préréglage Google Analytics.
Comme vous le voyez tout est déjà prérempli. Il y a simplement quelques corrections à réaliser. Allez simplement dans « Nom du cookie » pour rajouter votre _ga_XXXXXXXXXX à ceux déjà prédéfini. Vérifiez bien aussi que la durée d’expiration soit noté comme « 2 ans ». A l’heure ou j’écris ces ligne, Borlabs donne par défaut 2 mois ce qui est une erreur (de traduction?). Enfin précisez votre domaine, précédé d’un point dans Hôte(s).
| Hôte(s) | .votredomaine.com |
| Nom du cookie | _ga,_gat,_gid,_ga_XXXXXXXXXX |
| Bloquer les cookies avant consentement | ON |
| Expiration du cookie | 2 ans |
Enfin, si vous descendez plus bas, vous pourrez directement saisir votre ID de suivi G-XXXXXXX.
Rappel: pour retrouvez ce code dans GA4, allez dans Google Analytics → Administration → Flux de données → cliquez sur la ligne qui représente votre site et copiez le champ « ID de mesure ».
Le tour est joué, faite le test :
Direction le menu Borlabs Cookies → Paramètres et activé Statut Borlabs Cookie. Vous allez ainsi avoir le cookie wall par défaut.
Tout est ok. Maintenant, ouvrez un Google Chrome en navigation privée, ouvrez l’inspecteur comme expliqué dans le chapitre « Dans l’inspecteur de Chrome ». Rien dans les cookies, jusqu’à ce que vous cliquiez sur accepter ou tout se charge, les cookies _ga avec. Parfait.
Vous préférez utiliser un plugin avancé. Pour ma part j’apprécie beaucoup MonsterInsights. Cette procédure va donc vous montrer comment l’intégrer en conformité avec le consentement.
L’équipe de Borlabs aborde ce point dans sa documentation sur son site, à cette adresse. Comme la version française comporte quelques petites erreurs de traductions, je vous redonne ici une procédure corrigée.
Commencez par activer le plugin MonsterInsight lui même.
Si vous avez suivi mon chapitre précédent, « Intégration complète : Borlabs s’occupe de tout (sans autre plugin) » créez le cookie de la même méthode, en changeant simplement les paramètres suivants :
| Informations du cookie | ||
| Bloquer les cookies avant consentement | OFF | (le blocage va être géré autrement) |
| Paramètres supplémentaires | ||
| Priorités | OFF | (donc décochez cette option) |
| ID de suivi | monsterinsights | (vous pouvez mettre n’importe quoi, c’est monsterinsight qui va prendre la main) |
A cette étape, vous obtenez le résultat suivant :
Mais MonsterInsight active toujours son code javascript, peut importe le consentement de l’utilisateur. C’est ce que nous allons paramétrer avec la notion de Script Blocker de Borlabs Cookies.
Direction le menu Borlabs Cookies → Script Blocker et cliquez sur ajouter nouveau.
| Scanner la page à la recherche de JavaScript | (choisissez n’importe laquelle de vos page) |
| Rechercher des phrases | mi_version,googletagmanager,-gtag |
Lancez le Scan.
Pas de panique si le plugin vous averti « Le site Web n’a pas pu être scanné. Veuillez cliquer ici pour scanner le site manuellement. Utilisez le mode incognito. Une fois le site chargé, revenez sur cette fenêtre. ». Dans ce cas, faites clic-droit sur « cliquer ici » et choisisez [ouvrir dans une navigation privée]. Continuez avec suivant.
Au dessus du javascript qui vient d’être trouvé pour blocage, remplissez les 3 champs comme suivant:
| ID | monsterinsights |
| Nom | MonserInsights |
| Statut | ON |
Confirmez avec le bouton Créer un Script Blocker
Le résultat suivant doit alors apparaitre :
Sur cette même page descendez maintenant à la section Autoriser code → Pour Cookies, vous y trouverez une ligne de javascript qui doit être la même que la mienne ci-dessous. Un petit bouton « copier » est à votre disposition, gardez là de côté.
<script>window.BorlabsCookie.unblockScriptBlockerId("monsterinsights");</script>Retournons maintenant dans Borlabs Cookies → Cookies, pour éditer notre cookie Google Analytics.
Dans « HTML & JavaScript« , la première boite se nomme « Code d’acceptation« .
Effacez tout le code javascript de GA qu’elle contient, et collez-y le code de déblocage de monsterinsight indiqué juste au-dessus. Par la même occasion supprimer tout code qui pourrait se trouver dans les 2 autres boites « Code de refus » et « Code formulaire de base » qui peuvent rester vide.
Tout est ok avec cette alternative. Maintenant, ouvrez un Google Chrome en avigation privée, ouvrez l’inspecteur comme expliqué dans le chapitre « Dans l’inspecteur de Chrome ». Rien dans les cookies, jusqu’à ce que vous cliquiez sur accepter ou tout se charge, les cookies _ga et le script de MonsterInsight.
La gymnastique de cette intégration est un peu particulière, il faut comprend la logique du script blocker, mais cela vous montre aussi la flexibilité du plugin. Même quand Borlands n’a rien prévu de sûr mesure, il est toujours possible de trouver une solution grâce à leur nombreux réglages. Top !
5- Personnalisation graphique de la cookie box
Voici à mon sens de bons réglages pour s’approcher des préconisation de la CNIL.
Pour vous faciliter les choses, je vous ai exporté mes réglages JSON, vous pouvez télécharger ce fichier texte :
Avant de coller le JSON de ce fichier, remplacez tous les « www.monsite.com » par votre véritable nom de domaine.
Copiez-collez le contenu de ce fichier dans Borlabs Cookies → Importation & Exportation en remplissant la seule boite « Général & Paramètres d’apparence ».
Si vous préférez le faire à la main, direction Borlabs Cookies → Cookie Box et reproduisez les réglages suivants (à déplier) :
6- Petites améliorations de la cookie box (modification du template)
Cette petite astuce est facultative, mais si vous avez la main sur votre thème ou child thème wordpress, je vous conseille ces légères retouches.
La cookie box
Je vous propose 3 retouches vraiment minimes :
L’écran de personnalisation
Cette fois-ci, les modifications sont un peu plus importantes. Je trouvai la disposition des boutons proposée pas très ergonomique, et je préférai celle proposée par les suggestions de la CNIL. Deux modifications vont dans ce sens :
Installation de mes modifications
Pour les installer, téléchargez les fichiers (dans l’archive ZIP) avec le bouton ci-dessous.
Puis dans votre serveur web déposez mes fichiers dans le répertoire (à créer) :
/wp-content/themes/VOTRETHEME/plugins/borlabs-cookieEn complément, je vous suggère ce CSS Personnalisé à insérer tout en bas de la page de réglage Borlabs Cookies → Cookie Box :
/* improve titles in cookie page description */
.BorlabsCookie h3._brlbs { text-decoration: underline; font-variant: all-small-caps; }
/* cookie box : increase smallest texts */
#BorlabsCookieBox ._brlbs-legal, #BorlabsCookieBox ._brlbs-refuse { font-size: 1em; }
/* cookie box : text styles */
#BorlabsCookieBox ._brlbs-text em { font-style: italic; font-weight: 700; }
#BorlabsCookieBox ._brlbs-text strong { font-weight: 900; }
/* cookie box : improve categories title */
#BorlabsCookieBox .cookie-preference .bcac-item ._brlbs-h4 { font-weight: bold; }Le tour est joué.
7- Créer une page « Politique de Cookies »
Comme demandés par les bonnes pratiques de la RGPD, nous allons devoir créer une page sur note site pour détailler notre Politique de cookies. Pensez d’ailleurs à la rendre accessible par un lien dans le footer de votre site. Cette page fait partie des exceptions que nous avons paramétrés dans les options de notre CookieBox, sont URL sera exclus. Autrement dit elle sera consultable sans être bloqué par le cookie wall.
Nous allons devoir créer une page sur note site pour détailler notre Politique de Cookies.
| Titre | Politique des cookies |
| Slug | politique-cookies |
Que vous utilisez mon modèle ou non, Borlabs Cookies propose quelques shortcodes WordPress très intéressants à placer sur votre page de politique en matière de cookies. Plus de détail dans la documentation officielle des shortcodes de Borlabs.
| [ borlabs-cookie type= »cookie-list »/] | Implémente automatiquement les paragraphes et sous paragraphes qui décrivent, pour chaque catégorie, les informations de tous vos cookies que vous avez renseigné. |
| [ borlabs-cookie type= »uid »/] | Affiche l’identifiant unique du cookie de consentement de l’internaute calculé par Borlabs cookies. |
| [ borlabs-cookie type= »consent-history »/] | Affiche l’historique de consentement personnel de l’internaute. On y retrouve donc la date et l’heure à laquelle le consentement a été accepté / refusé, et pour chaque modification une ligne supplémentaire. |
| [ borlabs-cookie type= »btn-cookie-preference » title= »Modifier mes préférences en matière de cookies »/] | Permet d’implémenter un bouton qui affiche la cookie box pour modifier ses préférences (équivalent au clic sur le widget) |
Note : (Supprimez les espaces après le » [ » pour que les shortcodes fonctionnent)
8- Créer une page « Politique de confidentialité »
Comme demandé par les bonnes pratiques de la RGPD, une autre page doit être ajoutée à notre site pour détailler plus globalement notre politique de confidentialité. Elle aussi a toute sa place par un lien dans le footer de votre site. Elle aussi fait partie des exceptions pour qu’elle soit lisible sans être gênée par le cookie wall.
Voici la page à créer.
| Titre | Politique de confidentialité |
| Slug | politque-confidentialite |
Le modèle HTML proposé est un exemple très simple qui convient pour un simple site vitrine et qu’il s’agira de faire évoluer en fonction de vos besoins (e-commerce). Dans ce modèle pensez bien à recherche toutes les occurrences de « monsite.com » pour trouver les coordonnées que vous devez mettent à jour.
9- Formulaire Contact Form 7 avec reCAPTCHA et Borlabs
Ce chapitre est clairement un bonus pour en découvrir un peu plus sur les possibilités de blocage de Borlabs. Si vous cherchez un bon moyen de protéger vos formulaires de contact des spams, vous pensez bien sûr a Google reCAPTCHA. Malheureusement son intégration est souvenant rime avec la présence de son badge en bas de toute vos pages. Si l’on peut cacher son badge disgracieux avec un peu de CSS le problème de fond demeure : est-ce bien normal d’alourdir toutes les pages de votre site avec le script reCAPTCHA et de faire confiance à Google pour que toutes vos pages le chargent aveuglément ?
Peut mieux faire ? Alors pourquoi ne pas s’amuser avec les options de « Content Blocker » de Borlabs pour protégér encore un peu mieux votre formulaire de contact, et ne charger reCAPTCHA que à la demande.
Avant de commencer ce tutorial, assurez-vous d’avoir une page Contact, qui utilise un formulaire avec l’extension https://wordpress.org/plugins/contact-form-7/.
Ensuite, dans les réglages « Intégration » de ce plugin, vous devez avoir mis en place la protection reCAPTCHA.
La solution que je vous propose va éviter de charger reCAPTCHA sur la page pour rien.
L’utilisateur se retrouvera d’abord face au formulaire de contact qui sera grisé et inactif.
Un bandeau invitera l’utilisateur à consentir au système anti-spam reCAPTCHA avant de pouvoir utiliser le formulaire:
Une fois que l’utilisateur cliquera sur le bouton Autoriser, le formulaire devient alors actif et Google reCAPTCHA apparaît alors en bas à droite de votre page seulement à ce moment.
Si cette solution vous plait, vous pouvez alors suivre la procédure ci-dessous :
Allez dans Borlabs Cookies → Script Blocker et cliquez sur le bouton Ajouter nouveau. Remplissez les champs avec données suivantes.
| Page | Sélectionnez votre page de contact (qui contient votre formulaire Contact7) |
| Rechercher des phrases | /recaptcha/ |
Pas de panique si le plugin vous averti « Le site Web n’a pas pu être scanné. Veuillez cliquer ici pour scanner le site manuellement. Utilisez le mode incognito. Une fois le site chargé, revenez sur cette fenêtre. ». Faites clic-droit et ouvrir dans une navigation privée sur le lien « cliquer ici ». Continuez avec suivant.
Remplissez maintenant les deux champs suivant
| ID | recaptcha |
| Nom | Google reCAPTCHA |
| Status | ON |
Créer un Script Blocker
Allez dans Borlabs Cookies → Content Blocker et cliquez sur le bouton Ajouter nouveau. Remplissez les champs avec données suivantes.
Cet tuto est basé sur cet article https://borlabs.io/kb/google-recaptcha-and-contact-form-7/, avec quelques améliorations d’interface.
| ID | recaptcha |
| Statut | ON |
| Nom | Google reCAPTCHA |
| URL politique de confidentialité | https://www.google.com/intl/fr/policies/privacy/ |
Cliquez sur Enregistrer tous les paramètres.
Maintenant, remplissez les champs de code avec les informations suivantes :
Aperçu du contenu bloqué :
HTML :
<div class="_brlbs-content-blocker">
<div class="_brlbs-default _brlbs-larger">
<p>Pour utiliser le formulaire ci-dessous, vous devez d'abord consentir à l'utilisation du système anti-spam « Google reCAPTCHA » qui sera chargé sur cette page.</p>
<p><a class="_brlbs-btn" href="#" data-borlabs-cookie-unblock role="button">Autoriser Google reCAPTCHA</a></p>
<p><a href="%%privacy_policy_url%%" target="_blank" rel="nofollow noopener noreferrer">
Politique de de confidentialité de Google reCAPTCHA</a>
</p>
</div>
</div>
<script type="text/javascript">
jQuery( document ).ready(function() {
jQuery('.wpcf7-submit').prop("disabled",true);
jQuery('.wpcf7').css('opacity', '0.6');
jQuery('.wpcf7-form-control').prop("readonly",true);
});
</script>CSS :
.BorlabsCookie ._brlbs-content-blocker ._brlbs-default._brlbs-larger { padding:5em 10em; }Javascript :
Global :
window.BorlabsCookie.allocateScriptBlockerToContentBlocker(contentBlockerData.id, "recaptcha", "scriptBlockerId");
window.BorlabsCookie.unblockScriptBlockerId("recaptcha");
jQuery('.wpcf7-submit').prop("disabled",false);
jQuery('.wpcf7').css('opacity', '1');
jQuery('.wpcf7-form-control').prop("readonly",false);
jQuery('.wpcf7-text')[0].focus();- Cochez (ON) Exécuter d’abord le code global
Initialisation (code fourni l’article de Borlabs ) :
!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=3)}([function(e,t){e.exports=function(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n},e.exports.default=e.exports,e.exports.__esModule=!0},function(e,t,r){var n=r(4),o=r(5),c=r(6),u=r(7);e.exports=function(e){return n(e)||o(e)||c(e)||u()},e.exports.default=e.exports,e.exports.__esModule=!0},function(e,t){e.exports=function(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e},e.exports.default=e.exports,e.exports.__esModule=!0},function(e,t,r){"use strict";r.r(t);var n,o=r(1),c=r.n(o),u=r(2),a=r.n(u);function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}wpcf7_recaptcha=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){a()(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({},null!==(n=wpcf7_recaptcha)&&void 0!==n?n:{});var f=wpcf7_recaptcha.sitekey,p=wpcf7_recaptcha.actions,s=p.homepage,l=p.contactform,d=function(e){var t=e.action,r=e.func,n=e.params;grecaptcha.execute(f,{action:t}).then((function(e){var r=new CustomEvent("wpcf7grecaptchaexecuted",{detail:{action:t,token:e}});document.dispatchEvent(r)})).then((function(){"function"==typeof r&&r.apply(void 0,c()(n))})).catch((function(e){return console.error(e)}))};if(grecaptcha.ready((function(){d({action:s})})),document.addEventListener("change",(function(e){d({action:l})})),"undefined"!=typeof wpcf7&&"function"==typeof wpcf7.submit){var b=wpcf7.submit;wpcf7.submit=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};d({action:l,func:b,params:[e,t]})}}document.addEventListener("wpcf7grecaptchaexecuted",(function(e){document.querySelectorAll('form.wpcf7-form input[name="_wpcf7_recaptcha_response"]').forEach((function(t){t.setAttribute("value",e.detail.token)}))}))},function(e,t,r){var n=r(0);e.exports=function(e){if(Array.isArray(e))return n(e)},e.exports.default=e.exports,e.exports.__esModule=!0},function(e,t){e.exports=function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)},e.exports.default=e.exports,e.exports.__esModule=!0},function(e,t,r){var n=r(0);e.exports=function(e,t){if(e){if("string"==typeof e)return n(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?n(e,t):void 0}},e.exports.default=e.exports,e.exports.__esModule=!0},function(e,t){e.exports=function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")},e.exports.default=e.exports,e.exports.__esModule=!0}]);Enregistrez les modifications.
Editez la page de votre site qui contient le formulaire Contact7 et juste au dessus du formulaire, placez le shortcode suivant pour injecter le content blocker:
[borlabs-cookie id="recaptcha" type="content-blocker"][/borlabs-cookie]