Using reCAPTCHA

Note: this guide requires Quform version 2.3.0 released on 15 February 2018, for older versions see this guide. You can check which version you are using at the top of the documentation/index.html file.

To use this guide with older Quform versions you can download this plugins.js file and upload it to quform/js/plugins.js to overwrite the file on your server.

To use reCAPTCHA 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. Choose whether you want to use a Standard or Invisible reCAPTCHA, both are supported by Quform.

Step 2

Next, put the code for the reCAPTCHA into the form HTML.

Standard reCAPTCHA

Copy and paste the following code into the form at the location you would like the reCAPTCHA to appear.

1
2
3
4
56
7
8
9
<div class="quform-element quform-element-recaptcha">
    <div class="quform-spacer">
        <label>Are you human? <span class="quform-required">*</span></label>
        <div class="quform-input">
            <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>            <noscript>Please enable JavaScript to submit this form.</noscript>
        </div>
    </div>
</div>
<div class="quform-element quform-element-recaptcha">
    <div class="quform-spacer">
        <label>Are you human? <span class="quform-required">*</span></label>
        <div class="quform-input">
            <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
            <noscript>Please enable JavaScript to submit this form.</noscript>
        </div>
    </div>
</div>
  • On line 5, replace YOUR_SITE_KEY with your reCAPTCHA Site key obtained in Step 1

Invisible reCAPTCHA

Copy and paste the following code into the form, for example above the submit button.

1
2
3
45
6
7
8
<div class="quform-element quform-element-recaptcha">
    <div class="quform-spacer">
        <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>
<div class="quform-element quform-element-recaptcha">
    <div class="quform-spacer">
        <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>
  • On line 4, 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
<script>
    window.QuformRecaptchaLoaded = function () {
        if (window.grecaptcha && window.jQuery) {
            jQuery('.g-recaptcha').each(function () {
                var $recaptcha = jQuery(this),
                    config = {};
 
                if ($recaptcha.is(':empty')) {
                    if ($recaptcha.data('size') == 'invisible') {
                        config.callback = function () {
                            $recaptcha.closest('.quform').data('quform').submit();
                        };
                    }
 
                    $recaptcha.data('recaptcha-id', grecaptcha.render($recaptcha[0], config));
                }
            });
        }
    };
</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),
                    config = {};

                if ($recaptcha.is(':empty')) {
                    if ($recaptcha.data('size') == 'invisible') {
                        config.callback = function () {
                            $recaptcha.closest('.quform').data('quform').submit();
                        };
                    }

                    $recaptcha.data('recaptcha-id', grecaptcha.render($recaptcha[0], config));
                }
            });
        }
    };
</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
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".

Adding support for users that don’t have JavaScript enabled

The Invisible reCAPTCHA requires JavaScript and has no support for browsers without JavaScript enabled.

reCAPTCHA can only provide the optimal experience in terms of security and usability with JavaScript enabled. However, if supporting users who have disabled JavaScript is important for your site, you can enable the alternative challenge with the following steps. Navigate to the admin console and move the security preference slider to “easiest for users”. Keep in mind that with this setting reCAPTCHA won’t be able to use all of its security features.

reCAPTCHA security preference easiest

Then, find the following line of code within the reCAPTCHA HTML that you added to the form in Step 2.

1
<noscript>Please enable JavaScript to submit this form.</noscript>
<noscript>Please enable JavaScript to submit this form.</noscript>

And replace it with the code below.

1
2
3
4
56
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<noscript>
  <div>
    <div style="width: 302px; height: 422px; position: relative;">
      <div style="width: 302px; height: 422px; position: absolute;">
        <iframe src="https://www.google.com/recaptcha/api/fallback?k=YOUR_SITE_KEY"                frameborder="0" scrolling="no"
                style="width: 302px; height:422px; border-style: none;">
        </iframe>
      </div>
    </div>
    <div style="width: 300px; height: 60px; border-style: none;
                   bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px;
                   background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px;">
      <textarea name="g-recaptcha-response"
                   class="g-recaptcha-response"
                   style="width: 250px; height: 40px; border: 1px solid #c1c1c1;
                          margin: 10px 25px; padding: 0px; resize: none;"></textarea>
    </div>
  </div>
</noscript>
<noscript>
  <div>
    <div style="width: 302px; height: 422px; position: relative;">
      <div style="width: 302px; height: 422px; position: absolute;">
        <iframe src="https://www.google.com/recaptcha/api/fallback?k=YOUR_SITE_KEY"
                frameborder="0" scrolling="no"
                style="width: 302px; height:422px; border-style: none;">
        </iframe>
      </div>
    </div>
    <div style="width: 300px; height: 60px; border-style: none;
                   bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px;
                   background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px;">
      <textarea name="g-recaptcha-response"
                   class="g-recaptcha-response"
                   style="width: 250px; height: 40px; border: 1px solid #c1c1c1;
                          margin: 10px 25px; padding: 0px; resize: none;"></textarea>
    </div>
  </div>
</noscript>
  • On line 5, replace YOUR_SITE_KEY with your reCAPTCHA Site key obtained in Step 1

Still having trouble? Head over to the forums.

Forums