Using 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, where you paste it is not really important just find a blank line around where the other elements are configured.

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

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. © 2019 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy