如何隐藏Google Invisible reCAPTCHA徽章

实施新的Google Invisible reCATPTCHA时，默认情况下，您会在屏幕的右下角看到一个“受reCAPTCHA保护”的徽章，该徽章会在您滑过它时弹出。

我想隐藏这个。

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.

例如：

因此，您可以使用以下CSS简单地将其隐藏：

.grecaptcha-badge { 
    visibility: hidden;
}

不要使用，display: none;因为它似乎禁用了垃圾邮件检查（感谢@Zade）

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

警告： display: none禁用垃圾邮件检查！

visibility: hidden并且opacity: 0不要禁用垃圾邮件检查。

使用代码：

.grecaptcha-badge { 
    visibility: hidden;
}

隐藏徽章图标时，Google希望您通过添加以下内容来引用表单上的服务：

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

将data-badge属性设置为inline

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

并添加以下CSS

.grecaptcha-badge {
    display: none;
}

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

由于按照TOU的要求隐藏徽章并不真正合法，并且现有的放置选项破坏了我的UI和/或UX，因此，我提出了以下模仿固定位置的自定义设置，而是内联呈现：

您只需要在徽章容器上应用一些CSS：

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

我认为这是您可以合法推动的范围。

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

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

编辑：更新为使用可见性而不是显示。

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>

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

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

的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选择器以定位特定的表单。

对于Wordpress上的Contact Form 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' );
       }
});

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

这不会禁用垃圾邮件检查

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

如果您使用的是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徽章）

是的，您可以做到。您可以使用CSS或JavaScript隐藏reCaptcha v3徽章。

1. CSS方式使用display: none或visibility: hidden隐藏reCaptcha批处理。简单，快速。

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

2. Javascript方式

var el = document.querySelect('.grecaptcha-badge');
el.style.display = 'none';

根据Google政策，隐藏徽章是有效的，并在此处进行了常见问题解答。建议显示Google的隐私权政策和使用条款，如下所示。

我看到了关于此的下一条评论

如果您想要将自己的CSS应用于徽章，则将徽章内联放置也很有帮助。但是请记住，您同意在注册API密钥时显示Google的条款和条件-因此请不要将其隐藏。虽然可以通过CSS使徽章完全消失，但我们不建议这样做。

注意：如果您选择隐藏徽章，请使用
.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.

在这里查看更多详细信息

Recaptcha联系表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(); ?>>