Search code examples
cssrecaptcha

reCAPTCHA position cannot be changed (from bottom right)

I have just added a reCAPTCHA v3 to a contact form, however I am unable to change the position from the bottom right of the page.

Position on No Hover enter image description here

Position on Hover enter image description here

After following this tutorial and looking for solutions, all reCAPTCHA examples embed the div in a bootstrap contact form. As I am not using bootstrap, I would like to simply position the element using css.

Things I've tried:

  • Remove all elements in the page - the position does not change
  • Remove all elements in the contact div - the position does not change
  • Push changes to actual website - the local host error goes away, but the position doesn't change
  • Triple check the code: <div class="g-recaptcha" data-sitekey="KEY" id="recaptcha" name="recaptcha" style="left=0px;position=absolute"></div>
Solution

  • Quick answer thanks to @AlonEitan. The reCAPTCHA v3 has no UI interface. So instead of embedding it in the contact form (as with v2), you simply hide the banner:

    <div class="grecaptcha-recaptcha" data-sitekey="KEY" id="recaptcha" name="recaptcha" style="opacity=0;"></div>

    Source