How can I load a reCaptcha form using jQuery/AJAX while leaving the reCaptcha scripts in place?

The link has all you need: http://code.google.com/apis/recaptcha/docs/display.html

You can't add the script in ajax. You should add the following line before :

  <script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>

Then, you can dynamically create a recaptcha form in your js code by using adding the following code:

  Recaptcha.create("your_public_key",
    "element_id",
    {
      theme: "red",
      callback: Recaptcha.focus_response_field
    }
  );

@benck, great answer! But it's become a bit outdated. The current script URL is:

<script type="text/javascript" src="https://www.google.com/recaptcha/api.js"></script>

And the code should be like below:

grecaptcha.render('element_id', {
    sitekey: recaptchaSiteKey,
    callback: function(response) {
        console.log(response);
    }
});

Related