Using reCAPTCHA v3

Quform PHPCustomisationCAPTCHAUsing 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.

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)

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