由于某种原因，reCaptcha在最右下角呈现

Question

我的ajax表格带有recaptcha，简化代码：

<form>
  <input type="email" placeholder="Email" required="true" />
  <input type="submit" value="Create account" />
  <div class="g-recaptcha" data-sitekey="12345" data-size="invisible"></div>
</form>

出于某种原因，它将reCaptcha呈现在页脚右下角的某个位置。为什么这样以及如何解决？

Answer 1

由于您使用的是“隐形”recaptcha，因此您可以将HTML元素中的data-badge属性传递给recaptcha api。 data-badge可以采取三个值 - bottomright，bottomleft和inline。如果跳过此属性，则bottomright是默认值，这就是它在右下角呈现的原因。如果要在表单中以内嵌方式显示图标，请使用“内联”值。 data-badge="inline"的另一个好处是你可以使用普通的CSS来改变它的外观等。

因此，将recaptcha目标元素的HTML更改为：

<div class="g-recaptcha" data-sitekey="12345" data-size="invisible" data-badge="inline"></div>

或者，如果你使用grecaptcha.render() api来渲染recaptcha，那么你也可以在参数中使用pass badge值来表示这个api。

您可能已经知道这一点，但我提到它的参考，你有另一个选择是使用“可见”recaptcha而不是“隐形”，因为可见的recaptcha总是内联呈现。只需删除data-size="invisible"属性即可。

Answer 2

要隐藏Google隐形reCaptcha徽章，请执行以下操作：

在您的HTML使用中：

<div class="g-recaptcha" data-sitekey="12345" data-badge="inline"></div>  

在你的CSS使用：

.grecaptcha-badge{
    display: none;
}

完成:)