Prevent spam with CAPTCHA in Forms Builder

This blog targets 2.x version of Forms Builder application. Integration with reCAPTCHA is available out of the box in new framework of Forms Builder from version 3.2. Here is help document for 3.2 CAPCHA component: http://www.mycampusinsight.com/support/Forms%20Builder%20Help/Content/CAPTCHA.htm

Public facing forms anywhere on internet are always targeted by spams. If you ever are designated recipient of Request for Information or Contact Us forms, I am sure you know how painful these spams can be sometimes. Most of the times there are automated bots looking for such forms on internet and submitting random texts. These bots can submit thousands of requests in matter of seconds.

CAPTCHA (Completely Automated Public Turing Test To Tell Computers and Humans Apart) is  program that prevents website against bots by generating and evaluating simple tests that humans can pass but current computer bots cannot. Following is example of one such CAPTCHA which asks for selecting images with cars in it. It would be easy for a person to select cars but a bot would not be able to select the same items.

reCAPTCHA_Sample

The process of CAPTCHA is very common and frustrating experiences on the web. It is painful enough for the majority of users, let alone the visually impaired or anyone who relies on assistive technologies such as screen-readers to access the web. However, sadly, CAPTCHA is absolutely vital in the fight against spam and most CAPTCHA solution do have provision for people relying on assistive technologies.

reCAPTCHA is one such solution offered by Google. Following steps will guide you on how you can integrate reCAPTCHA with Forms Builder.

1.   Configure reCAPTCHA

First, you will need a Site key, so head on over to https://www.google.com/recaptcha/admin. To gain access to this page you will need to be logged into a Google account. You will be asked to register your website, so give it a suitable name, and then list domains (for example campusmgmt.com) where this particular reCAPTCHA will be used. Subdomains (such as application.campusmgmt.com and forms.campusmgmt.com) are automatically taken into account.

When done you will be given Site Key and Secret key. Copy the Site key to be used in next step.

reCAPTCHA_Config_SiteKey

2.   Modify and copy code

Modify your custom Site key in below code on Line 1 and copy the result. This code is designed for Forms Builder, it will prevent submit button and display validation message on top if reCAPTCHA has not been completed. You can certainly customize the message on Line 11.

<span id=”captcha” style=”margin-left:100px;color:red” /> https://www.google.com/recaptcha/api.js function get_action(form) { var v = grecaptcha.getResponse(); if(v.length == 0){ var displayAllError = $(“#allerror”); if(displayAllError) displayAllError.append(”

  • * Please complete reCaptcha

“); return false; } if(v.length != 0) { document.getElementById(“captcha”).innerHTML=”Captcha completed”; return true; } } jQuery(function($) { var form = $(“form”), oldSubmit = form[0].onsubmit; form[0].onsubmit = null; $(“form”).submit(function() { if(get_action(this)==true) { oldSubmit.call(this); // preserve the context } else { setTimeout($(“#progressDialog”).dialog(“close”),500); return false; } }); });

 

3.   Create a new Forms Builder label field

Next, create a custom Forms Builder label field and copy above code with your Site key in Values section highlighted below. You may also want to check Hide Label on this field as Google will handle the display part.

reCAPTCHA_Label_FormsBuilder

4.   Integrate with Form(s)

Include this newly created label field in any Form. The code in label field will be self-contained and generic for your site so you can add the same field in as many Forms as you like. When you publish a sequence with this Form you should see reCAPTCHA at the place of this label. Following is one such example.

reCAPTCHA_Rendered Form

 

Conclusion

This is a very rough and ready implementation of reCAPTCHA for Forms Builder. You can customize the user experience completely by modifying HTML and JavaScript. CAPTCHA solutions by other company do follow very similar modal as described above, so you can still use the steps highlighted to implement any other solution.

-tushar ~tas

Leave a Reply

Skip to toolbar