ReCaptcha Setup for Simple Post forms

Implementing reCaptcha involves loading the google recaptcha api script in your form html, checking the captcha when submitting the form and only allowing the POST if the captcha passes, and sending the captcha token to the MOW Scheduler server for verification. (this last step is necessary because otherwise a spammer could make a version of the form that bypasses the client-side check).

Basic Idea

here's what you need to do:

1. enable ReCapcha support in your MOW Scheduler setup on the Setup / Volunteer Application page, and make a note of your reCaptcha "site key" that is shown on that page
2. add an empty div to your form w/ class="g-recaptcha" and attribute data-sitekey="your_site_key" (plug in the site key you found in step 1)
3. in javascript, define a click handler for the submit button that only passes (returns true) if there's a value in hidden field #g-recaptcha-response created by the recaptcha challenge.
4. load the recaptchaV2 api.js file
5. test (see below)

Sample Code

The following code adds reCaptcha V2 support to a simple volunteer application form modeled after our own "hosted" Volunteer Application form. This sample assumes your form is styled using Bootstrap, but you can easily change the styles and classes (with the exception of the g-recaptcha class on the hidden div). Add this code to the end of your form in place of your current submit button. Plug in your own "site key" from the setup page in MOW Scheduler in the data-sitekey attribute of the hidden div.

    <!-- optional reCaptcha support -->
    <h3>And Finally... </h3>
    <div class="form-group">
      <div class="col-sm-4">
        Prove you're a real person.
      </div>
      <div class="col-sm-8">
        <!-- supply an empty div to hold the recaptcha widget -->
        <div class=" g-recaptcha" data-sitekey="your_site_key" ></div>
        <div id="captchaerror" style="color: red"></div>
      </div>
    </div>

    <input class="btn btn-primary" id="submitbutton" type="submit" value="Submit Application">

    <script>
      var cclickhandler = function(e) {
        // don't let us submit unless we have a captcha token.
        // we'll ALSO check this on the server side
        var googleResponse = document.getElementById("g-recaptcha-response").value;
        if (!googleResponse) {
            document.getElementById("captchaerror").textContent ='Please check the reCaptcha box' ;
            e.preventDefault();
            return false;
        } else {
            document.getElementById("captchaerror").textContent =' ' ;
            return true;
        }
      };
      document.getElementById("submitbutton").addEventListener("click", cclickhandler, false);
    </script>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <!-- end optional reCaptcha support -->

Now you should see the "I'm not a robot" checkbox on your form page, and when you click it you should get a green checkmark that indicates you passed the captcha challenge.

Note: there are other ways to implement reCaptcha V2 as described in the google recatpcha documentation, and these should all be compatible with MOW Scheduler. But fair warning: some (specifically, binding the recaptcha challenge to the submit button) may interfere with other code on your page such as jquery validation or html5 validation. The sample code above seems to be relative easy to integrate (knock on wood!) with an existing page.

Testing

If you temporarily set the Test_Mode hidden field in your form to value="1", you can submit and see what's happening on the server side without creating new Contact records. The test mode output should indicate that the Captcha Check passes and there should be along random-looking string in the Captcha Token field.

You should verify that you can't submit the form unless the captcha checkbox is checked, and that other javascript features on your page (such as required field checks) are working along with the reCaptcha check.