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_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 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_KEYwith 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".