reCaptcha is rendered in the most right bottom cornver for some reason

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?

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

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

Comments

[Kuqa]

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?

[codneto]

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.

[Kuqa]

there're other issues, I'll ask about them in my other question.

[Nicola]

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.

[funerr]

Any new answer for @Nicola?

[funerr]

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: stackoverflow.com/questions/44543157/…

[Freddy Sidauruk]

@codneto hey could you elaborate more cause i have same issue, i just post question in here stackoverflow.com/questions/53234886/…