首页 文章

隐形谷歌reCaptcha

提问于
浏览 次
5

我知道以前曾问过这类问题，但我无法得到答案 . 我有联系表格，我想实施新的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>

然后我有谷歌ReCaptcha按钮：

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

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

This Picture Shows What I mean

html button input recaptcha invisible-recaptcha

2 回答

  • 1

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

    • g-recaptcha tag attribute ：数据徽章

    • grecaptcha.render parameter ：徽章

    • Value ：bottomright bottomleft inline

    • Default ：彻头彻尾

    • Description ：可选 . 重新定位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;
}
    回复于
  • 4

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

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

    请注意，当Google假装存在“隐私”和“条款”链接时，应显示徽章 .

    回复于

相关问题