在实现新的谷歌Invisible reCATPTCHA时,默认情况下,当你滚动屏幕时,屏幕右下方会弹出一个小的“受reCAPTCHA保护”徽章。
我想把这个藏起来。
在实现新的谷歌Invisible reCATPTCHA时,默认情况下,当你滚动屏幕时,屏幕右下方会弹出一个小的“受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>
其他回答
我看到了下一个关于这个的评论
如果您想将自己的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选择器以针对特定的表单。
这不会禁用垃圾邮件检查
div.g-recaptcha > div.grecaptcha-badge {
width:0 !important;
}
将数据标记属性设置为内联
<button type="submit" data-sitekey="your_site_key" data-callback="onSubmit" data-badge="inline" />
并添加以下CSS
.grecaptcha-badge {
display: none;
}
我决定隐藏徽章在所有页面上,除了我的联系页面(使用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;
}
我不是一个网页开发人员,所以请纠正我,如果有什么错误。
编辑:更新到使用可见性而不是显示。