CAPTCHA Support for wpGForm

Over the past year one of the most common requests I’ve received is to add some sort of CAPTCHA support to WordPress Google Form.  I don’t deny the need for CAPTCHA but it has never been a real high priority for me personally as I didn’t have a pressing need and more importantly, because Google Forms don’t support CAPTCHA, there wasn’t an easy and/or obvious solution.

However, recently my Help and Support Form has been receiving quite a few SPAM submissions to the point it is annoying.  So now I have a vested interest in finding a solution.

Because Google Forms don’t support a CAPTCHA solution, anything I do has to be done on the WordPress side as part of the short code processing.  This makes it a bit of a challenge because the only way to support CAPTCHA is to add more content to a form.

Essentially what I need to do is generate HTML and insert it into the form and then process it and validate it upon form submission which then can’t progress if the CAPTCHA validation fails.  There are quite a few different CAPTCHA solutions, I wanted to find one that would integrate well with how WordPress Google Form works.

Since I needed to modify the HTML I immediately thought a jQuery solution would be the best bet as (a) I am already using jQuery in several places and (b) what better way to manipulate HTML than using jQuery!  A Google search yielded this list of 10 jQuery CAPTCHA plugins.  After looking through them I leaned toward QapTcha however in investigating it, using QapTcha would be a little more involved that I wanted.  I also considered jQuery Real Person but eliminated it as too cumbersome to integrate.  I may go back and look at these two again as both are interesting but both are more invasive than I was willing to take on right now.

I subsequently found another list of 10 jQuery CAPTCHA plugins.  This list had some overlap with the other list but one entry caught my eye:  #6 –  jQueryValidate Plugin plus PHP equals CAPTCHA  It caught my eye because I had previously used the jQuery Validate plugin within WordPress Google Form for validating required fields (it was eliminated later when it was no longer necessary as validation came from Google when I added support for multi-page forms).  After reading the article, I realized I could very easily implement a similar solution and more importantly, I could resurrect the jQuery Validate code from an earlier version of the plugin.

So that is where I am headed.  Getting an initial CAPTCHA on the page was pretty simple.  What proved to be the challenge was to only display the CAPTCHA when the Submit button is present.  It took me a little while to figure out the jQuery selector but as I write this post, I have the basics of a simple math CAPTCHA working for both single page and multi-page Google Forms.

I have decided to add the fields using the same classes that Google uses for their forms so any styling done using the Google CSS rules will also apply to the CAPTCHA fields.

If you want to test this out before I release it feel free to get in touch with me and I’ll make an early build available.  By no means is this solution fool proof but it should help eliminate some form SPAM and that is what I am currently trying to do.

12 thoughts on “CAPTCHA Support for wpGForm

  1. Very interesting Mike. Glad you got it going 😉

    I would like to play with it. I also like the validation. Is this to validate email address fields for example?

    • Sorry for the delayed response, this comment was flagged as spam. I posted a response to a similar query on the WordPress Support Forum over the weekend.

      This is a pretty advanced topic that has come up before and I don’t have a good solution for. The jQuery validate plugin is pretty powerful and is excellent for doing form validation but it is difficult to create form specific rules in the general case with respect to Google Forms.

      What I mean by this that is Google Forms doesn’t know that you’re asking your user for an email address. To Google Forms, you simply have a text entry box with a label and possibly a help message. The form element for an email address is no different than the form element any other text input. This makes creating a general purpose rule hard and right now and beyond the scope of what WordPress Google Form can do.

  2. I’d love to get the instructions for adding your captcha to a google form..and hope they are easy to understand.

  3. And where exactly do you copy captcha=’on’ onto? Better yet, what and where is the gform code?… The source code?

    • Are you using my WordPress Google Form plugin or are you simply embedding a Google Form into your WordPress post? If you are embedding it then my plugin won’t help you and there isn’t a CAPTCHA solution for Google Forms that I am aware of. If you are using my plugin, then the captcha=’on’ is part of the gform short code. See the examples here.

  4. I WOULD LIKE TO SEND ME THIS CAPTCHA WITH INSTRUCTIONS FOR MY GOOGLE FORM.

    • What are you looking for? The CAPTCHA only works when integrating your Google Form with WordPress, it isn’t a generic CAPTCHA solution for all Google Forms. If you’re using WordPress then my plugin will work for you, you simply need to install the plugin, setup your form, and enable CAPTCHA for it. The plugin does the rest.

  5. Hi Mike, Sorry i am confused. i am using wordpress.com ..then ¿will the plugin works for the Form?…i think that it is not possible insert plugins with wordpress.com ¿is it right?

  6. HI , but this provides only client side validations. Once JS is turned off again there is no captcha.

    • Yes, that is correct. However if you turn JS off, a number of other things won’t work either, for example, check boxes. Because Google defines check boxes using Python syntax and WordPress is PHP based, there is a jQuery script which runs to make them compatible. So if you run with JS off, I am not sure this plugin will be of much use to you.

Leave a Reply to bikuCancel reply