4

I know this type of question has been asked before, but I couldn't get the answer. I have a contact form, and I want to implement the new Invisible Google Recaptcha. However, I have used an <input> rather than a <button> and I can't figure out how to do this. Here is my code for the contact form I have:

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>

Then I have the google ReCaptcha button:

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

Any Help would be appreciated. Also, I was wondering if you could remove the ReCaptcha logo on the bottom right.

This Picture Shows What I mean

4

2 回答 2

4

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

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

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

于 2017-04-10T18:03:18.533 回答
1

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

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

这是一个基本的例子

<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;
}
于 2017-09-25T09:37:11.593 回答