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.

2 thoughts on “Highlighting Missing Fields on a Google Form

  1. I used custom CSS to make missing questions RED on all my forms, but on my home page there is a multipage form and instead of turning red, it just displays in black “This field is required”. Do you know why?

Leave a Reply to Mike Walsh Cancel reply