Custom reCAPTCHA theme

This guide will show you how to create a custom reCAPTCHA theme, which is smaller than the original reCAPTCHA.

Step 1

Edit the file wp-content/plugins/iphorm-form-builder/includes/form.php, find this code:

1
2
3
4

var RecaptchaOptions = {
    theme: '<?php echo $recaptchaElement->getRecaptchaTheme(); ?>',
    lang: '<?php echo $recaptchaElement->getRecaptchaLang(); ?>'
};

var RecaptchaOptions = {
    theme: '<?php echo $recaptchaElement->getRecaptchaTheme(); ?>',
    lang: '<?php echo $recaptchaElement->getRecaptchaLang(); ?>'
};

Replace it with:

1
2
3
4
5

var RecaptchaOptions = {
    theme: 'custom',
    custom_theme_widget: 'recaptcha_widget',
    lang: '<?php echo $recaptchaElement->getRecaptchaLang(); ?>'
};

var RecaptchaOptions = {
    theme: 'custom',
    custom_theme_widget: 'recaptcha_widget',
    lang: '<?php echo $recaptchaElement->getRecaptchaLang(); ?>'
};

Step 2

Edit the file wp-content/plugins/iphorm-form-builder/includes/elements/recaptcha.php, find this line:

<?php echo recaptcha_get_html($publicKey); ?>

Replace it with:

<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=<?php echo $publicKey; ?>">
</script>
<noscript>
 <iframe src="http://www.google.com/recaptcha/api/noscript?k=<?php echo $publicKey; ?>"
      height="300" width="500" frameborder="0"></iframe>

 <textarea name="recaptcha_challenge_field" rows="3" cols="40">
 </textarea>
 <input type="hidden" name="recaptcha_response_field"
      value="manual_challenge">
</noscript>

Step 3

Create the file wp-content/plugins/iphorm-form-builder/css/custom.css if it doesn’t already exist, and add this code to the file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#recaptcha_image,
#recaptcha_image img
{
    width: 200px !important;
    cursor: pointer;
}
#recaptcha_image img:hover
{
    position: absolute;
    width: 300px !important;
}
.recaptcha_only_if_image,
.recaptcha_only_if_audio
{
    display: block;
}

#recaptcha_image,
#recaptcha_image img
{
    width: 200px !important;
    cursor: pointer;
}
#recaptcha_image img:hover
{
    position: absolute;
    width: 300px !important;
}
.recaptcha_only_if_image,
.recaptcha_only_if_audio
{
    display: block;
}

Note: you can adjust the CSS to suit. The image will display at 200px and when hovered with the mouse it will expand to 300px.

Credit: source.