Epicserve

Generic CSS XHTML Contact Form

October 25, 2005 | 12:41pm CDT

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.

Comments

1.   At 10:28am CDT on October 07, 2006, Marty wrote:
You’re wonderful!
2.   At 10:36am CDT on October 07, 2006, Brent O'Connor wrote:
Thanks!

Post Your Comment

(Optional & Not Displayed)

(Optional)


(allowed tags - strong, em, cite, & code)

remember me

Post Guidelines

Please be considerate of others. Keep comments relevant. Content deemed inappropriate or offensive may be edited and/or deleted. Email addresses are never displayed.

Line breaks and paragraphs are automatically converted — no need to use p or br/. Quotes, apostrophes, and double-dashes are automatically converted to smart punctuation. Be careful when copying and pasting portions of entries or other comments.

Links can be created using the standard <a href="http://url">urlName</a>. The following inline HTML elements may also be used: strong, em, cite, & code. The title attribute is allowed within any element. All other code will get removed before posting.

Latest Photos

Good Reading

A bunch of presentations on scaling websites: twitter, Flickr, Bloglines, Vox and more.
Good links and presentations I'm going through about scaling websites.
Upside-Down-Ternet
Now that's a good April fools joke!
Animator vs. Animation by Alan Becker
Pretty cool flash animation that a friend showed me.
30+ Useful Websites You Probably Didn't Know About
Looks like some good websites that could come in handy. The GetHuman website definitely sounds useful!

view past links