Using reCAPTCHA v3

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

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

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" data-version="v3"></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" data-version="v3"></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
<script>
window.QuformRecaptchaLoaded = function () {
    if (window.grecaptcha && window.jQuery) {
        jQuery('.g-recaptcha').each(function () {
            var $recaptcha = jQuery(this);
 
            if ($recaptcha.is(':empty')) {
                $recaptcha.data('recaptcha-id', grecaptcha.render($recaptcha[0]));
            }
        });
    }
};
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=QuformRecaptchaLoaded&amp;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')) {
                $recaptcha.data('recaptcha-id', grecaptcha.render($recaptcha[0]));
            }
        });
    }
};
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=QuformRecaptchaLoaded&amp;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
3
45
67
8
9
$recaptcha = new Quform_Element('g-recaptcha-response', 'reCAPTCHA');
$recaptcha->addValidator('required');
$recaptcha->addValidator('recaptcha', array(
    'secretKey' => 'YOUR_SECRET_KEY',    'version' => 'v3',
    'threshold' => 0.5));
$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',
    'version' => 'v3',
    'threshold' => 0.5
));
$recaptcha->setIsHidden(true);
$form->addElement($recaptcha);
  • On line 4, replace YOUR_SECRET_KEY with your reCAPTCHA Secret key obtained in Step 1
  • On line 6, you can adjust the score threshold, submissions with scores lower than this will be rejected (see this page for more information)

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