Recaptcha is functioning properly on smartphones, however, it is experiencing difficulty on computers

Question

Recaptcha is functioning properly on smartphones, however, it is experiencing difficulty on computers

Hey there! I encountered an issue with my website where the recaptcha isn't working on the desktop version. It's strange because I've used the same code successfully on other sites before.

I attempted to fix it by creating a new recaptcha and testing it in different browsers, but to no avail.

Some users suggested that I might be loading the recaptcha twice, but after checking my files, I can't seem to find any duplicates other than the google api link in the header.

The header:

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

My contact form's recaptcha section looks like this:

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

Upon the expected appearance of the 'I am not a robot' checkbox, I encountered the following error on the desktop version:

ERROR for site owner: Invalid domain for site key

Interestingly, the mobile version works flawlessly.

Even after assigning unique recaptcha keys for the desktop and mobile versions, the issue remains unresolved.

javascript html css recaptcha captcha

Answer 1

Answer №1

Hooray, I figured it out!!

Apologies to all for the confusion.

It turns out that I had inadvertently included two versions of the contact form without realizing it. I was unintentionally neglecting to update the site key for the form visible on desktop, instead editing the version that I believed to be the only one. As a result, the form kept appearing as invalid.

I sincerely apologize for the oversight. This serves as a reminder that sometimes meticulously reviewing your code can save you from such issues.

Answer 2

Hooray, I figured it out!!

Apologies to all for the confusion.

It turns out that I had inadvertently included two versions of the contact form without realizing it. I was unintentionally neglecting to update the site key for the form visible on desktop, instead editing the version that I believed to be the only one. As a result, the form kept appearing as invalid.

I sincerely apologize for the oversight. This serves as a reminder that sometimes meticulously reviewing your code can save you from such issues.

Answer 3

Answer №2

In the event that the desktop is reloading twice, it may indicate a problem with the code below.

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

Could you switch the class to "visible-xs" and test if that resolves the issue?

Answer 4

In the event that the desktop is reloading twice, it may indicate a problem with the code below.

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

Could you switch the class to "visible-xs" and test if that resolves the issue?

Answer 5

Answer №3

Have you attempted the specific rendering method discussed in this article - https://developers.google.com/recaptcha/docs/display#explicit_render

As outlined in the provided link, update your script tag to

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

Then create a callback function to dynamically render the desired widget (maybe based on screen size!) similar to the example below.

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

Alternatively, you could render both of them based on the provided examples in the mentioned link.

Answer 6

Have you attempted the specific rendering method discussed in this article - https://developers.google.com/recaptcha/docs/display#explicit_render

As outlined in the provided link, update your script tag to

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

Then create a callback function to dynamically render the desired widget (maybe based on screen size!) similar to the example below.

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

Alternatively, you could render both of them based on the provided examples in the mentioned link.

Recaptcha is functioning properly on smartphones, however, it is experiencing difficulty on computers

Answer №1

Answer №2

Answer №3

Similar questions

Adjust font size using jQuery

Struggling with loading external scripts within background.js in Chrome extensions?

Quick method to assign child iframe title as index.html <title>title</title>

`Back and forward function of pushState in history`

Oops! There was a validation error as the duration was not formatted as a number. Please make sure to provide a valid numerical value for the duration field

Why can't we use percentages to change the max-height property in JavaScript?

Can we specify the inherit value for font family on an element to ensure consistent style when the specified font is not available?

"Enhance your webpage with a captivating opaque background image using Bootstrap

Including HTML attributes within a PHP script

Ensure that the input field requires the first letter to be capitalized and the subsequent letters to be in lowercase

Retrieve the route.js directory using Node.js

What is the best way to show the selected values of dropdown and checkboxes on a redirected page for confirmation using PHP?

Error not caught: AngularJS module error

Issue with jQuery validation plugin is that the select element is not being properly validated

The global variable remains unchanged after the Ajax request is made

Why is it necessary to use "new" with a Mongoose model in TypeScript?

How come the font size doesn't transfer from the div element to the table element?

Utilizing jQuery to dynamically calculate real-time output from user input in a form

Guide to incorporating dynamic components into Angular Router

Checkbox enabled Bootstrap image