How to add a custom ReCaptcha theme

Written May 13, 2014 14:09

The Google ReCaptcha allows you to add a Custom Theme and the dropdown in the ChronoForms v4 Load ReCaptcha action has a custom option. But how can you actually add the theme. Here's how I did it for one client.

First set the ReCaptcha up in the normal way using one of the standard themes and check that it is working correctly.

Next, open up the Custom Code action where you have the {ReCaptcha} place holder and add the following HTML which will be used to support the theme. You can edit the HTML if necessary but check that all the important elements are kept somewhere.

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

This will be treated as normal Form HTML by ChronoForms so you can use Multi-Language strings for the messages if necessary.

Then add a Load JS action to your form - or open an existing one - and add this JavaScript:

var RecaptchaOptions = {
 theme : 'custom',
 lang : 'en',
 custom_theme_widget: 'recaptcha_widget'
};

This will over-ride the RecaptchaOptions set by ChronoForms and the custom_theme_widget line identifies the id of the HTML we just added. You may also need to change the language line here.

Lastly add the custom CSS for the ReCaptcha widget to a Load CSS action in your form. Here's the code I used taken from Chris van Patten's Responsive ReCaptcha (Github link)

.recaptcha_widget{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;max-width:300px;border:4px solid #AF1500;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px;background:#AF1500;margin:0 0 10px}
#recaptcha_image{max-width:400px}
#recaptcha_image{width:100% !important;height:auto !important}
#recaptcha_image img{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%;height:auto;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;border:3px solid #FFF}.recaptcha_is_showing_audio embed{height:0;width:0;overflow:hidden}
.recaptcha_is_showing_audio #recaptcha_image{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%;height:60px;background:#FFF;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;border:3px solid #FFF}
.recaptcha_is_showing_audio #recaptcha_image br{display:none}
.recaptcha_is_showing_audio #recaptcha_image #recaptcha_audio_download{display:block}
.recaptcha_input{background:#FFDC73;color:#000;font:13px/1.5 "HelveticaNeue","Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif;margin:4px 0 0;padding:0 4px 4px;border:4px solid #FFDC73;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px}
.recaptcha_input label{margin:0 0 6px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.recaptcha_input input{width:100%}
.recaptcha_options{list-style:none;margin:4px 0 0;height:18px}.recaptcha_options li{float:left;margin:0 4px 0 0}
.recaptcha_options li a{text-decoration:none;text-shadow:0 1px 1px #000;font-size:16px;color:#FFF;display:block;width:20px;height:18px}
.recaptcha_options li a:active{position:relative;top:1px;text-shadow:none}
.captcha_hide{display:none}

Note that I added a max-width value to the image as otherwise it could get enormous.

There are other Responsive ReCaptcha themes available that could be added in a similar way. Or you can modify Chris' theme to suit your needs.

FAQs