So verstecken Sie das Google Invisible reCAPTCHA-Abzeichen

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.

Ich würde das gerne verstecken.

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:

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

.grecaptcha-badge { 
    visibility: hidden;
}

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

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>

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

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

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:

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.

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.

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>

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.

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.

Dadurch wird die Spam-Prüfung nicht deaktiviert

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

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)

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

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

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.

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

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(); ?>>