Menu
Can not figure out how to theme an ajax loaded recaptcha. The below code does not work.
From Google Recaptcha
Saw this post Recaptcha ajax API custom theme not working, but I am definitely viewing in localhost and recaptcha is working fine, just not changing themes.
Anyone have advice on how to get the white theme to work?
<script type='text/javascript'>
var RecaptchaOptions = {
theme : 'white'
};
</script>
<div id="recaptcha_content">
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=6Ldr7woAAAAAADa_69Mr-EZKAeYyEx9N08q" height="300" width="500" frameborder="0"></iframe><br />
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type='hidden' name='recaptcha_response_field' value='manual_challenge' />
</noscript>
</div>
<script type="text/javascript">
$(document).ready(function() {
$.getScript('http://www.google.com/recaptcha/api/js/recaptcha_ajax.js',
function() {Recaptcha.create("6Ldr7woAAAAAADa_69Mr-EZKAeYyEx9N08q", "recaptcha_content");
});
});
</script>
941
@jhanifen: I got it working after using most of the code from http://wiki.recaptcha.net/index.php/Installation, try this --
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$.getScript('http://www.google.com/recaptcha/api/js/recaptcha_ajax.js',
function() {
Recaptcha.create("6Ldr7woAAAAAADa_69Mr-EZKAeYyEx9N08q",
"recaptcha_content",
{
theme: "white",
callback: Recaptcha.focus_response_field
}
);
});
});
</script>
<div id="recaptcha_content">
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=6Ldr7woAAAAAADa_69Mr-EZKAeYyEx9N08q" height="300" width="500" frameborder="0"></iframe><br />
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type='hidden' name='recaptcha_response_field' value='manual_challenge' />
</noscript>
</div>
</body>
</html>
I't doesn't look like you are adding your options that you have set RecapthcaOptions. Try changing to:
$.getScript('http://www.google.com/recaptcha/api/js/recaptcha_ajax.js',
function() {Recaptcha.create("6Ldr7woAAAAAADa_69Mr-EZKAeYyEx9N08q", "recaptcha_content", RecaptchaOptions);
});
See the doc's, the third option passed to the .create() method is the options. You are setting up a variable outside the function to set the options, but don't include them.
24
First of all, your key is invalid or wrong, or you wanted that to be posting here :D If not wanted. try to get a new one, and maybe make it a global one (could affect the localhost stuff). Or upload and test the code on the domain you specified.
This snippet works for my global public key, i set the theme directly on creation
<html>
<head>
<title>recaptcha test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
</head>
<body>
<div id="recaptcha_content">
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=publickey" height="300" width="500" frameborder="0"></iframe><br />
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type='hidden' name='recaptcha_response_field' value='manual_challenge' />
</noscript>
</div>
<script type="text/javascript">
$(document).ready(function() {
Recaptcha.create("publickey",
"recaptcha_content", {
theme: "white",
callback: Recaptcha.focus_response_field
});
});
</script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
