由于某种原因，reCaptcha在最右边的底部cornver中呈现

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

由于您使用的是“隐形”重新绑定，因此您可以将HTML元素中的data-badge属性传递给recaptcha api。 data-badge可以采用三个值 - 底部， bottomleft 和内嵌。如果跳过此属性，则 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，那么您还可以在参数中使用传递badge值到此API。

您可能已经知道这一点，但我提到它是为了参考，您有另一个选项是使用“visible”recaptcha而不是“invisible”，因为可见的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;
}

完成：）