隐形 Google reCaptcha
Invisible Google reCaptcha
我知道以前有人问过这种类型的问题，但我找不到答案。我有一个联系表，我想实施新的 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 徽标。
试试这个，它会在页面上隐藏 Google reCaptcha Invisible Badge。
.grecaptcha-badge {
display: none !important;
}
请记住徽章应该显示为 Google 假装存在 "privacy" 和 "terms" 链接。
从 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;
}
我知道以前有人问过这种类型的问题，但我找不到答案。我有一个联系表，我想实施新的 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 徽标。
试试这个，它会在页面上隐藏 Google reCaptcha Invisible Badge。
.grecaptcha-badge {
display: none !important;
}
请记住徽章应该显示为 Google 假装存在 "privacy" 和 "terms" 链接。
从 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;
}