If you ever chanced to look at my Contact form, you might have noticed that it looked a bit, well, untidy. Something like this, in fact:
The lining up of the labels to the boxes was distinctly off, and the box for comments was a wee bit narrow. Well, it was ridiculously narrow, and I really wanted to fix that.
The form is a module of the generally very useful Jetpack plugin, which does lots of clever things, but seemed to be having a bit of bother with the form for some reason. Well, I did a bit of looking, and found that the Jetpack folder contains a modules folder, which in turn contains a contact-form folder. Looking inside that revealed a css folder, which contained a file called grunion.css. The name reveals the contact form’s origin as the Grunion Contact Form plugin, which I used to use before Jetpack came along.
Looking in that file revealed some quite sensible CSS that if it was being applied, would almost certainly make the contact form look a lot better. Now I could have spent some time trying to work out why the plugin wasn’t inserting the CSS, but that seemed like far too much work. Instead, I copied the entire contents of the file and pasted them into the Custom CSS module of Jetpack. That’s another really nice feature – if you’ve got some CSS you always want to use, even when you change themes, this is a great place to put it. Though it’s worth noting that when you change themes, you may need to revert to a previous revision of the CSS you’ve entered, as it appears to blank it when the theme changes.
Anyway, once I’d pasted in the CSS and saved the changes, my contact form looked like this:
And that, I think, is a lot better. Now if I could just fix that title problem, I’d be really happy….