Daily Archives: March 28, 2012

03.28.12
by

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.
03.28.12
by

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.