it-swarm.com.de

So verbergen Sie das Google Invisible-reCAPTCHA-Badge

Wenn Sie das neue Google Invisible reCATPTCHA implementieren, wird standardmäßig ein kleines "geschützt durch reCAPTCHA" - Badge in der rechten unteren Ecke des Bildschirms angezeigt, das beim Überfahren erscheint.

 enter image description here

Ich möchte das gerne verstecken.

60
James Law

Setzen Sie das data-badge-Attribut auf inline.

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

Fügen Sie das folgende CSS hinzu

.grecaptcha-badge {
    display: none;
}
39
James Law

Natürlich können Sie das auch mit CSS machen.

Gemäß den Nutzungsbedingungen für reCAPTCHA (die Sie zugestimmt haben müssen), müssen Sie die Besucher über die Implementierung von reCAPTCHA auf Ihrer Website informieren:

 enter image description here

Und aus den Google-Nutzungsbedingungen

Diese Bedingungen gewähren Ihnen kein Recht, Markenzeichen oder Logos zu verwenden in unseren Dienstleistungen verwendet. Entfernen, verschleiern oder ändern Sie keine legalen Hinweise, die in oder zusammen mit unseren Diensten angezeigt werden.

UPDATE DEZEMBER 2018 (Danke @Sol)

Google erlaubt jetzt das Ausblenden des Abzeichens vor dem FAQ :

Ich möchte das reCAPTCHA v3-Badge ausblenden. 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.

Zum Beispiel:

 enter image description here

105
Yann39

Ich habe alle Ansätze getestet und: 

display: none deaktiviert die Spam-Prüfung! 

visibility: hidden und opacity: 0 deaktivieren die Spam-Überprüfung NICHT. 

Zu verwendender Code:

.grecaptcha-badge { 
    visibility: hidden;
}

Wenn Sie das Ausweissymbol ausblenden, möchte Google, dass Sie reference ihren Dienst in Ihrem Formular einfügen, 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>

 Example result

38
Helenesh

Da das Ausblenden des Abzeichens laut TOU nicht wirklich legitim ist und die vorhandenen Platzierungsoptionen meine Benutzeroberfläche und/oder UX brachen, habe ich die folgende Anpassung vorgenommen, die eine feste Positionierung nachahmt, stattdessen inline dargestellt wird:

 Collapsible "invisible" captcha

Sie müssen nur etwas CSS für Ihren Badge-Container 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 tun können.

11
krukid

Ich habe mich entschieden, den Ausweis 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, falls etwas nicht stimmt.

BEARBEITEN: Aktualisiert, um Sichtbarkeit anstelle von Anzeige zu verwenden.

8
Leon

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

8
codesmith

Meine Lösung bestand darin, den Ausweis auszublenden und ihn dann anzuzeigen, wenn der Benutzer sich auf eine Formulareingabe konzentriert - und dabei immer noch die Google-Geschäftsbedingungen einhält.

Hinweis: Das reCAPTCHA, das ich optimiert hatte, wurde von einem WordPress-Plugin generiert. Daher müssen Sie das reCAPTCHA möglicherweise mit einem <div class="inv-recaptcha-holder"> ... </div> selbst 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 so ändern, dass er bei Bedarf auf bestimmte Formulare ausgerichtet ist.

3
Andy P

Für Benutzer von Contact Form 7 unter Wordpress funktioniert diese Methode für mich: Ich verberge das v3 Recaptcha auf allen Seiten außer denen mit Contact 7-Formularen. 

Diese Methode sollte jedoch auf jeder Site funktionieren, auf der Sie eine eindeutige Klassenselektion verwenden, mit der alle Seiten mit Texteingabeformularelementen 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 fügte ich dem Header ein JQuery-Skript hinzu, das nach dem Laden des Fensters ausgelöst wird, sodass der Selector 'grecaptcha-badge' für JQuery verfügbar ist und die Klasse 'hide' hinzugefügt werden kann, um den verfügbaren CSS-Stil anzuwenden. 

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

Meine Kachel wird immer noch eine halbe Sekunde lang auf jeder Seite blinken, aber es ist die beste Lösung, die ich bisher gefunden habe und die ich hoffentlich erfüllen werde. Verbesserungsvorschläge werden geschätzt. 

2
Matthew Dowell

dies deaktiviert die Spamprüfung nicht

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

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

standardmäßig wird auf jeder Seite rechts unten auf dem Bildschirm das Google reCAPTCHA-Logo angezeigt. Dies ist unserer Einschätzung nach ein schlechtes Erlebnis für die Nutzer. Und Ihre Website, Ihr Blog wird etwas langsamer (durch den PageSpeed ​​Score reflektiert), indem Ihre Website zusätzliche 1 JavaScript-Bibliothek von Google laden muss, um dieses Abzeichen anzuzeigen.

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

Zunächst öffnen Sie die functions.php-Datei Ihres Designs (mithilfe des Dateimanagers oder des FTP-Clients). Diese Datei befindet sich in: /wp-content/themes/your-theme/ und fügt das folgende Snippet hinzu (wir verwenden diesen Code, um die reCAPTCHA-Box auf jeder Seite zu entfernen):

    remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts' );

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

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

Weitere Informationen finden Sie im OIW-Blog - Entfernen des reCAPTCHA-Logos von Google aus dem Kontaktformular 7 in WordPress (Ausblenden des reCAPTCHA-Badges)

2
OIW

Ich sah den nächsten Kommentar dazu

Es ist auch hilfreich, das Badge inline zu platzieren, wenn Sie Ihr eigenes CSS darauf anwenden möchten. Denken Sie jedoch daran, dass Sie sich damit einverstanden erklärt haben, die Allgemeinen Geschäftsbedingungen von Google anzuzeigen, als Sie sich für einen API-Schlüssel registriert haben. Und obwohl es möglich ist, das Abzeichen vollständig mit CSS verschwinden zu lassen, würden wir es nicht empfehlen.

1
Eugen Konkov

Eine geringfügige Variante von Matthew Dowells Beitrag, die den kurzen Blitz vermeidet, aber immer dann angezeigt wird, wenn das Formular für das Kontaktformular 7 sichtbar ist:

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

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

Dann fügte ich der header.php in meinem Kinderthema folgendes hinzu:

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

Für diejenigen, die Code nicht verstehen ...

Es gibt ein Plugin dafür:

https://wordpress.org/plugins/hide-google-captcha-badge

Es funktioniert, ich bekomme keinen Spam und bekomme E-Mails.

0
Amouratoglou

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 Notizen hinzufügen, wenn Sie mehr Kontaktformularseiten haben.

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

Vergewissere dich, dass dein Körper so gefällt:

<body>

Ändere es so, dass es so aussieht:

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