Tag Archives: jQuery

06.20.13
by

Advanced Validation with WordPress Google Form

One of the most common requests I receive is the desire to validate fields on a Google Form. Google provides some basic validation (required or not) but there really isn’t a way to ensure that if you request an email address that the user actually provides a valid one. Similarly, there is a need for URLs, numbers, and other specific fields.

I’ve been using the jQuery Validate plugin (which looks to have a new  home) for a while now to validate required fields and in some cases, email addresses, and most recently, CAPTCHA support.

A number of people have asked me about extending the validation to include any field.  I have been reluctant to do this for several reasons:

  1. The jQuery Validate plugin needs to know which fields (by name or id) it is going to validate.  There isn’t an easy way to pull these out of the Google Form HTML.  It could be done on a single page form but because Google supports multi-page forms, they only way to find the information we need is to visit every page of the form.  This isn’t easy to do programatically.
  2. The rules needed to be written in jQuery syntax.  While the syntax isn’t difficult, if I allow entry of Javascript the potential for syntax errors (which would break the plugin) is very high.

For these reasons I’ve kept this on the back burner for a while.  However, a couple recent requests got me thinking about it again and it would be useful for a project I am doing for my daughter’s soccer team.  So I decided to dig into it.

I don’t think it is possible to make it completely foolproof however I did want to make it as simple as possible.  I decided to add a new Meta Box to the Custom Post Type editing screen which “helps” the user define new rules.

The key to making rules which accomplish something is getting the name attribute for the form entry element that needs to be validated.  There really isn’t a good way to do this other than to look at the HTML source.  I like FireBug with Firefox but both Chrome and IE have the ability to easily inspect an element.

GForm_SS_48Now that I know my input element’s name (entry.409811816) I can set up my new rule.

If you have been using WordPress Google Form the first thing  you’ll notice is the Form Editing screen has changed quite a bit.  The form was getting very long and cluttered so I have moved some of the lesser used options to a new Meta Box on the right hand side leaving just the critical or frequently used options on the primary Meta Box.

There is a new Meta Box just for Validation.  This Meta Box lets you add a series of fields where you can enter the name, the type of check to perform, and if needed, a check value.

GForm_SS_49Once the validation fields are set up, you can see the effect as you fill out a form.

GForm_SS_50 GForm_SS_51I am going to clean up a few things and make a beta release available for people to test with.  I think this functionality is pretty cool and it was a bit of a challenge to (a) get it working and (b) find what I think is a viable usage model.  As always, feedback is welcome.

 

 

 

05.16.13
by

WordPress Google Form v0.50 now available

WordPress v0.50 is now available.  This update fixes a jQuery syntax error which occurred when validation was but user email and CAPTCHA were off.  Along with the bug fix I also added CSS to hide the “Never submit passwords through Google Forms.” message that Google has added to forms.

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

05.14.13
by

WordPress Google Form v0.49 released

A pretty serious issue was reported in the Support Forum this afternoon.  I have found and fixed the bug and pushed out an update.  While I was at it, I also adjusted the default CSS so the Help Text for form fields is visible. I had inadvertently hidden it with CSS in the v0.46 release.

The update will appear on your WordPress Dashboard or you can find it in the WordPress plugin repository.

05.14.13
by

WordPress Google Form v.0.47 released

This morning I pushed out v0.47 of WordPress Google Form.  This update fixes a problem in which various combinations of options would result in jQuery syntax errors which in turn resulted in Javascript errors.  In some cases, the plugin would not properly complete, particularly when using checkboxes and/or custom confirmation pages.

You will see the update on your WordPress Dashboard or you can find it in the WordPress plugin repository.

05.09.13
by

WordPress Google Form v0.46 is finally out!

After 19 beta releases, the first one being back on November 14, 2012, this afternoon I released v0.46 of WordPress Google Form.  This update represents a significant change in how the plugin works.  The plugin now defines a Custom Post Type for defining forms which is much easier to use than the old shortcode.  The shortcode was getting very complicated with all of the options.

The Custom Post Type functionality is supported by a new shortcode, wpgform, which is much easier to work with as it only has one argument, the Post Id of the form.  The original gform shortcode will continue to work however it will not received new features (e.g. columns) and at sometime in the future, I will likely deprecate it.

During the development process of v0.46, Google made a significant change to Google Forms.  The change required re-work of a number of features, support for multi-page forms being the most important and hardest to figure out.  Things changed on Google’s side several times as they rolled out the update to Google Forms.  The most recent change restored the ability to control the language of certain parts of the form immediately after I had spent several days working out a jQuery solution to allow text replacement on certain form elements.

There has been quite a bit of testing of this update over the past few months and I want to thank the people who tested the early releases and reported problems.  In particular I want to thank several people who trusted me with access to their server in order to chase down and debug some very odd problems.  In the end , I think I was able to resolve all of them.

The only known issue at this point is with respect to IE7 support.  I cannot get the validation support to work with IE7 which means the CAPTCHA doesn’t work properly either.  If someone can figure it out I am happy to incorporate a fix but I have exhausted by ability to chase down an odd problem with an ancient browser.

The number of new features and fixes is pretty long, I recommend reading the v0.46 release notes here.

You can find the update in the WordPress plugin repository or as an update on your WordPress Dashboard.  If you have any problems, I have retooled my Help and Support form to mimic the fields on the Custom Post Type screen.  Don’t hesitate to use it if you run into something which isn’t working.

05.03.13
by

WordPress Google Form v0.46-beta-17 is now available

I have just uploaded WordPress Google Form v0.46-beta-17 which addresses one bug and adds new capability to the CAPTCHA functionality.

  • CAPCTHA can now have 2 or 3 terms
  • CAPTCHA now supports operators for addition (+), subtraction (-), and multiplication (*)

GForm_SS_44 GForm_SS_45

I finally found a solution to passing the query arguments correctly so the page navigation for the Form Submission Log now works properly.

At this point I think I am close to done with this release.  Scope creep can be a killer and it has been a long time since I’ve formally released an update.  With the number of questions I am getting about new Google Forms and all of the fixes being in this beta, it is time to get it out!

The next question to resolve is do I bump the version number to 1.0 with all of the changes I’ve made or continue as it is and release v0.46 – thoughts?

Google Forms Beta (8582 downloads )
05.01.13
by

Constantly Amazed by jQuery

I am constantly amazed by what one can do with jQuery.  If it were not for jQuery, I don’t think I would have continued working on WordPress Google Forms.  I’ve used jQuery to adapt check box parameters so they will pass from PHP (used by WordPress) to Python (used by Google for form process).  I’ve used jQuery to implement CAPTCHA.  I’ve used jQuery to implement multiple columns.  And now I am using jQuery to work-around the language issues which have recently become a problem.

Recently Google changed the structure of Google Forms.  The new version no longer supports the hl=XX (where XX is a language parameter such as en or fr) parameter.  For most instances this isn’t a problem.

However, there are some cases where Google thinks the server hosting WordPress (and hence WordPress Google Forms) is located in a certain part of the globe and therefore should receive Google Forms with some of the boiler plate text in the native language suitable for the location.  Awesome.  Google thinks I need German buttons and text.  I don’t speak German nor do any of my users however the server is physically located in Germany. Now what?

Over the past couple of days I been implementing jQuery that finds the default text which Google is serving in  a native language and allowing WordPress Google Forms to override it.  I am doing this with jQuery.  Fortunately Google adds numerous CSS classes to their forms so most of the replacements can be accomplished in a single line of jQuery.  However, there is one situation where it isn’t so simple.

If you employ a multiple choice question, Google provides an option to add an “Other” choice where the user can type in another answer.  Again, very nice of them.  However the “Other” text is one of those that Google serves up in a localized language and more importantly, it isn’t wrapped in a SPAN or a DIV with a CSS class that makes it easy to select.

Here is one of the questions on one of my development forms.  You can see I’ve already overridden the “hint” (which is also new):

GForm_SS_42

Here is the same question with the “Other” text overridden:

GForm_SS_43

So how do we select just the “Other” text but only when using a multiple select widget which employs an Other choice? jQuery and Javascript to the rescue:

$("div.ss-radio label:last+span.ss-q-other-container").prev().contents().filter(function() {
        return this.nodeType == Node.TEXT_NODE;
    })[0].nodeValue = "<<<<Other:";

This snippet of jQuery (which I got some help on from this thread on StackOverflow) combined with Javascript selects the one case there is and replaces it with my override.  Pretty slick eh?

Look for another beta update today with more override options.

04.29.13
by

Why are my buttons in Chinese?

Periodically I get a question from someone using WordPress Google Form asking why their buttons (and some other text) is in Chinese (or some other language but Chinese is the most common)?

If you haven’t run into this problem, consider yourself lucky!  The problem manifests itself similar to the images below.

GForm_SS_35 GForm_SS_36

As near as I can tell, this problem happens when the Web server that is running WordPress Google Form is geographically located in a part of the world where Google thinks it should serve up a particular language.

So how do you fix it?  In the previous version of Google Forms, the solution was simple:  Add &hl=en to your form URL and Google would deliver the content in the specificed language (in the case English) – refer to to this post for more details.  Unfortunately the new version of Google Forms doesn’t support this language parameter so I have been at a loss to help people who find themselves in this situation.

For several days I have been trying to find a solution.  Adding cookies to the wp_remote_get() request, .htaccess entries, PHP locale settings, etc.  Nothing made a difference.

While at the gym this morning it dawned on me that there isn’t any reason why I couldn’t “fix” the problem by processing the HTML that Google generates with jQuery.  So that is what I have done.

GForm_SS_37

 

I have renamed the Debug tab to Advanced Options and added the ability to define the text that will appear on the Submit, Back, and Continue buttons as well as the text which indicates fields are Required.

11.26.12
by

WordPress Google Form v0.46 beta 5 available

I’ve updated the beta version of WordPress Google Form v0.46 to beta-5 and made it available for download from this site. This beta update addresses an issue where content is floating to the wrong location. The addition of column support using jQuery Columnizer plugin injects several DIVs to wrap the column content and the DIVs which contain the columns are floated either left (default) or right. I have added some additional jQuery code to clear the floats at the end of the Google Form.

Download the beta release and please let me know if you run into any issues.

Google Forms Beta (8582 downloads )
11.21.12
by

wpGForm Custom Post Type Preview

As I noted a couple days ago, I have started a “renovation” of sorts to my WordPress Google Forms plugin.  I have defined a Custom Post Type which makes it much easier to set up a form.  It is no longer necessary to worry about the syntax of a long complicated short code!  Here are a couple images of what the Dashboard UI looks like.

Adding a form to a post or page is as simple as adding the [wpgform id=’N’] short code where N maps to the form’s post id.  The short code syntax for each Google Form appears in the list of forms.

The Google Form Edit Screen has fields which map directly to all of the short code attributes that were defined in the original short code.

There is no change of operation on the front end – the form should continue to operate as it has previously.  If you’re interested in testing this new version, I hope to have a beta available fairly soon which also has some other new features.

Moving to a Custom Post Type may allow for some more robust field validation using the jQuery Validation plugin!  Stay tuned for  more details on that as I don’t think it will be in the first release of Custom Post Types.