Design Shack - Web design showcase, CSS tutorials and web standards
About
Design Shack showcases inspiring web design, alongside resources and tutorials for you to succeed in the same way. It is carefully curated and edited by Josh Johnson and David Appleyard.
10 CSS Form Examples
Forms can be greatly enhanced with a touch of CSS, making them more usable and far more visually attractive. Follow some of the examples below and you’ll be creating stunning CSS forms in no time at all.
This form is coded in a semantic way and the elements are positioned next to eachother except for the last fieldset which spans the full width of the form below the 3 top fieldsets. It’s been tested in FF1.x, IE6 and Opera8. (looks a little quirky in IE5.x but still usable)
2. Nice Forms
A great form, with graphical elements and colour to create a different and unique look. All done with CSS and semantic coding.
3. StylePhreak Simple CSS Form
A simple form with regular alignment and unique lines to break up the different sections. This works well as a great base to start your own custom form from.
A simple blue form with rounded background corners, all styled in CSS and XHTML. The layout is pixel perfect, and the images can be customized to match your own requirements.
5. Who says CSS forms can’t be pretty?
A unique form with soft background images to complement the fields. It highlights many form possibilities, including a pop-up calendar for choosing a date. A related tutorial also accompanies the example.
6. CSS Play – A form with style
Thanks for the list. Besides being attractive, quite a few of these offer great techniques in usability. I’ll be checking back in when creating my next form. Thanks.
Great showcase, it’s always nice to have some ideas about how to style forms and make them “work”
I think second one is best.
Thanks for the list.
The second one is nice – but the version you’ve linked to is broken in mac safari and firefox. The new version is:
http://www.badboy.ro/assets/articles/niceforms1.0/niceforms.html
Thanks for pointing that out – I’ve changed the link.
Definitely should have included the Wufoo Form Gallery. They’re great.
http://wufoo.com/gallery/
There is some excellent forms here.
Thanks for sharing.
Another one to include for you- http://dnevnikeklektika.com/uni-form/
Thank you m8t!
Great guide, going to study on it!
An excellent article. Helps me lot in my projects.
Great collection.
Some great examples here, thanks for sharing.
Helpful examples
Thanks!
- Shelon Padmore
Good one. I will use it in my project
Already using it. Nice tips! Thanks a lot
Nice simple design, we’ll use it in one of our project.
The nice form is cool, im using it in my projects, it so happened that you have a list in your site so i just say hi
Excellent examples. Nice sample
Thanks for form css I have used it at my website.
Thanks again
a fool in love makes no sense to me, but you are a fool if you don’t love, and you know what, I love those forms you’ve posted, and of course I did dl some of them.
so, thanks and be happy.
Nice CSS form.
Thanks so much..!
excelent examples
Re: bouncing flash into these. ,
But I think what is really necessary is to see and still live unblinded. ,
Fans use stars to identify their preferred styles. ,
October 2008 at 9:35 pm Dear Mr Goldstein,I work for the brazilian magazine and i´m interested in writing about your experiment. ,
A great collection of form styles. Those samples let others thinking of making a form prettier.
Very nice Css Forms..
Thamk You so Much..
Web Services
You’ll have to login to the BBC but we have made some cool forms you might want to see:
https://www.bbc.co.uk/labuk/experiments/personality
Thanks for the great post.
However you should give a try to Free online database application called http://www.MyTaskHelper.com
It includes Free Form Builder as well as Widget Builder where you can easily customize and integrate your forms to your sites!
Cheers
thank you, very nice working!
Are there any free codes for forms layouts?
Very nice. Thanks for sharing!
cool… I like one It very usefull
very nice…………….
Very Nice Totorial.
xss?
thank you wery much
Just what I was looking for. Tx.
Thanks again. Wonderful examples.
I am using in my web site..
very nice shared, thanks
Thanx, I was looking for an easier solution. First link off of google 8=)
if you have creative new form plz show me code thanks
nee