Tag Archives: CSS

08.07.13
by

Google Updates Forms Again

Sometime in the past few days (as near as I can tell) Google has updated Forms again.  This most recent update adds the H5F Javascript library to do required field checking.  This functionality is similar to the jQuery Validation plugin solution I included in WordPress Google Form a number of months ago.

This new validation functionality doesn’t appear in all forms, just those created after a certain date.  Existing forms do not appear to have this new functionality embedded in it.

So how do I know if I have the new functionality?  The most obvious sign is the appearance of the text “This is a required question” underneath the form element.

GForm_SS_58

 

It is fairly easy to make these messages go away since they are redundant with the plugin functionality.

You can add the following to your Custom CSS (form specific or global):

div.required-message {
    display: none;
}

This will hide the messages and the form reverts to looking as it did prior to Google’s latest change.

GForm_SS_59

I will likely include this CSS as part of the default CSS in the next update but I need to do a little more testing first.

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.

05.05.09
by

wp-SwimTeam v0.1.371 – UI improvements, Opt-In, Opt-Out

This afternoon I posted v0.1.371 of the wp-SwimTeam plugin on the download page.  This build cleans up some UI issues and adds the baseline functionality for Opt-In/Opt-Out (aka Register and Scratch).

I have been noodling on how to implement the MacDolphins need for an online scratch sheet solution since I started this project.  It was one of the areas we really struggle with.  We’ve had a scratch sheet posted on the bulletin board for people to sign up on but it was ineffective.  We’ve tried using e-mail which worked better but getting the information from the collection point to the heat sheet continued to be problematic.  Hopefully connecting it to the web site will be a good solution to this ongoing problem.

The basic functionality is now working.  When a swim meet is entered into the system, it is characterized as either Opt-In or Opt-Out (the labels can be set from the Options menu).  An Opt-In meet requires all swimmers to register in order to participate.  An Opt-Out swim meet assumes all active swimmers are participating unless the swimmer withdraws from a meet (or subset of meet events).  For the MacDolphins, all dual meets are Opt-Out events and our local invitational city meet is an Opt-In event.

In addition to the new Opt-In/Opt-Out functionality (which doesn’t include reports yet), I made quite a few improvements to the UI, particularly with the messages which are displayed after an action is executed.  I also took care of some CSS issues which were most notable when using the default light blue Dashboard color scheme.  I prefer the grey one which is why I hadn’t noticed the problem previously.

The next phase of Opt-In/Opt-Out will be reporting followed by exporting a meet specific roster in SDIF format.