How to ruin your own contact form

While browsing the web, I found this contact form on a Blogspot blog. If you zoom the picture, you will see that the 2 buttons of the form have no text :) Very professional and appealing, huh? If you click on the buttons, you will see that they have some text (Submit & Reset), but it is written with white font on white background.

Of course, as a Sherlock Holmes fan, I wanted to find what is causing this, because I am sure the blog owner did not intend to make this mistake. Looking to the source of the page, I found that he is using some Blogger template, which contains a lot of CSS. After just a couple of seconds, I found the cause of the problem:

input, button, textarea, select {
font: normal 12px/12px "Trebuchet Ms", arial, sans-serif;
color:#ffffff;
vertical-align: middle;
}

In fact, this affects all the other buttons on the blog (search button, subscribe button etc).

And to draw a conclusion of this post, always verify the usability of your site after you set a new template for it, because it is very possible to get problems like the one I've just talked you about.