I am running into an issue with implementing the reCaptcha control on a contact form.

The following error is thrown on load: Uncaught ReferenceError: Recaptcha is not defined

Here is a partial snippet of the code I am using:

<form role="form" id="ContactMessageForm">
    <div class="form-group">
        <div id="CaptchaContainer"></div>
    </div>
    <button type="button" class="btn btn-default" id="ContactMessageSendButton">Send</button>
</form>

<script type="text/javascript" src="/scripts/mail.min.js" defer="defer"></script>
<script type="text/javascript" src=".js"></script>
<script type="text/javascript">
    $(document).ready(function () { 
        /* Initialize reCaptcha Control */
        Recaptcha.destroy();
        Recaptcha.create('6Lc4V_ASAAAAAMnnwUcaTewH1mlOdylMgAyxb_m6', 'CaptchaContainer', {
            theme: 'clean',
            callback: Recaptcha.focus_response_field
        });
    });
</script>

There is most likely a typo in my code, but I am just not seeing it.

You can see the actual error get fired at: !/contact

I am running into an issue with implementing the reCaptcha control on a contact form.

The following error is thrown on load: Uncaught ReferenceError: Recaptcha is not defined

Here is a partial snippet of the code I am using:

<form role="form" id="ContactMessageForm">
    <div class="form-group">
        <div id="CaptchaContainer"></div>
    </div>
    <button type="button" class="btn btn-default" id="ContactMessageSendButton">Send</button>
</form>

<script type="text/javascript" src="/scripts/mail.min.js" defer="defer"></script>
<script type="text/javascript" src="http://www.google./recaptcha/api/js/recaptcha_ajax.js"></script>
<script type="text/javascript">
    $(document).ready(function () { 
        /* Initialize reCaptcha Control */
        Recaptcha.destroy();
        Recaptcha.create('6Lc4V_ASAAAAAMnnwUcaTewH1mlOdylMgAyxb_m6', 'CaptchaContainer', {
            theme: 'clean',
            callback: Recaptcha.focus_response_field
        });
    });
</script>

There is most likely a typo in my code, but I am just not seeing it.

You can see the actual error get fired at: http://eat-sleep-code./#!/contact

• javascript
• jquery
• html
• ajax
• recaptcha

• 2 Seems like it's a timing problem between your HTML code load (form+script) and execution of $(document).ready() which is before the recaptcha load event. – progysm Commented Mar 20, 2014 at 20:24
• @progysm : Not sure I follow. Since the Recaptcha.create call is inside the $(document).ready(), it shouldn't fire until the form and script is done loading. – eat-sleep-code Commented Mar 20, 2014 at 21:33
• 2 you are already loading the "contact" content inside a $(document).ready() in render.js/renderContent(), so any other document.ready() will be immediate. – progysm Commented Mar 20, 2014 at 21:54
• Wow, learned something new. So, what do you think would be the best way to handle it. Should I should wrap it in a setTimeout and check to see if Recaptcha is defined? – eat-sleep-code Commented Mar 20, 2014 at 22:45
• setTimeout could work sometimes if you wait long enough and there is no problem on google side... I'm not sure what is the best option. Maybe I would add a patch in render to check for 'contact' in the location.hash, then add the google recaptcha script with document.createElement('script') and check for .onload event to start using Recaptcha object. – progysm Commented Mar 20, 2014 at 22:50

4 Answers 4

I have had the same problem and i fixed it with following

<script type="text/javascript">
    $.getScript( "http://www.google./recaptcha/api/js/recaptcha_ajax.js", function() {
        Recaptcha.create("<PUBLIC_KEY>", "recaptchadiv", {theme: "clean"});
    });
</script>

I ended up on this question years later for a client of mine. The problem is slightly different though. I turned on ReCaptcha V2 (google). It wasn't working but only showing captcha* below the form.

In the console it said it couldn't find jquery. I figured something was wrong with the ordering of js loading but I couldn't find the answer.

For me the solution was to go to the template and turn off "optimize js". After that it was working. Hope this will save someone else a few hours :)

Using the feedback from @progysm I moved the call to recaptcha_ajax.js so that it was loaded before the renderContent() function was called. This allowed the Captcha image to be displayed.

Unfortunately, I ended up having to abandon the reCaptcha control for this application as the validation methods were blocked due to cross site scripting methods.

Please confirm if you have given in the right public key and not the private key as following

Recaptcha.create('<public_key>', 'CaptchaContainer', {
        theme: 'clean',
        callback: Recaptcha.focus_response_field
});