Custom reCAPTCHA theme

This documentation page is for Quform version 1 and may not be applicable for Quform 2 click here to visit the documentation for Quform 2.

This technique will no longer work in Quform 1.5.0 or later, as the new reCAPTCHA is used instead. Custom theming of the new reCAPTCHA is not possible – you can choose between Light or Dark in the element settings.

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.

Note: if you update the plugin, these changes will be overwritten

Be inspired. © 2018 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy