Comment masquer le badge Google Invisible reCAPTCHA

158

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.

entrez la description de l'image ici

J'aimerais cacher ça.

James Law
la source

Réponses:

219

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:

entrez la description de l'image ici

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

.grecaptcha-badge { 
    visibility: hidden;
}

entrez la description de l'image iciNe pas utiliser display: none;comme il semble pour désactiver la vérification du spam (merci @Zade)

Yann39
la source
24
Je ne présumerais pas de vous dire quoi faire;) Je préviens simplement les autres utilisateurs qu'il peut être illégal de le supprimer.
Yann39
16
c'est tout à fait inacceptable, car sur les petits écrans comme les mobiles, ce badge couvre une zone importante de la page Web.
Don Dilanga
12
Acceptez-le ou choisissez un autre service. Google a le droit de vous demander de montrer la marque de son service gratuit . Vous pouvez même repositionner le badge pour qu'il soit en ligne avec le formulaire developer.google.com/recaptcha/docs/invisible#render_param .
Alexander Otavka
1
Eh bien, je n'utilise ce captcha v3 que sur ma page de formulaire de contacts. C'est donc la seule page que je souhaite afficher sur ce badge. Cela ne s'applique pas ailleurs sur mon site. Possible?
Andrew Truckle
4
@ Yann39 - veuillez mettre à jour votre réponse. Vous pouvez le masquer et par exemple l'ajouter uniquement à la page de contact: développeurs.google.com
recaptcha
172

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>

Exemple de résultat

Helenesh
la source
6
Cette réponse doit être plus élevée! Il contient toutes les informations nécessaires à la solution de manière succincte.
Björn Larsson
3
Exactement ce que je cherchais et cela fonctionne très bien. Aussi pour ceux qui cherchent la preuve qu'il est permis s'il vous plaît consulter cette page (si vous ne l' avez pas déjà tout vu sur ce fil SO) developers.google.com/recaptcha/docs/faq
Jake
Merci d'avoir mentionné ce @Jake. J'ai ajouté ceci à ma réponse.
Helenesh
Quelqu'un a-t-il trouvé un moyen documenté de cacher le badge plutôt qu'un hack CSS? Google propose une autre façon de montrer leur image de marque, mais je ne trouve pas de méthode prise en charge pour masquer leur badge.
Prix ​​Collin
38

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;
}
James Law
la source
7
Faites attention; cela semble désactiver la vérification du spam.
Zade
3
Cela désactive-t-il vraiment la vérification du spam? Si tel est le cas, pourquoi tous les votes positifs?
Charlie Schliesser
1
@Zade peut-être utiliser à la place opacity: 0ou visibility: hidden? aussi avez-vous un lien vers où il indique cela?
ctf0
4
Le contrat d'utilisation stipule que vous devez informer les utilisateurs comme @ Yann39 le dit ci-dessus.
Mihail Minkov
1
@Helenesh vaut une réponse séparée?
Anupam
14

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

codemith
la source
2
Applicable uniquement à la v3! La v2 nécessite toujours de montrer le badge. :(
ADTC
13

É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:

Captcha "invisible" pliable

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.

Krukid
la source
1
Agréable. Je l'ai poussé encore plus loin (sans le cacher complètement) en utilisant transform: scale(0.6)andopacity: 0.6
squarecandy
Pouvez-vous ouvrir la bannière bleue à droite plutôt qu'à gauche? Adaptez-vous également la palette de couleurs de celui-ci?
Vaishal Patel
@VaishalPatel en théorie, oui, mais il y a deux inconvénients: premièrement, la falsification de la conception native des badges est découragée par Google et deuxièmement, plus vous faites d'hypothèses sur la conception existante dans vos modifications, plus votre solution devient fragile - gardez à l'esprit Google est libre de changer les styles et la mise en page des badges quand ils en ont envie.
krukid
1
@krukid Je suis allé avec leur style par défaut en ligne.
Vaishal Patel
9

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.

Léon
la source
cela fonctionnera, mais la page-id- # est spécifique à votre site Web, donc quiconque l'utilisera devra ajuster l'id pour l'adapter à la page sur laquelle il souhaite effectuer l'affichage. || J'ai vu des rapports disant que faire cet affichage: aucun; désactivera également la vérification, mais je n'en suis pas sûr pour le moment.
Michael Tunnell
Prudent! Cela désactive la vérification du spam. Vérifiez ma réponse pour plus d'informations
Helenesh
Mis à jour sur la base des commentaires ci-dessus de Michael & Helenesh
Leon
4

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>
Nigel Dyer
la source
3

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.

Andy P
la source
3

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.

Matthew Dowell
la source
2

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

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

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)

OIW
la source
2

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;
}
  1. 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.

politique et conditions d'utilisation de google

Kiran Maniya
la source
1
'pas querySelect' mais 'querySelector'.
Keisuke Nagakawa le
1
@ 永川 圭介 merci pour revenir à la faute de frappe.
Kiran Maniya le
1

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.

Eugen Konkov
la source
0

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

Mohsin Saeed
la source
-1

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(); ?>>
Bijaya Kumar Oli
la source
S'il vous plaît les autres réponses, afficher aucune désactive la vérification des spams.
Helenesh
@Helenesh Qu'est-ce que la vérification des spams et comment cela est-il lié à l'ajout d'un style CSS?
Berkant Ipek