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_KEYwith 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&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&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_KEYwith 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 **/
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".