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]

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.

WordPress 3.3 and WordPress Google Form?

The answer is:  I don’t know yet.  WordPress 3.3 came out last night and I am just playing with it now.  One of the key features of WordPress 3.3 is the inclusion of the complete JQuery UI library.  This definitely affects wpGForm because I am loading one of the UI libraries that wasn’t previously included from Microsoft’s CDN.  That will no longer be necessary (yeah!).  I guess the question now is what to do about backward compatibility with older versions of WordPress.

Historically I’ve just put a stake in the ground and moved on but wpGForm is the first WordPress theme or plugin that I’ve done that has quite a few users so I’ll probably implement some sort of version detection and conditionally load the UI library from the CDN if running an older version of WordPress.  A little more work for me but probably the right answer.

WordPress Google Form bug fix

In the process of trying to solve the multipage Google Form problem, I found a bug with the “Confirmation” page.  When a custom confirmation page isn’t supplied, the plugin is supposed to use the default Google conformation page.  It currently isn’t, instead the page the form is on is rendered again.  This is incorrect behavior and I’ve fixed it in my development thread and it will appear in the next release.

Multipage Google Forms – no solution yet

Yesterday I had some time to look at supporting multipage Google Forms.  Unfortunately it doesn’t look like it will be possible because of the way multipage forms work.  As you work through a multipage form Google adds hidden values to each successive page to facilitate moving forward and back without losing any data.  Pretty standard stuff for a “wizard-like” form implementation.

The problem is the way the plugin is implemented, the HTML code for the form is extracted and then re-processed before being added to a page within WordPress.  What I’ve implemented works fine for a single page form, actually, in my opinion, it works pretty well.  However, detecting the page transitions and obtaining the hidden form fields either isn’t easy or isn’t possible.  Right now I am leaning toward the later because the hidden fields are generated based on the prior page (Continue or Back) form submission.

What I have successfully made work is to use the “embedded” version of a Google form within a WordPress page.  It works but aesthetically it looks awful.  What I am playing with right now is some jQuery to try and manipulate the embedded form to use the styling from the site instead of from Google.  We’ll see how it goes ….

CSS for the WordPress Google Form Submit button

I was recently asked how the Submit button could be styled when using a Google Form in conjunction with my WordPress Google Form plugin.  Fortunately this was an easy question to answer because I had done something similar for another site.  Now I suspect the person asking me didn’t want to make their submit button pink but the CSS selector should be the same – it is just a matter of adding the CSS directives to achieve the desired affect!  I used the following selector to style the Submit button:

div.ss-form-entry>input[type="submit"] {
    background-color: pink;
}

This little trick should help further integrate Google Forms with your WordPress site.

Update: Recently I was asked how to style only the Submit button – all other buttons (e.g. Back, Continue, etc.) and input fields should keep their default styles. Here is some CSS which will style only the Submit button:

div.ss-form-entry>input[type="submit"][name="submit"] {
    background-color: pink;
}

Read-Only Google Forms?

This morning I added a new feature to my WordPress Google Form plugin.  You can now set a form to be ‘read only’ using the readonly=’on’ attribute in the shortcode.  This option, when turned on, use a little snippet of jQuery to disable all of the form elements.

[gform form='<long_url_to_your_google_form>' readonly='on']

I suspect your immediate reaction to this is “why would I want my form to be read only?” and it is a logical reaction.  After all, the whole point of creating a form is to collect data right?  The purpose of some forms, in fact I’d bet it is the case for most forms, is to collect data for some period of time and after a certain point (e.g. 5:00 PM on October 31), there is no reason to collect data any longer.

Imagine a sign up sheet for working the snack bar at your local High School football game.  Once the game has happened, there is no value in letting people sign up any more.  The readonly option will allow you to retain the form as part of your WordPress web site while preventing the collection of any more data.

I need to do little more testing before I release an update but so far, it looks pretty good!

Note:  The more I think about this, I may want add an expire option after which the form will automatically become read only.

Support for multi-page Google Forms?

I received an email the other day about my WordPress Google Form plugin wondering whether or not it should work with multi-page Google Forms  It hadn’t even occurred to me to test it as none of the forms I had needed myself were multi-page forms but my gut reaction was I didn’t think it would work.

I took a look at a multi-page Google Form and have determined that the current (v0.10) version of the WordPress Google Form plugin (aka wpGForm) will not work with multi-page forms.  No real big surprise but I want it to be clear before someone else wastes their time trying to make it work.

From looking at the form code it may be possible to support multi-page forms in the future but it will require some additional jQuery scripting and more importantly, some time to dedicate to it.  I hope to look at this soon but I have a couple of WordPress theme projects that I need to get off my plate before I can go back to wpGForm.

Form Validation Working!

I have required field form validation working.  I haven’t released it yet but in my testing, it appears to catch all of the fields I defined as required.  WordPress Google Form incorporates the jQuery Validation plugin.

When a page loads, the jQuery script runs and scans the Google form for required fields.  For each required field it finds it adds the gform-required class to the input or textarea tag.  When the validator runs, it looks for fields which have the gform-required class and if any are empty, a label is added with the gform-error class.

The gform-error class is defined in the default CSS to display the text in red and float it to the right of the input.

As can be seen in the image, if there isn’t enough room to the right of the field, the error will be shown just below it.  As with most CSS solutions, there are a bazillion ways to customize the output, I have elected to use something real basic and let the plugin user add more CSS if desired.

If you would like to try this early release of the plugin and give me some feedback, you can download it here.  The version in the WordPress repository is still the older v0.9 release.

[download#7]

 

GForm validation bug PoC

This afternoon I spent some playing with a jQuery Form Validation plugin to determine if it will help me resolve the issue with required fields.  The initial results look fairly promising as I was able to tag a couple fields on a test form and they were flagged when I submitted it.

In the image above, the jQuery Validation plugin added the “Thus field is required” when I submitted the form with those fields empty.   This is exactly the behavior I want, the challenge now is to scale my Proof of Concept (PoC) to work in the generic case of the plugin.  The Google form defines a block for each input field and the class the denotes a field as required is assigned to one of the DIV blocks that wraps the label and form element (e.g. INPUT or TEXTAREA tag) as opposed to the form element tag itself.  This makes finding the required elements a little tricky.

The real challenge I think will be input groups (e.g. radio buttons and check boxes).  I need to do some jQuery research before I have a solution but assuming I can figure out which elements to select, I believe this will solve the problem with required fields.