在实现新的谷歌Invisible reCATPTCHA时,默认情况下,当你滚动屏幕时,屏幕右下方会弹出一个小的“受reCAPTCHA保护”徽章。

我想把这个藏起来。


当前回答

我的解决方案是隐藏徽章,然后在用户关注表单输入时显示它——因此仍然遵循谷歌的t&c。

注意:我调整的reCAPTCHA是由WordPress插件生成的,所以你可能需要用<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选择器以针对特定的表单。

其他回答

我看到了下一个关于这个的评论

如果您想将自己的CSS应用到徽章上,那么将徽章内联放置也很有帮助。但是请记住,当您注册API密钥时,您同意显示谷歌的条款和条件-所以请不要隐藏它。虽然可以用CSS让徽章完全消失,但我们不推荐这样做。

将数据标记属性设置为内联

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

并添加以下CSS

.grecaptcha-badge {
    display: none;
}

如果您正在使用Contact Form 7更新和最新版本(5.1.x版本),您将需要安装、设置谷歌reCAPTCHA v3才能使用。

默认情况下,你得到谷歌reCAPTCHA徽标显示在屏幕右下方的每一页上。根据我们的评估,这给用户带来了不好的体验。和你的网站,博客会变慢一点(反映在PageSpeed分数),你的网站将不得不从谷歌加载额外的1 JavaScript库来显示这个徽章。

您可以通过以下步骤从CF7隐藏谷歌reCAPTCHA v3(仅在必要时显示它):

首先,打开主题的functions.php文件(使用文件管理器或FTP客户端)。该文件位于:/wp-content/themes/your-theme/,并添加以下代码片段(我们使用此代码删除每页上的reCAPTCHA框):

    remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts' );

接下来,您将在页面中添加这段代码片段,您希望它显示谷歌reCAPTCHA(联系页面,登录,注册页面…):

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

参考OIW博客-如何从联系表单7中删除谷歌reCAPTCHA徽标(隐藏reCAPTCHA徽标)

我的解决方案是隐藏徽章,然后在用户关注表单输入时显示它——因此仍然遵循谷歌的t&c。

注意:我调整的reCAPTCHA是由WordPress插件生成的,所以你可能需要用<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选择器以针对特定的表单。

我测试了所有的方法,并且:

警告:显示:none禁用垃圾邮件检查!

可见度:隐藏和不透明度:0不禁用垃圾邮件检查。

使用代码:

.grecaptcha-badge { 
    visibility: hidden;
}

当您隐藏徽章图标时,谷歌希望您通过添加以下内容在表单上引用他们的服务:

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