如何隐藏 Google Invisible reCAPTCHA 徽章

Question

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

我想隐藏这个。

Answer 1

将data-badge 属性设置为inline

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

并添加以下 CSS

.grecaptcha-badge {
    display: none;
}

Answer 2

Google 现在允许从 FAQ 隐藏徽章：

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

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

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）

Answer 3

由于根据 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;
}

我认为你可以合法地推动它。

Answer 4

I saw next comment about this

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

Answer 5

这不会禁用垃圾邮件检查

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

Answer 6

我的解决方案是隐藏徽章，然后在用户关注表单输入时显示它 - 因此仍然遵守 Google 的 T&C。

注意：我正在调整的 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 7

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

对于 Google reCaptcha v3，FAQ 表示：

只要包含 reCAPTCHA，您就可以隐藏徽章 品牌在用户流中可见。请包含以下文字：

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.

例如：

注意：如果您选择隐藏徽章，请使用

.grecaptcha-badge { visibility: hidden; }

尚不清楚它是否适用于 reCaptcha v2。我建议升级到 v3，因为它为您的访问者提供了更好的体验。

Answer 9

对于 Wordpress 上 Contact Form 7 的用户，此方法对我有用： 我在所有页面上都隐藏了 v3 Recaptcha，除了带有 Contact 7 Forms 的页面。

但是这种方法应该适用于您使用唯一类选择器的任何站点，该选择器可以识别具有文本输入表单元素的所有页面。

首先，我在 CSS 中添加了一个可以折叠磁贴的目标样式规则：

CSS

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

然后我在标题中添加了 JQuery 脚本以在窗口加载后触发，因此“grecaptcha-badge”类选择器可用于 JQuery，并且可以添加“隐藏”类以应用可用的 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/ 并添加以下 sn-p（我们正在使用此代码删除每个页面上的 reCAPTCHA 框）：

    remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts' );

接下来，您将在您希望它显示 Google reCAPTCHA 的页面中添加这个 sn-p（联系页面、登录、注册页面……）：

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

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 12

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

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

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

使用代码：

.grecaptcha-badge { 
    visibility: hidden;
}

当您隐藏徽章图标时，Google 希望您通过添加以下内容在您的表单上 reference 他们的服务：

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

Answer 13

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

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

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

确保你的身体部分是这样的：

<body>

将其更改为如下所示：

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

Answer 14

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

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

1. CSS 方式 使用display: none 或visibility: hidden 隐藏reCaptcha 批次。简单快捷。

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

1. Javascript 方式

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

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