CAPTCHA is working!

I work much better in the early morning than I do at night.  Always have.  Last night I was working on CAPTCHA support for WordPress Google Form and for the life of me, couldn’t figure what was causing a jQuery syntax error.  Granted, working on my laptop in my truck in the dark while at my daughter’s soccer practice isn’t the ideal work location but that was my situation when I had some cycles to look at it.

This morning I looked at it again, made one minor change and the syntax error was obvious.  Syntax error fixed and my CAPTCHA solution appears to be working.  I am going to clean up some debug code and then post a beta release for testing.  Hopefully I will have this formally released in the next day or two.

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.

What to do when WordPress Google Form doesn’t work

So you’ve designed a Google Form and you’re happy with the layout of it.  Now you’re ready to integrate it with your WordPress site and you’ve decided to use the WordPress Google Form plugin.  Awesome.  Looks like it will do exactly what you want:  Easily create custom forms and gather data in a Google Docs spreadsheet for easy collection and dissemination of data.

So you install WordPress Google Form and get your shortcode set up and you visit your page to see the result.  In most cases, as long as the short code is properly set up, WordPress Google Forms works as advertised.  98% of the support requests I receive are for help with styling the form using CSS to make it match the host site better.

However, from time to time a user runs into an issue where WordPress Google Form simply doesn’t work.  This usually manifests itself in one of two ways:

  1. The form is never displayed and instead an error message that indicates the form couldn’t be retrieved and try reloading the page.
  2. The form displays properly but doesn’t submit correctly and the form results are never posted to the Google Docs spreadsheet.

Case #1 usually indicates one of two things:

  1. Most frequently the short code isn’t properly formatted.  This takes on all sort of possible problems, the most common one is when the WordPress Visual Editor converts the the URL to the form into a hyperlink.  There are other errors, such as the wrong quote character around attribute values but the hyperlink problem is by far the most common occurrence.
  2. Your web hosting environment doesn’t support the WordPress HTTP API.  This isn’t too common but it does come up from time to time.  It is very common on “free” hosting service packages.  Frequently these plans have fopen() and other remote transports disabled.  The only solution here is to move to a hosting plan which supports the WordPress HTTP API.
  3. A firewall prevents access to Google for remote requests.  I’ve only run into this once but it happened and it was very difficult to find.  In the end, I didn’t find it, the user did but that was after we had done a bunch of debugging to figure out what was going on.

Case #2 usually indicates a problem with Apache’s ModSecurity.

I’ve run into this a couple of times and made some pretty significant changes to the plugin to account for ModSecurity but there is still a chance it can kick in IF the user is being asked for a URL or a similar value which ModSecurity doesn’t like.  Right now there isn’t much that can be done when this happens except to not request URL values or to instruct the user to strip off the “http://” (or other) prefix.

In addition to the Debugging aid I’ve added to the plugin, I recently found the Core Control plugin.  Core Control is a very useful plugin for chasing down the sort of problems I’ve encountered with WordPress Google Form.  It can show which transports your server supports for the WordPress HTTP API and even has the ability to disable some of them to chase problems down.

If you run into problems, you can always use my Help and Support Form but also give Core Control a shot to see if it can help identify where the problem might be.

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.

Debugging a Theme conflict with wpGForm

About a week ago I was contacted through my WordPress Google Form Support and Help form by a user of my WordPress Google Form plugin.  The symptoms he described sounded very much like the problem I recently chased down with ModSecurity.  I figured this must be another use model that I hadn’t accounted for.

Fortunately and unfortunately, I was wrong.  After going through the usual process of trying to narrow down the problem (using wpGForm debug mode, disabling all plugins, etc.), we were able to isolate the problem to what I suspected was a theme issue.    Ugh.  A lot of times people don’t want to or can’t change their theme. I wanted to swap the theme for TwentyTen or TwentyEleven but that wasn’t really possible as the site is live and being used.

Now what?  Since the user couldn’t switch the theme and we ended up putting a copy of his theme in a development area and were able to replicate the problem.  Whew – the helped a lot.  I could switch back and forth between his theme and TwentyTen in debug mode and compare the results.

It took a while to track it down but it turns out the theme, Unite from Paralleus, has a jQuery script which scans the page content for Submit Buttons, removes the buttons, and rebuilds them to match the theme style.  In theory this is actually rather clever and makes the submit buttons attractive although I am not sure why it couldn’t be done with CSS classes, I didn’t look at it closely enough.  However, in practice when the submit buttons are reconstructed, they don’t contain all of the attributes they started with so they are not equivalent.  And this matters when submitting a Google form.  A lot.

A Google form just can’t be submitted with a submit button.  It needs to be submitted with the submit action having a named parameter and a value.  Google uses the named parameter and it’s value to support multi-page Google forms.  It is this named parameter and value that Unite strips off effectively making the form incomplete which causes Google to rejects it as an incomplete form.  Because Google rejects it, WordPress Google Form simply redisplays the form again.  To the end user it looks like the form was never submitted.

As a plugin developer, I am not sure what the right answer is here.  Actually, that isn’t true.  I do know the right answer is.  The theme should be fixed but I have zero control and influence over that happening.  To solve the problem in the short term, I have created a hack of sorts that works around this problem with the Unite theme but that is in a one-off build for testing.  What should I do to my plugin?  Add a unitethemehack=’on’ attribute?  Right now that is probably the best option although it feels pretty dirty.  The code to enable this hack is trivial because Unite won’t muck with submit buttons which have the noStyle CSS class applied to them.  At least there is a work-around.  The hack I added to WordPress Google Form is inserting class=”noStyle” to any submit button in the Google Form HTML.

But I am wondering how many more scenarios like this will I run into?  Is there a more general purpose solution?  Probably.  I’ve been thinking about a “find and replace” solution as I was asked about doing something similar previously to rename all of the submit buttons as something else.  I’ll keep noodling but for the time being, I think I’m going forward with a new attribute.

WordPress Google Form v0.38 released

Today I released v0.38 of my WordPress Google Form plugin.  If you look at the change log you’ll see I actually released it a couple times today (ugh).

Release v0.36 addressed a bug when the Browser Check option was enabled.  I susquently released v0.37 because I didn’t tag v0.36 correctly and the WordPress Plugin Repository didn’t see the update.  I then released v0.38 because I left some debug code active that I used to chase down the problem I originally fixed in v0.36.

I apologize for the multiple updates, it certainly was not my intention.  You can find v0.38 on your Dashboard Update or in the WordPress Plugin Repository.

phpHtmlLib v2.6.5.3569 released

This morning I release an update to phpHtmlLib which resolves an issue for users still running sites based on PHP 5.2.  The recent update to address early PHP 5.3.x releases contained code which was not 5.2.x compatible.  This update addresses that problem.  You can find the update on the Download and Installation page or as a Dashboard Update from the WordPress plugin repository.

wp-SwimTeam v1.36.973 released

This morning I released v1.36.973 of wp-SwimTeam.  This build addresses a bug which prevents Users from signing up for job from the Jobs tab.

Yesterday I released v1.35.971 which addressed a problem when there were zero swimmers (aka a new installation) in the system.  This bug caused some of the pages to display oddly for the Roster and list of Swimmers.  Lastly, I enhanced the registration email such that it includes the Optional Field data defined for a swimmer.  This enhancement is only included when using HTML formatted email.  The Plain Text email continues to be very brief in nature.

You can find the latest version of wp-SwimTeam on the Download and  Installation page or in the WordPress Plugin repository.  I also released an update to phpHtmlLib yesterday which addresses the very odd situation which resulted in blank pages within the wp-SwimTeam Dashboard.

phpHtmlLib updated to v2.6.4.3566

I received another report from a user experiencing blank pages on some of the wp-SwimTeam tabs.  I had run into this previously and determined it to be a PHP issue in the early 5.3.x releases (.1 and .2 for sure).  PHP was terminating with a fatal error which resulted in an incomplete HTML page.  If you looked at the page source for these “blank” pages you would see nice HTML simply terminate with no closing tags which obviously resulted in missing content.

It turns out that phpHtmlLib was the culprit (which I suspected) and it was behavior that is inconsistent between releases of PHP including PHP4.

Many of the widgets in phpHtmlLib build upon one another by extending classes.  It is not uncommon to find some classes that are extended 3-4 levels.  No problem, that is one of the beauties of classes.  The problem came from some classes having constructors where some of their descendants did not AND the grand child (or great grand child) class referenced the parent constructor.

Because phpHtmlLib originated in PHP4, all of the syntax remains in PHP4 format including the use of class constructors.  The following example illustrates the problem I had run into:

<?php
/* vim: set expandtab tabstop=4 shiftwidth=4: */

class Sample_A {
    /**
     * Constructor
     */
    function Sample_A() {
        printf('<h3>%s::%s - Sample A Constructor</h3>', basename(__FILE__), __LINE__);
    }
}

class Sample_B extends Sample_A {
    /**
     * No Constructor!
     */
}

class Sample_C extends Sample_B {
    /**
     * Constructor
     */
    function Sample_C() {
        printf('<h4>%s::%s - Sample C Constructor</h4>', basename(__FILE__), __LINE__);
        parent::Sample_B() ;
    }
}


ini_set('display_errors','stdout');
error_reporting(E_STRICT | E_ALL) ;

printf('<h2>%s::%s - Instantiating Sample A</h2>', basename(__FILE__), __LINE__);
$A = new Sample_A() ;
printf('<h2>%s::%s - Instantiating Sample B</h2>', basename(__FILE__), __LINE__);
$B = new Sample_B() ;
printf('<h2>%s::%s - Instantiating Sample C</h2>', basename(__FILE__), __LINE__);
$C = new Sample_C() ;

?>

Running the code above results in the following with certain versions of PHP (e.g. 5.3.1).

<h2>sample.php::33 - Instantiating Sample A</h2>
<h3>sample.php::9 - Sample A Constructor</h3>
<h2>sample.php::35 - Instantiating Sample B</h2>
<h3>sample.php::9 - Sample A Constructor</h3>
<h2>sample.php::37 - Instantiating Sample C</h2>
<h4>sample.php::24 - Sample C Constructor</h4>

Fatal error: Call to undefined method Sample_B::Sample_B() in /var/www/clients/client3/web44/web/sample.php on line 25

Why does this happen? It turns out that earlier (and now later) versions of PHP would handle the missing constructor in Sample_B implicitly. Because some constructors are fairly complex and pass multiple arguments, I don’t really want to add all of the intermediate constructors just because some versions of PHP don’t handle the constructor chain properly (or at least consistently). So I came up with the following solution:

class Sample_B extends Sample_A {
    /**
     * Constructor - needed for early PHP 5.3.x compatibility
     *
     * @param Parent Constructor
     * @param array of Constructor Arguments
     */
    function Sample_B() {
	    call_user_func_array('parent::Sample_A', func_get_args()) ;
    }
}

Adding this constructor to the Sample_B class results in the following (which is what I want):

<h2>sample.php::39 - Instantiating Sample A</h2>
<h3>sample.php::9 - Sample A Constructor</h3>
<h2>sample.php::41 - Instantiating Sample B</h2>
<h3>sample.php::9 - Sample A Constructor</h3>
<h2>sample.php::43 - Instantiating Sample C</h2>
<h4>sample.php::30 - Sample C Constructor</h4>
<h3>sample.php::9 - Sample A Constructor</h3>

There is a chance there are more places within phpHtmlLib that could have this problem with some versions of PHP5.3.x. Now that I know how to solve them, fixing them is pretty simple and very quick. If you run into any blank pages within wp-SwimTeam, let me know ASAP and more than likely a solution like the above within phpHtmlLib will address the issue.

The phpHtmlLib plugin has been updated to v2.6.4.3566 and committed to the WordPress plugin repository.

wp-SwimTeam v1.32.931 now available

After a few days of testing on the MacDolphins site without any issues, I have decided to go ahead and release v1.32.931.  There are no changes between this build and the beta build except the version number and the removal of the beta tag.

The primary feature in this update is new SQL which addresses performance problems when working with user data, particularly when is relates to swimmers.  The Job Commitment Report was particularly noticeable in how slow it was (4-5 minutes) if it completed at all.  The SQL addresses that performance problem however since it used extensively across the plugin I wanted to make sure I hadn’t broken something else.

You can find the update on the Download & Installation page or in the WordPress Plugin Repository.