Category Archives: jQuery

10.17.12
by

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.

09.14.12
by

WordPress Google Form v0.39 released

This morning I released v0.39 of my WordPress Google Form plugin.  This update addresses the corner case exposed when using WordPress Google Form with the Unite theme from Paralleus.  To solve this incompatibility I’ve introduced a new short code attribute called unitethemehack which defaults to off.  By turning it on, WordPress Google Form will modify the Google Form HTML to protect the Submit button(s) from being manipulated by the Unite theme.

You can find this update in the WordPress plugin repository or as an update on your WordPress Dashboard.

05.30.12
by

WordPress Google Form v0.29 now available

Today I pushed out wpGForm v0.29.  This version adds one new feature and addresses an unusual problem which prevents the custom confirmation page, either AJAX or redirection, from loading properly.

In some cases, it appears that a plugin or theme, through the use of a filter (likely the_content or wpautop), was inserting paragraph tags into the content which by itself isn’t a problem, however wpGForm adds a jQuery script to the content during processing, so the jQuery script portion of the content ended up with paragraph tags in it.  This results in Javascript which won’t parse correctly and of course it never runs.  I have updated the plugin to generate the jQuery script as a single line of text where it previously spanned several lines for readability purposes.

Based on several requests, I have added a new short code attribute, sendto=<email address>, which when used in conjunction with email=’on’, will send a form submission note to the specified email address instead of the blog administrator (who is still bcc’d for backup purposes).

The update should appear on your Dashboard shortly and is also available from the WordPress Plugin Repository.

03.22.12
by

wpGForm now has email notification

I’ve received a couple of requests to have an email notification sent out when a form is submitted. Today I released v0.26 which supports a new attribute (email=’on|off’) on the gform shortcode. By default email notification is off but when set to on, an email to the blog administrator will receive an e-mail indicating a form was submitted. The email also contains the URL for the form, and date and time the form was submitted.

While I was working on this version, I also decided to see if I could make the custom confirmation work like my original implementation which did not use a Javascript redirect.  I had switched to the redirect when I added support for multi-page forms because the mechanism I was using previously no longer worked.

Email can be sent in either HTML or Plain Text formats, there is a new option on the settings page.  By default email notifications are sent in HTML format.

The v0.26 version switches from a Javascript redirect to an Ajax page load using jQuery.  In my testing it seems to work pretty well and is much less intrusive than the redirect was.  Let me know if you run into any problems with it.

The v0.26 release is now available from the WordPress plugin repository and an update will appear on your WordPress Dashboard.

02.04.12
by

WordPress Google Form update – v0.22

Yesterday I received a report from someone using WordPress Google Form that their checkboxes weren’t working. This was very confusing to me because last weekend I spent a bunch of time fixing and testing the checkbox problem.

It turns out the jQuery script which fixes the checkboxes to work with PHP was never running. Why wasn’t it running? Because jQuery wasn’t ever loaded. Why wasn’t jQuery loaded? Because wpGForm never loaded it! It turned out the website which reported the problem was using a theme that doesn’t use jQuery and therefore never loaded it.

Well the WordPress Google Form plugin, which needs jQuery, didn’t load it either. I (and I can only assume other people) was never seeing a problem because either the theme or another plugin was loading jQuery.

The v0.22 update corrects this problem which was somewhat of a corner case, but a problem none the less.

01.17.12
by

WordPress Google Form v0.15 released

This morning I fixed the problem with the default settings which caused any of the settings which are on by default, to be on no matter what.  Even when the user would turn them off, the plugin would ignore the user setting which was being saved correctly, just ignored being ignored by the during the default check.

I also finished removing the jQuery-Validate plugin as it is no longer used as well as a bunch of debug code and functions which are no longer used.  Updates should appear on your Dashboard soon and it is already available for download in the WordPress plugin repository.

01.12.12
by

WordPress Google Form v0.12 is out

Yesterday I committed and tagged the v0.12 release of my WordPress Google Form plugin.  It is available from the WordPress plugin repository.  The main feature of this release is support for multi-page Google Forms.  The changes made to support multi-page forms should also enable use of fields that have optional answers.

There is still some leftover code from the old validation process that I was reluctant to completely remove until I know for sure this new architecture is working in more use cases than I have to test with.  There will likely be another update that is nothing more than a code clean up in a couple weeks unless someone reports a problem.

01.08.12
by

wpGForm v0.11 beta update

This morning I posted an updated wpGForm v0.11 beta release.  This updated beta introduces two new shortcode attributes:

  • title=’on|off’ – Show (default) or remove the Google Form title.  The title is often redundant with the WordPress post or page title, this attribute will allow you to remove the title from the HTML displayed within the WordPress context.
  • maph1h2=’on|off’ – Map H1 elements (usually just the title) on the Google Form to H2 elements.  This allows you to retain the form title from the Google Form but map it’s H1 tags to H2 tags which prevents multiple H1 tags from appearing on the WordPress page (which I understand is an SEO no-no).

This build also includes default CSS definitions for div.ss-q-help classes.  Why the help text appears adjacent to the question as opposed to on top of it is a question comes up pretty frequently.  This CSS makes the output more consistent with how Google presents the form so I’ve decided it should be the default.

label.ss-q-help {
    display: block;
}

I’ve also started removing debug and obsolete code.

[download#7]
01.07.12
by

wpGForm v0.11 beta

I am currently running a beta version of wpGForm v0.11 here on my site.  The big change for this version if the support for multi-page Google Forms.  You can see how they work using my Sample Multi-Page Google Form.

I am looking for some people to test this version and provide feedback.  If you can check it out and provide some feedback I’d really appreciate it.  There are quite a few changes in this version due to the rearchitecture required to support multi-page forms.  There shouldn’t be any changes to what is actually rendered for the user.

This version also fixes the confirmation page bug that has been present when a custom confirmation page wasn’t specified.  The behavior of the custom confirmation page is slightly different too in this version.

[download#7]
01.06.12
by

Mutli-Page GForm Update

I’ve been trying to find a solution that will allow wpGForm to support multi-page Google Forms.  I realize that this is a pretty important feature for people who use Google Forms and my lack up updates or news isn’t from lack of effort!  I’ve tried a number of things, each of which hasn’t worked out.

The single page Google Form works pretty well but even with it, there are still a couple of minor nits (e.g. properly handling optional fields).  I’ve thought that if I can find a better way to handle multi-page forms that I may also be able to eliminate the limitations that single page forms have too.

The problem with trying to do what I am trying to do is that Google Forms aren’t really designed to be anything but their own entity.  Yes, you can embed them with an IFRAME tag and they will work correctly but there is no way to modify the HTML in an IFRAME due to Cross Site Scripting (XSS) security concerns.  Yesterday I thought I had a clever solution that used jQuery and AJAX to load to the result from a form submission using a small script within the plugin to submit the form and then WordPress could load the results from the plugin script eliminating the XSS concern but I couldn’t get it to work reliably (and it was slow).

I’ve been using wp_remote_get() to retrieve the contents of the Google Form since I started this plugin.  Why it never occurred to me (until last night) to use wp_remote_post() to submit the form to Google I have no idea.  This was one of those “Doh!” moments we (at least I do and I am pretty sure I am not alone) have when you simply get caught up making the problem much harder than it needs to be.

This morning I noodled on this while I was at the gym and from my preliminary experiments, it looks like it is going to work.  No promises or commitments yet but this path is the most promising I’ve explored since I’ve started looking at the multi-page form problem.  So far I’ve been able to submit a multi-page form however only the first page of the form is styled correctly and the confirmation page isn’t working properly either.  I think both are solvable.

I am posting this because this question comes up a few times a week and I am sure the lack of progress I’ve demonstrated may result in lack of confidence for the plugin.

Assuming I get this flushed out in the next day or two, I’d like a couple volunteers to test the plugin before I release and update through the WordPress plugin repository.  Please let me know if you’d be interested in testing an early build.