在实现新的谷歌Invisible reCATPTCHA时,默认情况下,当你滚动屏幕时,屏幕右下方会弹出一个小的“受reCAPTCHA保护”徽章。
我想把这个藏起来。
在实现新的谷歌Invisible reCATPTCHA时,默认情况下,当你滚动屏幕时,屏幕右下方会弹出一个小的“受reCAPTCHA保护”徽章。
我想把这个藏起来。
将数据标记属性设置为内联
<button type="submit" data-sitekey="your_site_key" data-callback="onSubmit" data-badge="inline" />
并添加以下CSS
.grecaptcha-badge {
display: none;
}
谷歌现在允许隐藏徽章,从常见问题解答:
我想把reCAPTCHA徽章藏起来。什么是允许的? 只要在用户流中可见地包含reCAPTCHA品牌,您就可以隐藏徽章。请包括以下文本: 此站点受reCAPTCHA和谷歌. com保护 <a href="https://policies.google.com/privacy">隐私策略</a> and <a href="https://policies.google.com/terms">服务条款</a>适用。 例如:
所以你可以简单地隐藏它使用下面的CSS:
.grecaptcha-badge {
visibility: hidden;
}
不要使用display: none;因为它似乎禁用了垃圾邮件检查(谢谢@Zade)
由于隐藏徽章并不是真正合法的根据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;
}
我想这是你合法能做到的极限了。
我看到了下一个关于这个的评论
如果您想将自己的CSS应用到徽章上,那么将徽章内联放置也很有帮助。但是请记住,当您注册API密钥时,您同意显示谷歌的条款和条件-所以请不要隐藏它。虽然可以用CSS让徽章完全消失,但我们不推荐这样做。
我的解决方案是隐藏徽章,然后在用户关注表单输入时显示它——因此仍然遵循谷歌的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选择器以针对特定的表单。
我决定隐藏徽章在所有页面上,除了我的联系页面(使用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;
}
我不是一个网页开发人员,所以请纠正我,如果有什么错误。
编辑:更新到使用可见性而不是显示。
对于谷歌reCaptcha v3,常见问题解答如下:
只要包含reCAPTCHA,您就可以隐藏徽章 在用户流程中可见的品牌。请包括以下文本: 此站点受reCAPTCHA和谷歌. com保护 <a href="https://policies.google.com/privacy">隐私策略</a> and <a href="https://policies.google.com/terms">服务条款</a>适用。 例如: 注意:如果您选择隐藏徽章,请使用 .grecaptcha-badge{可见性:隐藏;}
目前尚不清楚这是否适用于reCaptcha v2。我建议升级到v3,因为它对您的访问者来说是一个更好的体验。
对于在Wordpress上使用Contact Form 7的用户来说,这个方法对我来说是有效的: 我隐藏v3 Recaptcha在所有页面上,除了那些与联系7表格。
但是这种方法应该适用于任何使用唯一类选择器的站点,该类选择器可以识别带有文本输入表单元素的所有页面。
首先,我在CSS中添加了一个目标样式规则,可以折叠瓷砖:
CSS
div.grecaptcha-badge.hide{
width:0 !important;
}
然后我在我的头部添加了JQuery脚本,在窗口加载后触发,这样'grecaptcha-badge'类选择器就可以使用JQuery,并且可以添加'hide'类来应用可用的CSS样式。
$(window).load(function () {
if(!($('.wpcf7').length)){
$('.grecaptcha-badge').addClass( 'hide' );
}
});
我的瓷砖仍然会在每一页上闪烁半秒钟,但这是我迄今为止发现的最好的解决办法,我希望能遵守。欢迎提出改进建议。
如果您正在使用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徽标)
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>
我测试了所有的方法,并且:
警告:显示: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>
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(); ?>>
注意:如果您选择隐藏徽章,请使用 .grecaptcha-badge{可见性:隐藏;}
只要在用户流中可见地包含reCAPTCHA品牌,您就可以隐藏徽章。请包括以下文本:
此站点受reCAPTCHA和谷歌. com保护 <a href="https://policies.google.com/privacy">隐私策略</a> and <a href="https://policies.google.com/terms">服务条款</a>适用。
更多细节请点击这里
是的,你能做到。您可以使用css或javascript隐藏reCaptcha v3徽章。
CSS方式 使用display: none或visibility: hidden隐藏reCaptcha批。这既简单又快捷。
.grecaptcha-badge {
display:none !important;
}
Javascript的方式
var el = document.querySelector('.grecaptcha-badge');
el.style.display = 'none';
隐藏徽章是有效的,根据谷歌政策,并在faq回答这里。建议显示谷歌的隐私政策和使用条款,如下所示。