Generic CSS XHTML Contact Form
It used to be that I would design the front-end for my form using a large number of nested tables. I was somewhat happy in my ignorant bliss. It was just what you had to do back in the day if you wanted your form to look half way descent. It wasn't hard to format your forms this way but it just ended up taking a lot of time because of all the code that was required for the large number of nested tables.
Nowadays we know better and we know that we shouldn't use tables unless it's for tabular data. The other day I was working on a form for a project and it occurred to me that the XHTML that I was using for the form was simple and it took a lot less time to make the actual form. However, I was finding now that I was spending just about as much time hacking the CSS so that my form would look just as pretty in Internet Exploder (Ops, I mean Internet Explorer) as it does in Firefox.
Because of the time I was spending I thought it would be good to extract my completed form from my project and put in a generic format so that I could use it as a library to share with other developers, get feedback, and hopefully save some time when I need a form of this nature again in the future.
So without further adieu here is my form for all the world to see. I would appreciate any feedback that you might have on how one might be able to achieve this same look with less CSS and possibly better XHTML markup.
Related tags: CSS
- Save this article for later, bookmark it!
- del.icio.us digg newsvine blinklist magnolia
Comments are closed.
Comments have been close for this post.
Latest Photos
Good Reading
- The easiest way to write your life story | OhLife
- Python Package Index : pyflakes 0.4.0
- bkroeze / django-bursar / overview — bitbucket.org
- Using virtualenv, pip and django-site-gen to quickly start new Django projects
- Video on the Web - Dive Into HTML5
- IBM Express Advantage icons by Philippe Intraligi
- A nice looking set of icons.

Comments
You're wonderful!
Thanks!
This is the best looking code I have seen. Well done. Have you thought of adding a captcha or other spam filter php backend?
David
Thanks. I setup a captcha for my contact form on my blog and I have some custom checking that I do for spam on comments.
Hi, see if it works.
@robert, See if what works?
Nice script! But i have one n00b question. Where do i have to put my e-mail? :S
@J, This was just an example form that shows how to use CSS to Style a form. I'm not sure I know what you mean by your question.