Google reCaptchav2 error required parameters: site key

Question

I recently started a webpage with the posibilty for clients to send mail to my account, sadly i forgot to place a CAPTCHA and it got flooded by bots in no time. I started looking at the Google docs for reCaptcha but i have come to a halt with this error.

My page is loaded dynamically with jQuery and so I need an explicit render, I followed the steps given by Google but the error: Uncaught Error: Missing required parameters: sitekey keeps appearing and no captcha renders.

This is my form:

<form id="mailForm"  >
        <input id="name" name="name" type="text" placeholder="Name" required> <input id="email" name="email" type="email" placeholder="Email" required>

        <textarea id="message" rows="10" cols="50" name="message" placeholder="Your message" required></textarea>

         <div id="recaptcha"></div>

        <input type="submit" id="mailButt" onclick="mailSend()" value="Send">

    </form>

The function used to call the render (MY_SITEKEY is replaced by my sitekey in the original code)

function loadCaptcha()
    {    
      grecaptcha.render($('#recaptcha'), {
          'sitekey' : 'MY_SITEKEY'
        });
    };

Which is called when the ajax which loads the page is successful

loadCaptcha();

and finally the script provided by Google, this has been placed at the end of the <body> and just before </head> with both options still not fixng the error:

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

I have tried many configurations of the code but it wont render the captcha box no matter what

Shim-Sao Shim-Sao · Accepted Answer · 2018-12-17T11:22:34

You forget to pass the function by loading the script : onload=loadCaptcha

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

I know syntax is the same, but try to change the function like in the documention : Explicit rendering after an onload callback

<script type="text/javascript">
  var onloadCallback = function() {
    grecaptcha.render('recaptcha', {
      'sitekey' : 'your_site_key'
    });
  };
</script>

Documentation here : https://developers.google.com/recaptcha/docs/display

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render after an onload callback</title>
    <script type="text/javascript">
      var onloadCallback = function() {
        grecaptcha.render('html_element', {
          'sitekey' : 'your_site_key'
        });
      };
    </script>
  </head>
  <body>
    <form action="?" method="POST">
      <div id="html_element"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

Google reCaptchav2 error required parameters: site key

2 Answers