Inspired by this great article, I got working. I found a nice picture on Flickr and this is the result. Now let me tell you, the article makes it look dead easy to get such a nice form. In reality, it is in fact not that hard, but it’s a lot of pixel hunting, trying out colors and positions. Especially since I wanted to integrate this with the incredible cForms plugin for WordPress.
I’m still not entirely happy, but for now, it’s good enough. Here’s how I did it (beware, it’s probably not for the HTML and CSS newbie):
- I created my form in the cforms control panel. This form has been online for a while, I didn’t really change a thing.
- The entire code for the form was copied to a local HTML file and I added the style sheet from Janko’s tutorial to it.
- Using Firebug, I figured out which fields I needed and changed the correct names in the CSS file.
- When I was happy, I created a new style in the cforms styling folder and selected that style to be used.
- I also created a special WordPress template for the contact form. That way I could disable the normal heading.
The major caveat here, is that cforms only allows you to select one style for all your forms. So if you have multiple forms, I’m affraid you’re out of luck. You could put the style sheet link in your page template, I guess. But I haven’t tried it yet.
One more “to do” for my form is to correct the error handling and get rid of the extra white that is inserted when hovering over the fields. But I’m going to leave it like it is for now. This 5 minute project has already taken enough evenings as it is.
update: this form was featured on the previous Streamhead design. For now it has been replaced by a fairly generic version. When I get around to it, I’ll be replacing it with something even better.