Google ReCaptcha Scroll to bottom of page when verified on ios devices

Question

I am using google recaptcha on a contact form. The problem is that on mobile devices, when google recaptcha is verified it scrolls the use down to bottom of page. The use will then have to scroll up again to submit a particular form.

This ONLY happens on ios devices running version 10 or higher.

I haven't been able to fix this.

You can see the issue here https://www.digamberpradhan.com.np/contact-copy/

Answer 1

I managed to find a workaround for this issue. First of all, you should know that there's a callback after a response has been submitted. What I did was using that to focus what I needed in this callback. But the focus does not work correctly on iOS so you have to use another workaround which is the javascript animate.
Documentation: https://developers.google.com/recaptcha/docs/display

In my case, it looks like this:

<script src="http://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
<div id="re-captcha" class="g-recaptcha" ></div>

As you can see I'm calling onloadCallback after the recaptcha has been loaded. Also, for some reason if you don't specify the render=explicit, the callback does not happen.

<script>
    var focusWhatever = function (response) {
        $("html, body").animate({ scrollTop: $("#whatever").offset().top }, "slow");
    };

    var onloadCallback = function () {
        var widget = grecaptcha.render(document.getElementById("re-captcha"), {
            'sitekey' : "yoursitekey",
            'theme': "light",
            'callback' : focusWhatever
        });
    }
</script>

In particular, in this case the animate goes directly to whatever element you want. Just so it looks nice for the user, you should select an element above what you actually want to focus.