Using reCAPTCHA

To use reCAPTCHA there are 3 things you need to do.

Step 1

Get your reCAPTCHA keys. To use reCAPTCHA you will need both a Site and Secret key, you can get these from Google for free by clicking here.

Step 2

Next, put the code for the reCAPTCHA into your for HTML. You should copy and paste the following code into your form at the location you would like the reCAPTCHA to appear. Replace the two occurrences of YOUR_SITE_KEY with your reCAPTCHA Site key obtained in Step 1.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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">
            <script src="https://www.google.com/recaptcha/api.js" async defer></script>
            <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
            <noscript>
              <div style="width: 302px; height: 352px;">
                <div style="width: 302px; height: 352px; position: relative;">
                  <div style="width: 302px; height: 352px; position: absolute;">
                    <iframe src="https://www.google.com/recaptcha/api/fallback?k=YOUR_SITE_KEY"
                            frameborder="0" scrolling="no"
                            style="width: 302px; height:352px; border-style: none;">
                    </iframe>
                  </div>
                  <div style="width: 250px; height: 80px; position: absolute; border-style: none;
                              bottom: 21px; left: 25px; margin: 0px; padding: 0px; right: 25px;">
                    <textarea id="g-recaptcha-response" name="g-recaptcha-response"
                              class="g-recaptcha-response"
                              style="width: 250px; height: 80px; border: 1px solid #c1c1c1;
                                     margin: 0px; padding: 0px; resize: none;"></textarea>
                  </div>
                </div>
              </div>
            </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">
            <script src="https://www.google.com/recaptcha/api.js" async defer></script>
            <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
            <noscript>
              <div style="width: 302px; height: 352px;">
                <div style="width: 302px; height: 352px; position: relative;">
                  <div style="width: 302px; height: 352px; position: absolute;">
                    <iframe src="https://www.google.com/recaptcha/api/fallback?k=YOUR_SITE_KEY"
                            frameborder="0" scrolling="no"
                            style="width: 302px; height:352px; border-style: none;">
                    </iframe>
                  </div>
                  <div style="width: 250px; height: 80px; position: absolute; border-style: none;
                              bottom: 21px; left: 25px; margin: 0px; padding: 0px; right: 25px;">
                    <textarea id="g-recaptcha-response" name="g-recaptcha-response"
                              class="g-recaptcha-response"
                              style="width: 250px; height: 80px; border: 1px solid #c1c1c1;
                                     margin: 0px; padding: 0px; resize: none;"></textarea>
                  </div>
                </div>
              </div>
            </noscript>
        </div>
    </div>
</div>

Step 3

Set up the element in process.php. 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
4
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);

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" as shown below.

1
<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY" data-theme="dark"></div>
<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY" data-theme="dark"></div>

Still having trouble? Head over to the forums.

Forums