So verstecken Sie das Google Invisible reCAPTCHA-Abzeichen

156

Bei der Implementierung des neuen Google Invisible reCATPTCHA wird standardmäßig unten rechts auf dem Bildschirm ein kleines "durch reCAPTCHA geschützt" -Abzeichen angezeigt, das beim Überfahren angezeigt wird.

Geben Sie hier die Bildbeschreibung ein

Ich würde das gerne verstecken.

James Law
quelle

Antworten:

217

Google erlaubt jetzt, das Abzeichen in den FAQ auszublenden :

Ich möchte das reCAPTCHA v3-Abzeichen verstecken. Was ist erlaubt?

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.

Beispielsweise:

Geben Sie hier die Bildbeschreibung ein

Sie können es also einfach mit dem folgenden CSS ausblenden:

.grecaptcha-badge { 
    visibility: hidden;
}

Geben Sie hier die Bildbeschreibung einVerwenden Sie es nicht, display: none;da es die Spam-Prüfung anscheinend deaktiviert (danke @Zade).

Yann39
quelle
24
Ich würde nicht davon ausgehen, Ihnen zu sagen, was zu tun ist;) Ich warne nur andere Benutzer, dass es möglicherweise illegal ist, es zu entfernen.
Yann39
16
Dies ist völlig inakzeptabel, da dieses Abzeichen in kleinen Bildschirmen wie Mobiltelefonen einen bedeutenden Bereich der Webseite abdeckt.
Don Dilanga
12
Akzeptieren Sie es oder wählen Sie einen anderen Dienst. Google hat das Recht, von Ihnen zu verlangen, dass Sie das Branding für den kostenlosen Service zeigen. Sie können das Abzeichen sogar so neu positionieren, dass es mit dem Formular developer.google.com/recaptcha/docs/invisible#render_param übereinstimmt .
Alexander Otavka
1
Nun, ich verwende dieses Captcha v3 nur auf meiner Kontaktformularseite. Dies ist also die einzige Seite, die dieses Abzeichen anzeigen soll. Es gilt nicht an anderer Stelle auf meiner Website. Möglich?
Andrew Truckle
4
@ Yann39 - bitte aktualisiere deine Antwort. Es ist in Ordnung, es auszublenden und z. B. nur der Kontaktseite hinzuzufügen: developer.google.com/recaptcha/docs/faq
Sol
172

Ich habe alle Ansätze getestet und:

display: noneWARNUNG : Deaktiviert die Spam-Prüfung!

visibility: hiddenund opacity: 0deaktivieren Sie NICHT die Spam-Prüfung.

Zu verwendender Code:

.grecaptcha-badge { 
    visibility: hidden;
}

Wenn Sie das Ausweissymbol ausblenden, möchte Google, dass Sie auf den entsprechenden Dienst in Ihrem Formular verweisen, indem Sie Folgendes hinzufügen:

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

Beispiel Ergebnis

Helenesh
quelle
6
Diese Antwort muss höher sein! Es enthält auf prägnante Weise alle notwendigen Informationen für die Lösung.
Björn Larsson
3
Genau das, wonach ich gesucht habe und das funktioniert großartig. Auch für alle, die nach Beweisen suchen, dass dies erlaubt ist, überprüfen Sie bitte diese Seite (falls Sie sie noch nicht in diesem SO-Thread gesehen haben). Developers.google.com/recaptcha/docs/faq
Jake
Danke, dass du diesen @Jake erwähnt hast. Ich habe dies zu meiner Antwort hinzugefügt.
Helenesh
Hat jemand einen dokumentierten Weg gefunden, das Abzeichen zu verstecken, anstatt einen CSS-Hack? Google bietet eine alternative Möglichkeit, das Branding zu zeigen, aber ich kann keine unterstützte Methode finden, um das Abzeichen zu verbergen.
Collin Price
38

Setzen Sie das data-badgeAttribut aufinline

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

Und fügen Sie das folgende CSS hinzu

.grecaptcha-badge {
    display: none;
}
James Law
quelle
7
Achtung; Dies scheint die Spam-Prüfung zu deaktivieren.
Zade
3
Deaktiviert dies wirklich die Spam-Prüfung? Wenn ja, warum all die positiven Stimmen?
Charlie Schliesser
1
@Zade vielleicht stattdessen verwenden opacity: 0oder visibility: hidden? Hast du auch einen Link zu dem, wo das steht?
CTF0
4
Die Benutzervereinbarung besagt, dass Sie die Benutzer informieren müssen, wie oben bei @ Yann39 angegeben.
Mihail Minkov
1
@Helenesh eine separate Antwort wert?
Anupam
14

Google sagt jetzt: "Sie dürfen das Abzeichen ausblenden, solange Sie das reCAPTCHA-Branding sichtbar in den Nutzerfluss aufnehmen." Verknüpfung

Codesmith
quelle
2
Gilt nur für v3! In Version 2 muss das Abzeichen weiterhin angezeigt werden. :(
ADTC
13

Da das Ausblenden des Ausweises gemäß den Nutzungsbedingungen nicht wirklich legitim ist und vorhandene Platzierungsoptionen meine Benutzeroberfläche und / oder Benutzeroberfläche beschädigten, habe ich die folgende Anpassung vorgenommen, die eine feste Positionierung nachahmt, aber stattdessen inline gerendert wird:

Zusammenklappbares "unsichtbares" Captcha

Sie müssen nur etwas CSS auf Ihren Ausweiscontainer anwenden:

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

Ich denke, das ist so weit, wie Sie es legal vorantreiben können.

krukid
quelle
1
Nett. Ich schob es noch weiter (ohne es tatsächlich vollständig zu verstecken) mit transform: scale(0.6)undopacity: 0.6
squarecandy
Können Sie das blaue Banner rechts als links öffnen? Auch das Farbschema anpassen?
Vaishal Patel
@VaishalPatel in der Theorie, ja, aber es gibt zwei Nachteile: Erstens wird von Manipulationen am nativen Ausweisdesign von Google abgeraten, und zweitens wird Ihre Lösung umso fragiler, je mehr Annahmen Sie über das vorhandene Design in Ihren Änderungen treffen. Denken Sie an Google Es steht Ihnen frei, die Abzeichenstile und das Layout zu ändern, wann immer Sie möchten.
Krukid
1
@krukid Ich ging mit ihrem Standardstil inline.
Vaishal Patel
9

Ich habe beschlossen, das Abzeichen auf allen Seiten außer meiner Kontaktseite (mit Wordpress) auszublenden:

/* 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;
}

Ich bin kein Webentwickler. Bitte korrigieren Sie mich, wenn etwas nicht stimmt.

BEARBEITEN: Aktualisiert, um die Sichtbarkeit anstelle der Anzeige zu verwenden.

Leon
quelle
Dies funktioniert, aber die Seiten-ID- # ist spezifisch für Ihre Website, sodass jeder, der diese verwendet, die ID an die Seite anpassen muss, auf der die Anzeige ausgeführt werden soll. || Ich habe Berichte gesehen, die besagen, dass diese Anzeige ausgeführt wird: keine; wird auch die Überprüfung deaktivieren, aber ich bin mir im Moment nicht sicher.
Michael Tunnell
Vorsichtig! Dies deaktiviert die Spam-Prüfung. Überprüfen Sie meine Antwort für weitere Informationen
Helenesh
Aktualisiert basierend auf den obigen Kommentaren von Michael & Helenesh
Leon
4

Eine kleine Variante von Matthew Dowells Beitrag, die den kurzen Blitz vermeidet, aber immer dann angezeigt wird, wenn das Kontaktformular 7 sichtbar ist:

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

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

Ich habe dann der Datei header.php in meinem untergeordneten Thema Folgendes hinzugefügt:

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

Meine Lösung bestand darin, das Abzeichen auszublenden und es dann anzuzeigen, wenn sich der Benutzer auf eine Formulareingabe konzentriert. Dabei werden die AGB von Google weiterhin eingehalten.

Hinweis: Das von mir optimierte reCAPTCHA wurde von einem WordPress-Plugin generiert. Daher müssen Sie das reCAPTCHA möglicherweise <div class="inv-recaptcha-holder"> ... </div>selbst mit einem umschließen.

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' );
  });
});

Natürlich können Sie den jQuery-Selektor bei Bedarf so ändern, dass er auf bestimmte Formulare abzielt.

Andy P.
quelle
3

Für Benutzer von Contact Form 7 in Wordpress funktioniert diese Methode für mich: Ich verstecke die v3 Recaptcha auf allen Seiten außer denen mit Contact 7 Forms.

Diese Methode sollte jedoch auf jeder Site funktionieren, auf der Sie eine eindeutige Klassenauswahl verwenden, mit der alle Seiten mit Formularelementen für die Texteingabe identifiziert werden können.

Zuerst habe ich eine Zielstilregel in CSS hinzugefügt, die die Kachel reduzieren kann:

CSS

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

Dann habe ich JQuery-Skript in meinen Header eingefügt, um es nach dem Laden des Fensters auszulösen, damit JQuery die Klassenauswahl 'grecaptcha-badge' zur Verfügung steht, und kann die Klasse 'hide' hinzufügen, um den verfügbaren CSS-Stil anzuwenden.

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

Meine Kachel blinkt noch eine halbe Sekunde lang auf jeder Seite, aber es ist die beste Problemumgehung, die ich bisher gefunden habe und die ich hoffentlich einhalten werde. Verbesserungsvorschläge erwünscht.

Matthew Dowell
quelle
2

Dadurch wird die Spam-Prüfung nicht deaktiviert

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

Wenn Sie das Contact Form 7-Update und die neueste Version (Version 5.1.x) verwenden, müssen Sie Google reCAPTCHA v3 installieren und verwenden.

Standardmäßig wird auf jeder Seite unten rechts auf dem Bildschirm das Google reCAPTCHA-Logo angezeigt. Dies ist nach unserer Einschätzung eine schlechte Erfahrung für die Benutzer. Und Ihre Website und Ihr Blog werden etwas langsamer (reflektiert durch den PageSpeed ​​Score). Ihre Website muss zusätzlich 1 JavaScript-Bibliothek von Google laden, um dieses Abzeichen anzuzeigen.

Sie können Google reCAPTCHA v3 vor CF7 ausblenden (nur bei Bedarf anzeigen), indem Sie die folgenden Schritte ausführen:

Zuerst öffnen Sie die functions.phpDatei Ihres Themas (mit dem Dateimanager oder dem FTP-Client). Diese Datei befindet sich in: /wp-content/themes/your-theme/und fügt das folgende Snippet hinzu (wir verwenden diesen Code, um das reCAPTCHA-Feld auf jeder Seite zu entfernen):

    remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts' );

Als Nächstes fügen Sie dieses Snippet auf der Seite hinzu, auf der Google reCAPTCHA angezeigt werden soll (Kontaktseite, Login, Registrierungsseite…):

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

Weitere Informationen finden Sie im OIW-Blog - So entfernen Sie das Google reCAPTCHA-Logo aus dem Kontaktformular 7 in WordPress (ReCAPTCHA-Abzeichen ausblenden)

OIW
quelle
2

Ja, du kannst es schaffen . Sie können entweder CSS oder Javascript verwenden , um das reCaptcha v3-Abzeichen auszublenden.

  1. Die CSS- Methode verwendet display: noneoder visibility: hiddenzum Ausblenden des reCaptcha-Stapels. Es ist einfach und schnell.
.grecaptcha-badge {
    display:none !important;
}
  1. Der Javascript-Weg
var el = document.querySelect('.grecaptcha-badge');
el.style.display = 'none';

Das Ausblenden des Ausweises ist gemäß der Google-Richtlinie gültig und wird hier in der FAQ beantwortet . Es wird empfohlen, die Datenschutzrichtlinien und Nutzungsbedingungen von Google wie unten gezeigt anzuzeigen.

Google-Richtlinien und Nutzungsbedingungen

Kiran Maniya
quelle
1

Ich habe den nächsten Kommentar dazu gesehen

Es ist auch hilfreich, das Abzeichen inline zu platzieren, wenn Sie Ihr eigenes CSS darauf anwenden möchten. Denken Sie jedoch daran, dass Sie bei der Registrierung für einen API-Schlüssel zugestimmt haben, die Allgemeinen Geschäftsbedingungen von Google anzuzeigen. Verstecken Sie ihn also bitte nicht. Und obwohl es möglich ist, das Abzeichen mit CSS vollständig verschwinden zu lassen, würden wir es nicht empfehlen.

Eugen Konkov
quelle
0

Hinweis: Wenn Sie das Abzeichen ausblenden möchten, verwenden Sie bitte
.grecaptcha-badge { visibility: hidden; }

Sie dürfen das Abzeichen ausblenden, solange Sie das reCAPTCHA-Branding sichtbar in den Benutzerfluss aufnehmen. Bitte geben Sie folgenden Text an:

Diese Website ist durch reCAPTCHA und Google geschützt
<a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply.

Weitere Details hier reCaptacha

Mohsin Saeed
quelle
-1

Recaptcha-Kontaktformular 7 und Recaptcha v3-Lösung.

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

Mehr als eine Kontaktformularseite?

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

Sie können weitere "Nots" hinzufügen, wenn Sie mehr Kontaktformularseiten haben.

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

Stellen Sie sicher, dass Ihr Körperteil dies mag:

<body>

Ändern Sie es so, dass es so aussieht:

 <body <?php body_class(); ?>>
Bijaya Kumar Oli
quelle
Bitte die anderen Antworten, keine anzeigen, deaktiviert die Spam-Prüfung.
Helenesh
@Helenesh Was ist Spam-Prüfung und wie hängt sie mit dem Hinzufügen eines CSS-Stils zusammen?
Berkant