Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bootstrap 3.0 recaptcha
<div id="recaptcha_widget" style="display:none">
<div class="form-group">
<label class="control-label col-sm-3">reCAPTCHA</label>
<div class="col-sm-8">
<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="form-group">
<label class="recaptcha_only_if_image control-label col-sm-3">Enter the words above</label>
<label class="recaptcha_only_if_audio control-label col-sm-3">Enter the numbers you hear</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" id="recaptcha_response_field" class="form-control input-recaptcha" name="recaptcha_response_field" />
<span class="input-group-btn">
<a class="btn btn-default" href="javascript:Recaptcha.reload()"><span class="glyphicon glyphicon-refresh"></span></a>
<a class="btn btn-default recaptcha_only_if_image" href="javascript:Recaptcha.switch_type('audio')"><span title="Get an audio CAPTCHA" class="glyphicon glyphicon-headphones"></span></a>
<a class="btn btn-default recaptcha_only_if_audio" href="javascript:Recaptcha.switch_type('image')"><span title="Get an image CAPTCHA" class="glyphicon glyphicon-picture"></span></a>
<a class="btn btn-default" href="javascript:Recaptcha.showhelp()"><span class="glyphicon glyphicon-question-sign"></span></a>
</span>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://www.google.com/recaptcha/api/challenge?k=6Lc_Tt0SAAAAAEnqJ8MRRBmaR5hcjEO96obF129i"></script>
<script type="text/javascript">
elem = document.getElementById("recaptcha_image");
elem.style.removeProperty('width');
elem.style.removeProperty('height');
</script>
<noscript>
<iframe src="https://www.google.com/recaptcha/api/noscript?k=6Lc_Tt0SAAAAAEnqJ8MRRBmaR5hcjEO96obF129i" 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>
@iantearle

This comment has been minimized.

Copy link
Owner Author

commented Apr 8, 2014

Google in their infinite wisdom slap on an inline style to the anchor surrounding the image. We can remove that with some Javascript.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.