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.

Suppressing White Space

One of the more common questions I receive is with respect to extra white space on a Google Form. Sometimes the rendering of the form within WordPress is significantly different than it appears within the Google Docs context and people want to know why and more importantly, how to fix it.

Fortunately Google Forms have lots of CSS classes so in all of the cases I’ve seen so far, I’ve been able to help the person solve their white space problem by adding CSS definitions to their custom wpGForm CSS settings to achieve the result they wanted.

The two most common problems I’ve seen so far are extra margin and/or padding on paragraph <P> element and/or <BR> element.  Another situation which I ran into recently involved a theme adding a <BR> element after every <P> element.  This was an unusual situation but I suspect not all that uncommon.  How would this happen?  A theme can define something called the_content filter which will modify the content of a page or post before it is rendered and in this particular case, the filter appended  a <BR> element at the end of every P element!

Fixing White Space Problems

So how do you fix these problems?  Extra padding or margin for the <P> and <BR> elements can be tweaked using the following CSS:

div.ss-form-container p { margin: 0px; }
div.ss-form-container br { margin: 0px; }
div.ss-form-container p { padding: 0px; }
div.ss-form-container br { padding: 0px; }

You may not need all four directives, in fact, in most cases you won’t but it might take a combination of the four to achieve the desired results.

Suppressing Extra <BR> Elements

What do you do if you encounter a situation like described above where the theme is adding extra <BR> elements or you simply don’t want them?  Again, CSS can be used to solve the problem.

div.ss-form-container br { display: none; }

This CSS will essentially prevent the browser from rendering the <BR> elements within the form.  They will still appear in the source HTML but they have no effect because they are not displayed.

I recommend using FireBug to help chase down CSS issues.  It is what I use when looking into problems people have asked me to look at.

wpGForm v0.28 released

This morning I released an update to my WordPress Google Form plugin.  I can only assume very few people are using the email confirmation feature because it wasn’t working and I didn’t hear about it until this past weekend!  The email confirmation feature (add the attribute email=’on’ to your short code) will notify the WordPress administrator that a form submission has been made.

The update is now committed and should appear on your WordPress Dashboard shortly.

WordPress Google Form v0.27 released

This afternoon I have released v0.27 of my WordPress Google Form (aka wpGForm) plugin.  This release has some new functionality but more importantly, reverts the custom confirmation page to the redirect method which was present from v0.11 to v0.025.

If you prefer the AJAX style custom confirmation, which I do, it is still available by adding the short code attribute style=’ajax’ to your gform short code.

Changes for v0.27 are:

  • Added ability to check and warn for old and/or unsupported browsers. There is an option on the WordPress Google Form settings page to enable this check. When an old or unsupported browser is detected, a message will be displayed on top of the form. The browser check is based on the same functionality that WordPress uses on the Dashboard.
  • Changed default custom confirmation behavior has reverted back to using a javascript redirect as it did from v0.11 through v0.25.
  • Added new shortcode attribute, style, to control how confirmation pages should be handled. There are two options: style=’redirect’ which is the default and style=’ajax’which loads the page content via AJAX.
  • Added new CSS classes to support errors and warnings for the browser check and the inability to load Google Forms.
  • Cleaned up Options page GUI.

Highlighting Missing Fields on a Google Form

A user of my WordPress Google Form plugin asked how to highlight the required fields on a form but only after submitting for the form without providing all of the necessary fields.  Essentially, how show an error more clearly, much like Google does with their forms when run standalone.

Here is a form that has required fields before it has been submitted:
Form with required fields before submission
Here is a form that has required fields after it has been submitted:
Form with required fields after submission
Note that the form label is now red instead of the original black. To have the field text appear in red only after submitting the form without providing the required field, I used this CSS:
div.errorbox-bad div.ss-item-required label {
color: red;
}

If you use the prefix attribute in your short code you’ll need to adjust the class names accordingly. There are quite a few CSS tricks you can do to highlight errors and for experimenting, I recommend FireBug to tweak CSS without having to reload the page each time.

Custom Confirmation problems with v0.26

In v0.26 of WordPress Google Form I changed how I was handling the custom confirmation page as many people had told me they didn’t like the redirection which caused a rapid page reload.  The new mechanism does a partial page reload using Ajax so the effect is much more graceful but I have heard from several people that it isn’t working for them.

If you are having this problem, please let me know so I can figure what is going on as it is working fine in my development and testing area.  I am still looking for a more graceful solution but the model I used before supporting multi-page forms simply won’t work with multi-page forms.  Multi-page forms are too important and commonplace not to support them.  Sort of a catch 22 for now but I am trying to find a viable alternative.

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.

WordPress Google Form v0.25 now available

Today I was alerted to an issue where my WordPress Google Form plugin wasn’t behaving correctly. This turned out to be due to the prefix attribute in the gform shortcode not handling it correctly. I have fixed the problem with the prefix attribute and a couple of other things and pushed out a release on the WordPress plugin respository.

Version 0.25

  • Fixed problem with checkbox processing when using the prefix attribute.
  • Fixed problem with hiding legal links when using the prefix attribute.
  • Fixed problem with legal=’off’ attribute not being processed correctly.

Possible Enhancements for wpGForm

Recently I have had a couple requests for enhancements to wpGForm. One of the recent ones was the ability to define hidden fields on a form to capture some data from a WordPress user.

Currently Google’s forms define fields like this:

<input id="entry_0" class="wpgform_ss-q-short" type="text" value="" name="entry.0.single">

It would not be too hard to add an attribute like hidden=’entry_0,entry_2,
entry_27′ to the shortcode. I could even do something like
hidden=’entry_0=email,entry_2=username,entry_27=first_name,entry_28=last_name’ where the “allowable” presets would have to map to the fields which can be returned by get_userdata() see:
http://codex.wordpress.org/Function_Reference/get_userdata Of course all of this predicates that the user is logged in so those fields exist.

I’ve also considered changing the plugin to allow for more complicated things – adding more options to the shortcode could get pretty cumbersome. What’ve I thought about is doing leveraging the Dashboard (using a Custom Post Type) to Manage Forms where you “Add” a form and the Dashbaord provides a GUI where all sorts of information would be added:

1. Form URL
2. Confirmation URL
3. Switches for all of the other options (legal, read-only, etc.)
4. More things I haven’t thought about

Forms could then be “Edited/Deleted/etc.” just like other post types. Then you’d simply embed the form using a simple shortcode like [wpgform id='1']. The rest of the information would be stored inWordPress as custom Post Type fields. I’d probably define a new shortcode for this so the current one would continue to work but that is the general idea.

Thoughts?