Comment masquer le badge Google Invisible reCAPTCHA

Lors de la mise en œuvre du nouveau reCATPTCHA invisible de Google, vous obtenez par défaut un petit badge «protégé par reCAPTCHA» en bas à droite de l'écran qui apparaît lorsque vous le survolez.

J'aimerais cacher ça.

Google permet désormais de masquer le badge, dans la FAQ :

Je souhaite masquer le badge reCAPTCHA v3. Qu'est-ce qui est autorisé?

You are allowed to hide the badge as long as you include the reCAPTCHA
branding visibly in the user flow. Please include the following text:

This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

Par exemple:

Vous pouvez donc simplement le masquer en utilisant le CSS suivant:

.grecaptcha-badge { 
    visibility: hidden;
}

Ne pas utiliser display: none;comme il semble pour désactiver la vérification du spam (merci @Zade)

J'ai testé toutes les approches et:

AVERTISSEMENT: display: none DESACTIVE la vérification du spam!

visibility: hiddenet opacity: 0ne désactivez PAS la vérification du spam.

Code à utiliser:

.grecaptcha-badge { 
    visibility: hidden;
}

Lorsque vous masquez l'icône du badge, Google souhaite que vous référençiez son service sur votre formulaire en ajoutant ceci:

<small>This site is protected by reCAPTCHA and the Google 
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.
</small>

Définissez l' data-badgeattribut surinline

<button type="submit" data-sitekey="your_site_key" data-callback="onSubmit" data-badge="inline" />

Et ajoutez le CSS suivant

.grecaptcha-badge {
    display: none;
}

Google dit désormais: "Vous êtes autorisé à masquer le badge tant que vous incluez visiblement la marque reCAPTCHA dans le flux utilisateur." Lien

Étant donné que masquer le badge n'est pas vraiment légitime selon la TOU, et que les options de placement existantes cassaient mon interface utilisateur et / ou mon UX, j'ai proposé la personnalisation suivante qui imite le positionnement fixe, mais est à la place rendue en ligne:

Il vous suffit d'appliquer du CSS sur votre conteneur de badges:

.badge-container {
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
  width: 70px;
  height: 60px;
  margin: 0 auto;
  box-shadow: 0 0 4px #ddd;
  transition: linear 100ms width;
}
.badge-container:hover {
    width: 256px;
}

Je pense que c'est tout ce que vous pouvez légalement pousser.

J'ai décidé de masquer le badge sur toutes les pages sauf ma page de contact (sous Wordpress):

/* Hides the reCAPTCHA on every page */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* Shows the reCAPTCHA on the Contact page */
/* Obviously change the page number to your own */
.page-id-17 .grecaptcha-badge {
    visibility: visible !important;
}

Je ne suis pas un développeur Web, veuillez donc me corriger si quelque chose ne va pas.

EDIT: mis à jour pour utiliser la visibilité au lieu de l'affichage.

Une légère variante du post de Matthew Dowell qui évite le flash court, mais s'affiche chaque fois que le formulaire de contact 7 est visible:

div.grecaptcha-badge{
    width:0 !important;
}

div.grecaptcha-badge.show{
    width:256px !important; 
}

J'ai ensuite ajouté ce qui suit au header.php dans mon thème enfant:

<script>
jQuery( window ).load(function () { 
    if( jQuery( '.wpcf7' ).length ){ 
        jQuery( '.grecaptcha-badge' ).addClass( 'show' );
    }
});
</script>

Ma solution consistait à masquer le badge, puis à l'afficher lorsque l'utilisateur se concentre sur une entrée de formulaire - adhérant ainsi toujours aux CGU de Google.

Remarque: le reCAPTCHA que je peaufinais avait été généré par un plugin WordPress, vous devrez donc peut-être envelopper le reCAPTCHA avec un <div class="inv-recaptcha-holder"> ... </div>vous - même.

CSS

.inv-recaptcha-holder {
  visibility: hidden;
  opacity: 0;
  transition: linear opacity 1s;
}

.inv-recaptcha-holder.show {
  visibility: visible;
  opacity: 1;
  transition: linear opacity 1s;
}

jQuery

$(document).ready(function () {
  $('form input, form textarea').on( 'focus', function() {
    $('.inv-recaptcha-holder').addClass( 'show' );
  });
});

Évidemment, vous pouvez modifier le sélecteur jQuery pour cibler des formulaires spécifiques si nécessaire.

Pour les utilisateurs de Contact Form 7 sur Wordpress, cette méthode fonctionne pour moi: je cache la v3 Recaptcha sur toutes les pages sauf celles avec Contact 7 Forms.

Mais cette méthode devrait fonctionner sur n'importe quel site où vous utilisez un sélecteur de classe unique qui peut identifier toutes les pages avec des éléments de formulaire d'entrée de texte.

Tout d'abord, j'ai ajouté une règle de style cible dans CSS qui peut réduire la vignette:

CSS

 div.grecaptcha-badge.hide{
    width:0 !important;
}

Ensuite, j'ai ajouté un script JQuery dans mon en-tête à déclencher après le chargement de la fenêtre afin que le sélecteur de classe 'grecaptcha-badge' soit disponible pour JQuery, et puisse ajouter la classe 'hide' pour appliquer le style CSS disponible.

$(window).load(function () { 
    if(!($('.wpcf7').length)){ 
      $('.grecaptcha-badge').addClass( 'hide' );
       }
});

Ma vignette clignotera toujours sur chaque page pendant une demi-seconde, mais c'est la meilleure solution de contournement que j'ai trouvée jusqu'à présent et j'espère qu'elle sera conforme. Suggestions d'amélioration appréciées.

cela ne désactive pas la vérification du spam

div.g-recaptcha > div.grecaptcha-badge {
    width:0 !important;
}

Si vous utilisez la mise à jour Contact Form 7 et la dernière version (version 5.1.x), vous devrez installer, configurer Google reCAPTCHA v3 pour l'utiliser.

par défaut, vous obtenez le logo Google reCAPTCHA affiché sur chaque page en bas à droite de l'écran. Selon notre évaluation, cela crée une mauvaise expérience pour les utilisateurs. Et votre site Web, votre blog ralentira un peu (en fonction du score PageSpeed), votre site Web devra charger une bibliothèque JavaScript supplémentaire de Google pour afficher ce badge.

Vous pouvez masquer Google reCAPTCHA v3 de CF7 (ne l'afficher que si nécessaire) en suivant ces étapes:

Tout d'abord, vous ouvrez le functions.phpfichier de votre thème (à l'aide du gestionnaire de fichiers ou du client FTP). Ce fichier se trouve dans: /wp-content/themes/your-theme/et ajoutez l'extrait de code suivant (nous utilisons ce code pour supprimer la boîte reCAPTCHA sur chaque page):

    remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts' );

Ensuite, vous ajouterez cet extrait dans la page que vous souhaitez qu'il affiche Google reCAPTCHA (page de contact, connexion, page d'inscription…):

if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
    add_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts', 10, 0 );
}

Reportez-vous au blog OIW - Comment supprimer le logo Google reCAPTCHA du formulaire de contact 7 dans WordPress (Masquer le badge reCAPTCHA)

Oui, vous pouvez le faire . vous pouvez utiliser css ou javascript pour masquer le badge reCaptcha v3.

1. Le CSS Way utilise display: noneou visibility: hiddenpour masquer le lot reCaptcha. C'est simple et rapide.

.grecaptcha-badge {
    display:none !important;
}

2. La manière Javascript

var el = document.querySelector('.grecaptcha-badge');
el.style.display = 'none';

Le masquage du badge est valide, conformément à la politique de Google et répond à la FAQ ici . Il est recommandé d'afficher la politique de confidentialité et les conditions d'utilisation de Google comme indiqué ci-dessous.

J'ai vu le prochain commentaire à ce sujet

Il est également utile de placer le badge en ligne si vous souhaitez lui appliquer votre propre CSS. Mais n'oubliez pas que vous avez accepté d'afficher les conditions d'utilisation de Google lorsque vous vous êtes inscrit pour une clé API - alors ne la cachez pas, s'il vous plaît. Et s'il est possible de faire disparaître complètement le badge avec CSS, nous ne le recommandons pas.

Remarque: si vous choisissez de masquer le badge, veuillez utiliser
.grecaptcha-badge { visibility: hidden; }

Vous êtes autorisé à masquer le badge tant que vous incluez visiblement la marque reCAPTCHA dans le flux utilisateur. Veuillez inclure le texte suivant:

Ce site est protégé par reCAPTCHA et Google
<a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply.

plus de détails ici reCaptacha

Formulaire de contact Recaptcha 7 et solution Recaptcha v3.

body:not(.page-id-20) .grecaptcha-badge {
    display: none;
}

Plus d'une page de formulaire de contact?

body:not(.page-id-12):not(.page-id-43) .grecaptcha-badge {
    display: none;
}

Vous pouvez ajouter plus de «non» si vous avez plus de pages de formulaire de contact.

body:not(.page-id-45):not(.page-id-78):not(.page-id-98) .grecaptcha-badge {
    display: none;
}

Assurez-vous que votre section corporelle aimera ceci:

<body>

Modifiez-le pour qu'il ressemble à ceci:

 <body <?php body_class(); ?>>