3

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?

enter image description here

Kuqa
  • 411
  • 2
  • 5
  • 12

2 Answers2

10

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.

codneto
  • 2,319
  • 3
  • 24
  • 36
  • data-badge="inline" -- working, tnx. however, after the captcha appears and I've solved it, there's no success-sign-green-animation. Do you know how to fix that? – Kuqa Mar 21 '17 at 12:00
  • 1
    That is the another differentiator between invisible and visible captcha. There will be no visual message of successful completion of challenge, but your code will know via callback that user has been verified, at which point you can programmatically re-submit your form data. I think you must be testing on "localhost". One thing I noticed was on localhost, user must complete challenge each time, whereas on a live site, recaptcha challenge wont be shown each time unlike visible captcha, hence no visual "animation" or signal. – codneto Mar 21 '17 at 18:18
  • there're other issues, I'll ask about them in my other question. – Kuqa Mar 22 '17 at 00:46
  • @codneto hey could you elaborate more cause i have same issue, i just post question in here https://stackoverflow.com/questions/53234886/google-recaptcha-doesnt-show-in-div/53243770 – Freddy Sidauruk Nov 11 '18 at 14:50
4

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

Abner Carvalho Almeida
  • 43
  • 5
  • 2
    Hey Abner, thanks for sharing this. Will your website not get penalised tho for hiding the badge? The code above works and I wanted to hide the badge too but I can't find any doc whether hiding the badge is okay to do so or not. – Nicola Mar 28 '17 at 11:40
  • Any new answer for @Nicola? – funerr Jan 16 '18 at 16:45
  • 5
    Found a response, this is **not** allowed! "These terms do not grant you the right to use any branding or logos used in our Services. Don’t remove, obscure, or alter any legal notices displayed in or along with our Services." -- from: https://stackoverflow.com/questions/44543157/how-to-hide-the-google-invisible-recaptcha-badge – funerr Jan 16 '18 at 21:21