Nice looking forms always bring attention. It’s one of those extra miles a web designer doesn’t have to take. But whenever I see nice looking forms on websites I think, “This guy pays attention to details.”
Since the big push for “Web 2.0″ and “Valid” websites, there as been an increase in mirrored text effects, gradients, bevels, colors etc… however, on many of these websites the forms get passed up. Why? You will have to check with the web designer I guess.
Anyways, I took it upon myself this morning to develop a valid, beautiful, css form in under 10 minutes. I took me 12 minutes actually. In fact, it is taking me longer to write this article and link to the form then actually making the form. Anyways, take a look at these forms I whipped up: Form1 | Form2 Â Here is a preview one Form 2:
Form 1 could be used to collect more information then a normal contact form. For example you could ask for their personal details, then shipping info etc… Form 2 is a basic contact form that most sites need.
Feel free to take the code and customize it to fit your needs. Also, you will notice that the forms are pointing to “process.php”. Well, if you want to know what to put in that file to make it work, download it here.
So, hopefully this will help us all to create nice forms. All you need to do is follow my lead. Change the repeating background image in the css properties for <fieldset>, make some color adjustments to other properties, add some extra fields etc…
Happy Forming!
Subscribe
July 31st, 2007
Great article! I’m currently in the process of creating a new theme for my blog and I have somewhat overlooked the forms. I’ll have to take some of your ideas into consideration.
August 4th, 2007
Hmmm…I may just have to get round to implementing something like this.
Nice article, thanks!
Leave Your Reply