Integrating PayPal and Google Forms

As I told a co-worker 20+ years ago, there is no better way to learn how to do something than having a problem to solve.  I need to solve a problem.  My WordPress Google Form plugin originally came from a project to help our Middle School Athletics Booster Club.  It solved the problem at hand but over time I’ve added more features to it, not because the Booster Club needed them but because people asked or they were interesting problems I was compelled to solve.

Our Booster Club now wants to have an Online Shop and after playing with a couple of eCommerce plugins, I’ve decided to go with WooCommerce.  The only thing really missing is the ability to sell a Booster Club Membership.  Our membership process isn’t easily handled by any of the eCommerce plugins I’ve looked at.  WooCommerce has a paid for add-on module that looks promising but I am reluctant to buy something without trying it first.

I’d really like to inject a PayPal “pay” button into WordPress Google Form and simply use it for our membership registration but doing so isn’t simple.  PayPal makes the Payment API look very simple in their documentation but from what I’ve read, it isn’t quite so simple.

With as much mucking around with the DOM I’ve done to Google Forms usiing jQuery I don’t think it would be too hard to insert a PayPal button in place of the Submit.  Handling all of the handshaking isn’t quite as simple though.  There doesn’t appear to be an easy solution but that is what makes for a good problem.  I’ll keep noodling on it, there has to be something I can.

WordPress Google Form v0.46-beta available

This afternoon I made a beta version of WordPress Google Form v0.46 available for download from this site. I have not posted this version to the WordPress plugin repository yet as I’d like to get some additional testing done on it before doing so.

There are a could of significant new features and a few bug fixes in this version.

  1. Columns!  You can now have your form rendered in columns.  To have a two column form, add the attribute columns=’2′ to your short code.
  2. When enabled, the simple math CAPTCHA will now appear above the Submit button instead of below it.
  3. Some minor CSS updates to support the new column feature.

Download the beta release and please let me know if you run into any issues.  You can see an example of multi-column support on my Multi-Column Test Bed Form.

Google Forms Beta (367 downloads)

Adding columns to a WordPress Google Form?

I’ve received a few queries as to how a Google Form could be styled such that the form would appear to have columns.  I’ve looked at the HTML and CSS that Google provides and if it can be done in CSS, it is beyond my current CSS skill set!

That said, I think it is an interesting question and I had looked at solutions using jQuery a few months ago.  I saw one jQuery plugin in particular that looked promising but didn’t have much time to really dig into it at the time.

I received another request for columns today so I took a look at the problem again to see how hard it would be.  Here is one of my example forms split into two columns to give an idea of what this might look like:

I am using the jQuery Columnizer plugin to automatically split the form into columns in conjunction with some other jQuery to manipulate the form and add some additional DIVs which will make additional styling easier.

I am generally pleased with how it came out.  I am going to play with it a little more before releasing an update but wanted to provide a preview in case anyone had an suggestions or questions.

WordPress Google Form v0.45 now available

This afternoon I released v0.45 of my WordPress Google Form plugin.  After validating the changes I made in the beta with a user who was dealing with a polluted jQuery script, it looks like moving the jQuery script into the WordPress footer action is the right answer.

You can find the update in the WordPress Plugin Repository or as an update on your WordPress Dashboard.

WordPress Google Form v0.45-beta available

I’ve made a subtle but potentially significant change to WordPress Google Form that I am looking for some people to try out.  The plugin generates a jQuery script on the fly to perform a number of actions depending on the shortcode attributes present and their setting.

Historically the jQuery script has been output as part of the form code but I’ve seen a number of cases lately where another plugin or in some cases, the theme, is manipulating the page content which ends up affecting the jQuery script.

In one case I looked at this weekend something, I am still not sure what, is injecting paragraph elements into the HTML after it detects a closing DIV tag.  For the most part this isn’t a big deal except, there are closing DIV tags in the jQuery script as part of the CAPTCHA functionality.  The CAPTCHA functionality injects a DIV which holds a second DIV and some other input elements and labels.  What ever is injecting the P elements into the HTML after every closing DIV is causing my script to have syntax errors when the page loads.

To solve this problem I have moved to loading of the jQuery script into the WordPress footer action.  In my testing making this change  has zero effect on the functionality but I’d like some other people to test it and provide me feedback.

Google Forms Beta (367 downloads)

WordPress Google Form v0.44 now available

This morning I released v0.44 of WordPress Google Form.  This is a minor update which addresses a problem reported in the WordPress Plugin Support Forum.  This update fixes the problem where the settings which are on by default, cannot be turned off.  You can find the update in the WordPress Plugin Repository or as an update on your WordPress Dashboard.

WordPress Google Form v0.42 now available

This morning I released v0.42 of my WordPress Google Form plugin. This version fixes a number of minor bugs, one major bug, and adds some new functionality. Of particular note is the ability to add a CAPTCHA to your Google Form to help reduce SPAM form submissions.

  • Added simple math based CAPTCHA support.
  • Reintroduced jQuery Validation for checking required fields.
  • Improved support for multiple forms on one page.
  • Fixed several bugs where CSS prefix, when used, was not output in some places.
  • Moved Debug control to its own tab on the settings page.
  • Added new Debug options to facilitate chasing down HTTP API issues.
  • Fixed bug where the CSS prefix, when used, was not being applied properly to elements which had more than one class. Only the first class was properly prefixed.

You can find the update in the WordPress Plugin Repository or as an Update on your WordPress Dashboard.

WordPress Google Form v0.41-beta available

This afternoon I made a beta version of WordPress Google Form v0.41 available for download from this site. I have not posted this version to the WordPress plugin repository yet as I’d like to get some additional testing done on it before doing so.

There are a could of significant new features and a few bug fixes in this version.

  1. Simple CAPTCHA!  You can now add a  simple math based CAPTCHA to a Google Form to help prevent SPAM form submissions.
  2. Improved support for multiple forms on one page.
  3. The return of jQuery validation for required fields.  This validation is optional but since I used the same jQuery plugin to implement the CAPTCHA solution, I figured I may as well make it available for required field validation again.  It works the same way it did in the initial plugin implementation until is was removed with the support for multi-page forms.
  4. New Debug options on a separate Settings tab.
  5. Several more bug fixes, notably for custom CSS prefixes.

Download the beta release and please let me know if you run into any issues.  You can see an example of the CAPTCHA and new Validation options on my Test Bed Form.

Google Forms Beta (367 downloads)

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.