隐形谷歌验证码答案

【问题标题】：Invisible Google reCaptcha隐形谷歌验证码
【发布时间】：2017-04-10 10:21:39
【问题描述】：

我知道以前有人问过这类问题，但我无法得到答案。我有一个联系表，我想实施新的 Invisible Google Recaptcha。但是，我使用了<input> 而不是<button>，我不知道该怎么做。这是我的联系表格代码：

input, textarea {
    padding: 5px;
    margin: 10px;
    font-family: Cambria, Cochin, serif;
    font-size: medium;
    font-weight: bold;
    outline: none;
}

input[type=text], textarea {
    width: 350px;
    background-color: #b6b6b4;
    border: 1px solid #989898;
    border-radius: 10px;
}
input[type=submit] {
    width: 100px;
    background-color: #989898;
    border: 1px solid #707070;
    font-size: large;
    color: #000;
    border-radius: 5px;
}
input[type=submit]:hover {
    background-color: #848484;
    cursor: pointer;
}
input[type=submit]:active {
    background-color: #989898;
}

<script src="https://www.google.com/recaptcha/api.js"></script>
<!--CONTACT FORM-->



<form name="contactform" method="post" action="send_form_email.php">
 
        <div>
            <input name="name" type="text" placeholder="Name..." required> <br> </div>
            <div>
            <input name="email" type="text" placeholder="Email..." required>
            <br>
            </div>

  <input type="checkbox" name="maillist" value="1" checked> Subscribe to mailing list<br>



            <div>
            <input name="game" type="text" placeholder="Game suggestions...">
            <br>
            </div>


            <div>
            <textarea cols="30" name="comment" rows="9" placeholder="Comments..."></textarea>
            <br> </div>
            

        <div>
        <input name="submit" type="submit" value="Submit"> </div>
    </form>

然后我有 google ReCaptcha 按钮：

<button
class="g-recaptcha"
data-sitekey="############################"
data-callback="YourOnSubmitFn">
Submit
</button>

任何帮助将不胜感激。另外，我想知道您是否可以删除右下角的 ReCaptcha 徽标。

【问题讨论】：

标签： html button input recaptcha invisible-recaptcha

【解决方案1】：

试试这个，它会在页面上隐藏 Google reCaptcha Invisible Badge。

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

请记住，徽章应该显示为 Google 假装存在“隐私”和“条款”链接。

【讨论】：

听起来很不错，但我不是很擅长，所以我只是将这段代码放在我的css中吗？我是使用普通的recaptcha 并添加这个还是不可见的？非常感谢您的帮助

【解决方案2】：

从reCaptcha 文档检查这个 g-recaptcha 标记属性和 grecaptcha.render 参数部分：

g-recaptcha 标签属性：data-badge
grecaptcha.render 参数：徽章
值：右下角左下方内联
默认：右下角
说明：可选。重新定位 reCAPTCHA 徽章。 'inline' 允许您控制 CSS。

这是一个基本的example

<html>

<head>
    <title>reCaptcha example</title>
    <script src='https://www.google.com/recaptcha/api.js'></script>
    <style>
        .grecaptcha-badge {
            display: none;
        }
    </style>
</head>

<body>
    <form id="demo-form" action="/post" method="post">
        <button data-sitekey="your_site_key" data-callback='onSubmit' data-badge="inline">Login</button>
    </form>
</body>

</html>

将data-badge 属性设置为inline，注意data-badge="inline"：

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

关于html代码：

<style>
    .grecaptcha-badge {
        display: none;
    }
</style>

您也可以只添加到您的 CSS：

.grecaptcha-badge {
   display: none;
}

【讨论】：