Showing posts with label Twitter Bootstrap. Show all posts
Showing posts with label Twitter Bootstrap. Show all posts

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>