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?

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?

• javascript
• html
• css
• ajax
• recaptcha

• captcha block might be in position:absolute. try updating your form to position:relative with css. - form{position:relative;} – ajai Jothi Commented Mar 19, 2017 at 5:21
• @ajaiJothi doesn't work – Kuqa Commented Mar 19, 2017 at 5:28

2 Answers 2

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.

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