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.

WordPress Google Form Enhancements

Several people have asked for enhancements, many of which are similar. The most common request is to add either pre-filled or hidden fields based on something WordPress knows about. A recent request was to add tracking so a form could only be submitted by a user once. I am certainly not opposed to adding features like these, I think most would be pretty useful. However, there are some things to think about before implementing a solution or adding new features.

  1. To auto-fill a field or populate a hidden field, the field must be mapped from what the column is called on the Google Docs side of the form to something WordPress knows about (e.g. username, email address, etc.). How should this mapping be done? Arguments as part of the shortcode? For anything to be posted to the form processor on the Google side, the field must be defined on the form so the results spreadsheet has a corresponding column. For hidden fields, wpGForm would have to turn what is an existing field (which may or may not be a simple text box) into a hidden field with a value supplied by WordPress. This isn’t impossible, jQuery can do much of the work fairly easily but the problem is it is fraught with potential errors so I am reluctant to add it until I have a better idea how to bullet proof it. Pre-populating values is fairly easy, as long as we know what the field name
  2. I’ve considered, and posted about, introducing a Custom Post Type for forms. If I do this, then it makes addressing the tracking aspect fairly easy because the CPT id could be stored as part of the users meta data. That is pretty straight forward once the CPT exists (which it doesn’t yet). However, it does require the user to be logged into the site which many people don’t want to allow. This could also be handled by the CPT which could in theory, define a new form as anonymous or not. An anonymous form would have some limitations, tracking being one of them.

I’ve got some ideas on how to implement these features, most of which would be pretty useful. Introducing a CPT is absolutely on my radar screen but right now I am focused on my Swim Team plugin as we’re gearing up for Summer Swim Season here in North Carolina. Once I knock out my to-do list on the Swim Team plugin I’ll come back and look at adding the CPT for WordPress Google Forms which would facilitate adding some of the requests people have asked for.

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.23

This evening I released v0.23 of my WordPress Google Form plugin. This update fixes a situation where CSS declarations were output as plain text as part of the form. I believe the cause of this was due to an appearance theme for the form being specified in the Google Form Designer. The update should roll out via the WordPress Dashboard Update failrly soon.

WordPress Google Form update – v0.22

Yesterday I received a report from someone using WordPress Google Form that their checkboxes weren’t working. This was very confusing to me because last weekend I spent a bunch of time fixing and testing the checkbox problem.

It turns out the jQuery script which fixes the checkboxes to work with PHP was never running. Why wasn’t it running? Because jQuery wasn’t ever loaded. Why wasn’t jQuery loaded? Because wpGForm never loaded it! It turned out the website which reported the problem was using a theme that doesn’t use jQuery and therefore never loaded it.

Well the WordPress Google Form plugin, which needs jQuery, didn’t load it either. I (and I can only assume other people) was never seeing a problem because either the theme or another plugin was loading jQuery.

The v0.22 update corrects this problem which was somewhat of a corner case, but a problem none the less.

WordPress Google Form minor update – v0.21

This morning I have updated WordPress Google Form and fixed a number of documentation problems and added one minor new feature.  While I am not a big fan of Javascript Alerts, I had a request to allow a message to be displayed upon successful form submission.  I have added a new parameter (alert=’message’) to the gform short code to enable this new functionality.

[gform form='https://docs.google.com/spreadsheet/viewform?hl=en_US&formkey=dEYwbGNYVG9TRUhXellMaDBuZ1RQTHc6MQ#gid=0' confirm='http://localhost/?page_id=435' alert='You da man!']

The new release should appear in the WordPress repository immediately and as Dashboard update fairly soon.