CODEWITHSUNDEEP
javascripthtmlcssrecaptchacaptcha
nofreakingway
nofreakingway

Reputation: 21

Recaptcha is working on mobile, but not on desktop

So, I have a website and I've added a recaptcha to the contact form. I've used this code for the recaptcha and the contact form on multiple websites before, and it worked perfectly on those. But, for some reason, on this website, the recaptcha isn't working on the desktop version of the site.

I've tried removing the old recaptcha and creating a new one. That didn't work.

I thought that maybe because I had a different style of formatting for the mobile version and the desktop version on the same page, that it might be causing an error. But, when I deleted one of the recaptchas, I had the same result - mobile was fine and desktop was not.

I tried it in different browsers to see if it was a chrome error, and even updated my chrome - it wasn't that either.

I checked to see if anyone else had a similar issue and they claimed that they were loading the recaptcha twice. But I checked my files and I can't see anywhere it would be loading other than the google api link in the header.

The header:

<script src='https://www.google.com/recaptcha/api.js' async defer></script>
</head>

The recaptcha section of my contact form:

<div class = "row d-none d-sm-none d-md-block">
   <div class = "col-md-6">
      <div class="g-recaptcha" id = "captcha" name = "captcha" data-sitekey="SITE_KEY_HERE" style = "text-align:left;"></div>
   </div>
   <div class = "col-md-6">
      <div class = "submit" style = "text-align: right;">
         <button id = "submitForm" type="submit" name = "submit" class="btn btn-lg">Send Message</button>
      </div>
   </div>
</div>
<div class = "row d-inline-block d-sm-inline-block d-md-none">
   <div class = "col-sm-12 text-center">
      <div class="g-recaptcha" id = "captcha" name = "captcha" data-sitekey="SITE_KEY_HERE" style = "text-align:center;"></div>
   </div>
</div>
<div class = "row d-block d-sm-block d-md-none">
   <div class = "col-sm-12 text-center">
      <div class = "submit">
         <button id = "submitForm" type="submit" name = "submit" class="btn btn-lg">Send Message</button>
      </div>
   </div>
</div>

I expected the user to be able to see a normal, recaptcha v2 'I am not a robot' checkbox, but I get:

ERROR for site owner: Invalid domain for site key

on the desktop version. It's working perfectly on the mobile version.

Update: I even tried making unique recaptcha keys for the desktop and mobile version, but that didn't work either.

Upvotes: 1

Views: 3145

Answers (3)

nofreakingway
nofreakingway

Reputation: 21

SOLVED IT!!

I'm so sorry everyone.

Turns out that I had accidentally added two versions of the contact form and I didn't realize it. I wasn't updating the site key of the one visible on the desktop, and continued to edit the one version of the form that I thought I had.. so it kept showing as not valid.

I'm very very sorry everyone. I guess this means that it pays to read your code line by line sometimes..

Upvotes: 1

Sandeep Rajoria
Sandeep Rajoria

Reputation: 1239

Have you tried the explicit rendering as mentioned here - https://developers.google.com/recaptcha/docs/display#explicit_render

As stated in the link above, change your script tag to

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer> </script>

Then add a callback function to logically render the widget you want to (based on maybe screen size!) something like this.

<script type="text/javascript"> var onloadCallback = function() { if (screen.width < 600) grecaptcha.render('captcha-one', { //id of the first captcha needs to be captcha-one 'sitekey' : 'your_site_key' }); else grecaptcha.render('captcha-two', { //id of the second captcha needs to be captcha-two 'sitekey' : 'your_site_key' }); }; </script>

Or you might actually just render both of them based on the other sample codes there in the mentioned link.

Upvotes: 0

shailesh kanbi
shailesh kanbi

Reputation: 39

If it's reloading for desktop twice that means could be issue with below code.

class = "row d-inline-block d-sm-inline-block d-md-none"

can you change class to "visible-xs" and see if it works?

Upvotes: 0

Related Questions