reCaptcha is rendered in the most right bottom cor

Question

My ajax form with recaptcha, simplified code:

<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>

For some reason, it renders the reCaptcha somewhere in the right bottom corner, under the footer. Why is that and how to fix it?

Answer 1

Since you are using "invisible" recaptcha, you can pass data-badge attribute in HTML element to recaptcha api. data-badge can take three values - bottomright, bottomleft and inline. bottomright is default if this attribute is skipped, and that is why it is rendering in bottom right corner. Use "inline" value if you want to show the icon inline in form. Another benefit of data-badge="inline" is that you can use normal CSS to change its look etc.

So change your HTML of recaptcha target element to this:

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

Alternatively, if you use grecaptcha.render() api to render recaptcha, then you can also use pass badge value in parameters to this api.

You may already know this, but am mentioning it for reference that another option you have is to use "visible" recaptcha instead of "invisible" because visible recaptcha is always rendered inline. Just remove data-size="invisible" attribute to do that.

Answer 2

To hide Google invisible reCaptcha badge do the following:

In your HTML Use:

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

In your css use:

.grecaptcha-badge{
    display: none;
}

Done :)