Epicserve

Generic CSS XHTML Contact Form

October 25, 2005 | 12:41 p.m. 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.

Related tags: CSS

Comments

Marty
1.   At 10:28 a.m. CDT on Oct. 7, 2006, Marty wrote:

You're wonderful!

Brent O'Connor
2.   At 10:36 a.m. CDT on Oct. 7, 2006, Brent O'Connor wrote:

Thanks!

David DelMonte
3.   At 6:39 p.m. CDT on May 28, 2008, David DelMonte wrote:

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

Brent O'Connor
4.   At 3:56 p.m. CDT on June 27, 2008, Brent O'Connor wrote:

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.

robert
5.   At 11:59 a.m. CDT on May 20, 2009, robert wrote:

Hi, see if it works.

Brent O'Connor
6.   At 1:29 p.m. CDT on May 20, 2009, Brent O'Connor wrote:

@robert, See if what works?

J
7.   At 3:01 p.m. CST on Feb. 15, 2010, J wrote:

Nice script! But i have one n00b question. Where do i have to put my e-mail? :S

Brent O'Connor
8.   At 9:46 p.m. CST on Feb. 16, 2010, Brent O'Connor wrote:

@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.

Comments are closed.

Comments have been close for this post.