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