Using reCAPTCHA v2 (Invisible reCAPTCHA badge)

Quform PHPCustomisationCAPTCHAUsing reCAPTCHA v2 (Invisible reCAPTCHA badge)

Note: this guide requires Quform version 2.4.0 released on 19 May 2019, please update to the latest version before starting.

To use reCAPTCHA v2 (Invisible reCAPTCHA badge) follow the 4 steps below.

Step 1

You will need both a Site and Secret key, you can get these from Google for free by clicking here. When creating the keys choose reCAPTCHA v2 – Invisible reCAPTCHA badge.

Step 2

Next, put the code for the reCAPTCHA into the form HTML. Copy and paste the following code into the form, for example above the submit button.

1
2
34
5
6

<div class="quform-element quform-element-recaptcha">
    <div class="quform-input">
        <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY" data-size="invisible"></div>        <noscript>Please enable JavaScript to submit this form.</noscript>
    </div>
</div>
<div class="quform-element quform-element-recaptcha">
    <div class="quform-input">
        <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY" data-size="invisible"></div>
        <noscript>Please enable JavaScript to submit this form.</noscript>
    </div>
</div>
  • On line 3, replace YOUR_SITE_KEY with your reCAPTCHA Site key obtained in Step 1

Step 3

At the bottom of the form HTML page, below this line that was added when installing Quform:

1

<script type="text/javascript" src="quform/js/scripts.js"></script>
<script type="text/javascript" src="quform/js/scripts.js"></script>

Add the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<script>
    window.QuformRecaptchaLoaded = function () {
        if (window.grecaptcha && window.jQuery) {
            jQuery('.g-recaptcha').each(function () {
                var $recaptcha = jQuery(this);
 
                if ($recaptcha.is(':empty')) {
                    var config = {};
 
                    if ($recaptcha.data('version') !== 'v3' && $recaptcha.data('size') === 'invisible') {
                        config.callback = function () {
                            $recaptcha.closest('.quform').data('quform').ajaxSubmit();
                        };
                    }
 
                    $recaptcha.data('recaptcha-id', grecaptcha.render($recaptcha[0], config));
                }
            });
        }
    };
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=QuformRecaptchaLoaded&render=explicit" async defer></script>
<script>
    window.QuformRecaptchaLoaded = function () {
        if (window.grecaptcha && window.jQuery) {
            jQuery('.g-recaptcha').each(function () {
                var $recaptcha = jQuery(this);

                if ($recaptcha.is(':empty')) {
                    var config = {};

                    if ($recaptcha.data('version') !== 'v3' && $recaptcha.data('size') === 'invisible') {
                        config.callback = function () {
                            $recaptcha.closest('.quform').data('quform').ajaxSubmit();
                        };
                    }

                    $recaptcha.data('recaptcha-id', grecaptcha.render($recaptcha[0], config));
                }
            });
        }
    };
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=QuformRecaptchaLoaded&render=explicit" async defer></script>

Step 4

Open process.php and paste the following code into the file.

1
2
34
5

$recaptcha = new Quform_Element('g-recaptcha-response', 'reCAPTCHA');
$recaptcha->addValidator('required');
$recaptcha->addValidator('recaptcha', array('secretKey' => 'YOUR_SECRET_KEY'));$recaptcha->setIsHidden(true);
$form->addElement($recaptcha);
$recaptcha = new Quform_Element('g-recaptcha-response', 'reCAPTCHA');
$recaptcha->addValidator('required');
$recaptcha->addValidator('recaptcha', array('secretKey' => 'YOUR_SECRET_KEY'));
$recaptcha->setIsHidden(true);
$form->addElement($recaptcha);
  • On line 3, replace YOUR_SECRET_KEY with your reCAPTCHA Secret key obtained in Step 1

Paste the code on a blank line between these lines within the process.php file:

/** FORM ELEMENT CONFIGURATION **/

/** END FORM ELEMENT CONFIGURATION **/

Note: if you are replacing an existing CAPTCHA, such as the default image CAPTCHA in the index.html example form, you should remove the configuration for the existing CAPTCHA element from the process.php file (shown below).

1
2
3
4
5
6
7
8
9
10
11

/**
 * Configure the CAPTCHA element
 * Filters: Trim
 * Validators: Required, Identical
 */
$captcha = new Quform_Element('type_the_word', 'Type the word');
$captcha->addFilter('trim');
$captcha->addValidator('required');
$captcha->addValidator('identical', array('token' => 'catch'));
$captcha->setIsHidden(true);
$form->addElement($captcha);
/**
 * Configure the CAPTCHA element
 * Filters: Trim
 * Validators: Required, Identical
 */
$captcha = new Quform_Element('type_the_word', 'Type the word');
$captcha->addFilter('trim');
$captcha->addValidator('required');
$captcha->addValidator('identical', array('token' => 'catch'));
$captcha->setIsHidden(true);
$form->addElement($captcha);

Changing the reCAPTCHA theme

There are 2 reCAPTCHA themes available (light or dark), the default is light. To change it find the div with class g-recaptcha and add the attribute data-theme="dark".

See also

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