Recaptcha not rendering

It should be totally simple, but I'm guessing I'm missing something.

I put this in the html body before the form:

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

      

Then, inside the form, I have this recaptcha div:

...
<form action="" method="post">
    <div class="g-recaptcha" data-sitekey="[MY_API_KEY]"></div>
    ...

      

When the page loads, there is no recaptcha and also the firebug console does not output anything. What could be wrong?

EDIT: Now it works sometimes, but I need to refresh the page, but it is completely random if it works or not. This is really strange behavior.

+3


source to share


3 answers


The reCAPTCHA page itself says that the tag script

is inside the tag head

, so it should load first. Also, check if you have two tags script

... wink



+1


source


I experienced a similar issue with chart.js on my site.

If this is the same case with me (when the reload page works) then I think the js file is not loading before your html is rendered.

check safari or chrome load times. if your screen is ready and recapcha.js is before loading then you have to add a given timeout or so on to wait for your javascript code.



I tried like this ..

setTimeout(function(){ 
    Chart.defaults.global.tooltipFontSize= 10;
    Chart.defaults.global.scaleShowLabels=false;
}, 10)

      

0


source


Try removing the attributes from async

and defer

from the script tag and place it somewhere above your form.

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

      

This will ensure that your script is run before your form is parsed.

api.js

is only ~ 532 bytes (minified) and shouldn't add too much overhead to your page load.

Also I'm not sure what this question is related django

to anyway. I suggest removing this tag from your question :)

Hope it helps and good luck.

0


source







All Articles