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.
Ich möchte das gerne verstecken.
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;
}
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:
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:
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>
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:
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.
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.
Google sagt nun: "Sie dürfen das Abzeichen ausblenden, solange Sie das reCAPTCHA-Branding sichtbar in den Benutzerfluss aufnehmen." Verknüpfung
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.
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.
dies deaktiviert die Spamprüfung nicht
div.g-recaptcha > div.grecaptcha-badge {
width:0 !important;
}
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)
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.
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>
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.
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(); ?>>