reCAPTCHA Custom Styling

CAPTCHA is one of those neat little items that help prevent automated attacks on sites that have form submissions such as registration or blog posts.  I was searching for a way to use CAPTCHA in a ASP.NET MVC site, but what I found can be applied to any coding tool like PHP, Java, Ruby, etc.  I followed this excellent blog Using ReCaptcha with Asp.Net MVC for most of the backend code.  Once I got it working I realized that the default generated CAPTCHA widget didn’t go well with the site’s color palette.  Fortunately you can change the widget’s appearance.

Solution:

1.  Place this snippet before the form element that contains the CAPTCHA widget.  Note that I went with the “clean” theme.  Other themes are possible, see full reference here.

<script type="text/javascript">
var RecaptchaOptions = {
   theme : 'clean'
};
</script>

2.  Somewhere in your form element place the following HTML and script reference, this is a barebones approach.  In the script reference don’t forget to replace “your_public_key” with the public key you got from signing up for API key.

<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>

3.  If you want to internationalize your CAPTHCA widget, you can include the additional div elements shown here and add the following to the RecaptchaOptions shown in step 1.  You’ll have to insert the translated text of your choice dynamically.

 

<script type="text/javascript">
        var RecaptchaOptions = {
                custom_translations : {
                        instructions_visual : "Scrivi le due parole:",
                        instructions_audio : "Trascrivi ci\u00f2 che senti:",
                        play_again : "Riascolta la traccia audio",
                        cant_hear_this : "Scarica la traccia in formato MP3",
                        visual_challenge : "Modalit\u00e0 visiva",
                        audio_challenge : "Modalit\u00e0 auditiva",
                        refresh_btn : "Chiedi due nuove parole",
                        help_btn : "Aiuto",
                        incorrect_try_again : "Scorretto. Riprova.",
                },
                theme : 'clean',
        };
</script>

That’s it.  My widget looked something like the image below.  I left out the some of the customization div elements and went with they’re “clean” look.