Travis Luong

ReCaptcha Gem Custom Theme

Recently, I needed to figure out how to customize the look of the ReCaptcha form generated by the recaptcha gem for Rails.

After you’ve installed the gem and got it working according to the installation instructions, you’ll have to change a few things.

First, replace the <%= recaptcha_tags %> code with <%= render 'recaptcha' %>.

Next, create a new view _recaptcha.html.erb and paste in the code found in the Customizing the Look and Feel of reCAPTCHA documentation.

<script type="text/javascript">
 var RecaptchaOptions = {
    theme : 'custom',
    custom_theme_widget: 'recaptcha_widget'
 };
</script>

<div id="recaptcha_widget" style="display:none">

   <div id="recaptcha_image"></div>
   <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>

   <span class="recaptcha_only_if_image">Enter the words above:</span>
   <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>

   <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />

   <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
   <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
   <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>

   <div><a href="javascript:Recaptcha.showhelp()">Help</a></div>

 </div>

 <script type="text/javascript"
    src="http://www.google.com/recaptcha/api/challenge?k=your_public_key">
 </script>
 <noscript>
   <iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key"
        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>

Next, you will want to replace your_public_key with <%= ENV['RECAPTCHA_PUBLIC_KEY'] %>.

You can now move stuff around and apply custom CSS styling.

Bootstrap has some good glyphicons for this. You can change the colors as well:

<div class="recaptcha_buttons">
  <div><a href="javascript:Recaptcha.reload()"><span style="color:#333;" class="glyphicon glyphicon-refresh"></span></a></div>
  <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')"><span style="color:#333;" class="glyphicon glyphicon-headphones"></span></a></div>
  <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')"><span style="color:#333;" class="glyphicon glyphicon-refresh"></span></a></div>
  <div><a href="javascript:Recaptcha.showhelp()"><span style="color:#333;" class="glyphicon glyphicon-question-sign"></span></a></div>
</div>