Question

在实施新的Google Invisible reCATPTCHA时，默认情况下，当您滚动屏幕时，屏幕右下方会出现一些“受reCAPTCHA保护”徽章。

我想隐藏这个。

Answer 1

当然你可以用CSS来做。

但根据reCAPTCHA服务条款（您必须同意），您必须告知访问者您网站上的reCAPTCHA实施情况：

来自Google Terms of Service

这些条款不授予您使用任何品牌或徽标的权利用于我们的服务。不要删除，隐瞒或改变任何法律在我们的服务中或与我们的服务一起显示的通知。

更新DEC 2018年（感谢@Sol）

Google现在允许隐藏FAQ：

中的徽章

我想隐藏reCAPTCHA v3徽章。什么是允许的？

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.

例如：

Answer 2

我已经测试了所有方法，并且：

Main(string[] args){}禁用垃圾邮件检查！

display: none和visibility: hidden不会禁用垃圾邮件检查。

要使用的代码：

opacity: 0

隐藏徽章图标后，Google希望您通过添加以下内容来reference在您的表单上提供服务：

.grecaptcha-badge { 
    visibility: hidden;
}

Answer 3

将data-badge属性设置为inline

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

并添加以下CSS

.grecaptcha-badge {
    display: none;
}

Answer 4

Since hiding the badge is not really legit as per the TOU, and existing placement options were breaking my UI and/or UX, I've come up with the following customization that mimics fixed positioning, but is instead rendered inline:

You just need to apply some CSS on your badge container:

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

I think that's as far as you can legally push it.

Answer 5

Google现在说：“只要您在用户流中明显包括reCAPTCHA品牌，就可以隐藏徽章。” Link

Answer 6

我决定在除联系页面之外的所有页面上隐藏徽章（使用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;
}

我不是网络开发人员，因此如果出现问题，请纠正我。

编辑：已更新，以使用可见性代替显示。

Answer 7

我的解决方案是隐藏徽章，然后在用户将重点放在表单输入上时显示徽章-从而仍然遵守Google的条款和条件。

注意：我正在调整的reCAPTCHA是由WordPress插件生成的，因此您可能需要用<div class="inv-recaptcha-holder"> ... </div>自己包装reCAPTCHA。

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

很明显，如果需要，您可以更改jQuery选择器以定位特定的表单。

Answer 8

这不会禁用垃圾邮件检查

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

Answer 9

对于Wordpress上联系表格7的用户，此方法对我有效：我将所有页面上的v3 Recaptcha隐藏起来，但那些带有Contact 7 Forms的页面除外。

但是此方法应该在您使用唯一的类选择器的任何站点上起作用，该类选择器可以识别带有文本输入表单元素的所有页面。

首先，我在CSS中添加了一个目标样式规则，该规则可以折叠图块：

CSS

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

然后，我在标题中添加了JQuery脚本，以便在窗口加载后触发，因此JQuery可以使用“ grecaptcha-badge”类选择器，并且可以添加“ hide”类以应用可用的CSS样式。

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

我的图块仍然会在每页上闪烁半秒，但这是我到目前为止发现的最好的解决方法，我希望它能遵守。改进建议表示赞赏。

Answer 10

如果您使用的是Contact Form 7更新和最新版本（5.1.x版），则需要安装，设置Google reCAPTCHA v3才能使用。

默认情况下，您会在屏幕右下角的每个页面上看到Google reCAPTCHA徽标。根据我们的评估，这给用户带来了糟糕的体验。而且您的网站，博客会变慢一点（按PageSpeed得分反映），因为您的网站将必须从Google加载额外的1个JavaScript库才能显示此徽章。

您可以按照以下步骤从CF7中隐藏Google reCAPTCHA v3（仅在必要时显示）：

首先，打开主题的functions.php文件（使用文件管理器或FTP客户端）。该文件位于：/wp-content/themes/your-theme/中，并添加以下代码段（我们正在使用此代码在每个页面上删除reCAPTCHA框）：

    remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts' );

接下来，您将在要显示Google reCAPTCHA的页面中添加此代码段（联系页面，登录名，注册页面……）：

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

请参阅OIW博客-如何从WordPress的联系表7中删除Google reCAPTCHA徽标（隐藏reCAPTCHA徽章）

Answer 11

I saw next comment about this

如果您想将自己的CSS应用于徽章，也可以将徽章置于内联中。但请记住，您同意在注册API密钥时显示Google的条款和条件 - 请不要隐藏它。 虽然可以使用CSS完全消除徽章，但我们不建议使用它。

Answer 12

Matthew Dowell帖子的一个略微变体，避免了短暂的闪动，但只要可见联系表单7就会显示：

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

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

然后我将以下内容添加到子主题的header.php中：

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

Answer 13

是的，你可以做到。您可以使用 css 或 javascript 隐藏reCaptcha v3徽章。

CSS方式使用Column B或display: none隐藏reCaptcha批处理。简单，快捷。

visibility: hidden

JavaScript方式

.grecaptcha-badge {
    display:none !important;
}

根据Google政策，隐藏徽章是有效的，并用常见问题解答here回答。建议显示如下所示的Google隐私政策和使用条款。

Answer 14

对于那些不懂代码的人...

有一个用于此的插件

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

有效，我没有垃圾邮件，也有电子邮件。

Answer 15

注意：如果您选择隐藏徽章，请使用
.grecaptcha-badge { visibility: hidden; }

只要您在用户流中明显包括reCAPTCHA品牌，就可以隐藏徽章。请包括以下文本：

此网站受reCAPTCHA和Google的保护
<a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply.

更多详细信息，请点击reCaptacha

Answer 16

验证码联系表7和Recaptcha v3解决方案。

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

超过一个联系表单页面？

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

如果您有更多联系表单页面，则可以添加更多“ nots”。

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

确保您的身体部位像这样：

<body>

更改它，使其看起来像这样：

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

如何隐藏Google Invisible reCAPTCHA徽章

16 个答案: