Thursday, April 4, 2013

Twitter Bootstrap reCAPTCHA Form Protection

You just need to adjust your public key on lines 44 and 47.
<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" class="thumbnail"></a>
 <div class="recaptcha_only_if_incorrect_sol" style="color:red">
  Incorrect please try again
 </div>
 </div>
</div>
<div class="control-group">
 <div class="controls">
 <div class="input-append">
 <input type="text" 
  id="recaptcha_response_field" 
  required class="input-recaptcha" 
  placeholder="Enter the capctha here" 
  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>
 <br/><br/>
 <button class="btn btn-warning" type="submit">Submit</button></div>
</div>
</div>
<script type="text/javascript" 
src="https://www.google.com/recaptcha/api/challenge?k=$YOURPUBLICKEY">
</script>
<noscript>
<iframe src="https://www.google.com/recaptcha/api/noscript?k=$YOURPUBLICKEY"
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>