Skip to content

Instantly share code, notes, and snippets.

@gladson
Forked from boh1996/bootstrap-recaptcha.css
Created October 1, 2012 15:46
Show Gist options
  • Save gladson/3812601 to your computer and use it in GitHub Desktop.
Save gladson/3812601 to your computer and use it in GitHub Desktop.
Twitter Bootstrap reCAPTCHA
.input-recaptcha {
width:172px;
}
<script type="text/javascript">
var RecaptchaOptions = {
theme : 'custom',
custom_theme_widget: 'recaptcha_widget'
};
</script>
<div id="recaptcha_widget" style="display:none">
<div class="control-group">
<label class="control-label">reCAPTCHA</label>
<div class="controls">
<a id="recaptcha_image" href="#" class="thumbnail"></a>
<div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>
</div>
</div>
<div class="control-group">
<label class="recaptcha_only_if_image control-label">Enter the words above:</label>
<label class="recaptcha_only_if_audio control-label">Enter the numbers you hear:</label>
<div class="controls">
<div class="input-append">
<input type="text" id="recaptcha_response_field" class="input-recaptcha" name="recaptcha_response_field" />
<a class="btn" href="javascript:Recaptcha.reload()"><i class="icon-refresh"></i></a>
<a class="btn recaptcha_only_if_image" href="javascript:Recaptcha.switch_type('audio')"><i title="Get an audio CAPTCHA" class="icon-headphones"></i></a>
<a class="btn recaptcha_only_if_audio" href="javascript:Recaptcha.switch_type('image')"><i title="Get an image CAPTCHA" class="icon-picture"></i></a>
<a class="btn" href="javascript:Recaptcha.showhelp()"><i class="icon-question-sign"></i></a>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://www.google.com/recaptcha/api/challenge?k={your-public-key}"></script>
<noscript>
<iframe src="<?php echo $recaptcha_noscript_url; ?>"
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>
@justin-john
Copy link

I am using this in node.js app with express. How we can get session value on form submit and how can we access it in server side? On re sizing the browser the image is going out of box where the image is placed as well as input field also. How to control image size on browser re sizing?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment