Skip to content

Instantly share code, notes, and snippets.

@iantearle
Forked from boh1996/bootstrap-recaptcha.css
Last active August 29, 2015 13:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save iantearle/10115677 to your computer and use it in GitHub Desktop.
Save iantearle/10115677 to your computer and use it in GitHub Desktop.
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
Copy link
Author

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