This video is a good explanation in a video format, with some up to date info that I didn’t knew back in the time. Will soon update my answer accordingly to fix some mistakes. If your Nuxt version is 2.13 or above, you don’t need to use @nuxtjs/dotenv or anything alike because it is already … Read more
By using the CSS transform property you can achieve changing the width by changing the entire scale of the reCAPTCHA. By adding in just two inline styles, you can make the reCAPTCHA fit nicely on your mobile device: <div class=”g-recaptcha” data-theme=”light” data-sitekey=”XXXXXXXXXXXXX” style=”transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;”> </div> More details can be found on my site: https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/
Instead of attaching the reCAPTCHA attributes to the button directly you have to add them to a div and then use grecaptcha.execute(); on form submit. <script src=”https://www.google.com/recaptcha/api.js” async defer></script> <form id=”myForm”> Name: (required) <input id=”field” name=”field” required> <div id=’recaptcha’ class=”g-recaptcha” data-sitekey=”your_site_key” data-callback=”onCompleted” data-size=”invisible”></div> <button id=’submit’>submit</button> </form> <script> $(‘#myForm’).submit(function(event) { console.log(‘validation completed.’); event.preventDefault(); //prevent form submit … Read more
The method you are looking for is grecaptcha.reset() However, in order for this function to work you have to render the reCaptacha explicitly like this : <script src=”https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit” async defer></script>
i can’t even open the Recaptcha page you linked to without VPN. i’ve been in Beijing the last two years. assuming you’re not here and/or don’t know very much about the infrastructure situation in the PRC: i’m not aware of any service of Google’s that is reliably reachable and fast from the mainland. they are … Read more
Try the CSS below: /* ReCaptcha Iframe FIX */ iframe {display:none !important;} header iframe, section iframe, footer iframe, div iframe { display:inline; } If you don’t have any other frames on the site to worry about, a simpler version should suffice: iframe {display:none !important;} Alternatively, you could target all iframes where src=”https://stackoverflow.com/questions/8155645/about:blank”: iframe[src=”https://stackoverflow.com/questions/8155645/about:blank”]{display:none;}
Invisible reCAPTCHA Implementing Google’s new Invisible reCAPTCHA is very similar to how we add v2 to our site. You may add it as its own container like normal, or the new method of adding it to the form submit button. I hope this guide will help you along the correct path. Standalone CAPTCHA Container Implementing … Read more
You have to do it programmatically thanks to a new v2 grecaptcha method: grecaptcha.execute() so that recaptcha doesn’t replace the button’s default click event which was preventing the default HTML5 form validation. The event path is: Submit button click event: browser built-in form validation Form submit event: call grecaptcha.execute() reCAPTCHA callback: submit the form $(‘#form-contact’).submit(function … Read more
I have found other forums talking about how it can occur if you validate a token twice. But I haven’t been able to test that or confirm that.