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.
1. Semantic Horizontal Form
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.
4. Veerle’s Blue CSS Form
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.
5. Man in Blue: Form Examples
Here I’ve made each fieldset extend the full width of the page. The main styling that’s going on is the positioning of the form elements within the fieldsets. Because each element is contained inside a label tag, you can just float labels left, give them a bit of margin, and they line up horizontally (moving to the next line if there’s not enough width).
6. CSS Play – A Form with Style
Forms are not very friendly when it comes to CSS and each browser has its own way of handling them. Styles that work in one browser will not work in another, so depending on which browser you are using you will see a slightly different interpretation.
7. The Form Garden
This is a generic web form containing all the different fields and layouts available in FormAssembly.com. Use this form to make sure your theme works well with any type of web form.
8. Prettier Accessible Forms
The most important part of a form is the HTML we use to build it. Fortunately, HTML gives us a nice assortment of tags to build our forms in an accessible way. These are fieldset, legend, and label.
9. HTML Form Effects with CSS
For this tutorial you should already be familiar with HTML forms and the various elements and attributes. You should also have a basic understanding of Cascading Stylesheets (CSS)
10. A 2 Column CSS Form Layout
Websites have become less accessible and more complex over time according to recent studies. Learn how to buck the trend by creating fast, accessible CSS forms that work with modern browsers and gracefully degrade.
Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.
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
It seems very convenient. I am going to try it. Thanks for sharing
Very Nice ! Thanks my friend ! ( Brazil )
thanks really nice forms..
excelent examples
Just stumbled into this article while looking for CSS form code blocks. Using some of them in next projects.
Very Nice ! Thanks…
excellent examples…
Very Nice ! Thanks…
excellent examples…
Very Nice ! Thanks…
excellent examples…
Very Nice ! Thanks…
Very Nice ! Thanks…..
such a nice style i will used it at my website …..
nice samples… unfortunately i dont know how to use niceforms to my website… the style is missing :(
Excellent form examples, Thanks for posting.
thank you ! i’ll use em in my site
would be good if i didnt have to wait 5 ucking minutes for all your images to load so that i can scroll down
Thanks you very much! Wonderful forms.. Thanks again, you are wonderful!
Thanks for that! Nice Forms, i like this Stuff!
Nice css forms, thank you
thank you for give this forms
i’m working late on an html form and your examples have helped inspire me.
Indeed great website, helped me alot,
Thanks
thnks nice forms
Wow….Lovely.
I am going to use it in my projects…the first one
Semantic Horizontal Form
Never used it earlier.
Thanks so much.
keep posting..
Nice forms..I love it.
We will use it in our site.
Thanks a lot
Shailesh kumar(Tangent89)
Tangent89
Great examples, I’ll try to use them at my website! Thanks, John
Good clean CSS forms – Great!
Thanks for sharing this with us.
Rachel
nice list, thanks a lot for sharing this resource. I like this :)
I love this form example but why i can’t use this?
Great list there guys! :D
Thanks for this the number 5 form is spot on, just what I was looking for and dead simple :))
ss
Very good.
very useful forms and bueatiful forms.
Thanks for sharing these useful examples. I am really glad to see these. Thanks
really great collection of css based form design. I just was looking for that and fortunately found it here.
thanks for sharing
Its Nice. Very Helpful for me. I used one from these. thanks for sharing.
Nice sharing dude thanks for sharing its very helpful for me.
Great collection of forms..Thank you David..
Wow, these CSS forms are really beautiful! Will check out the CSS and learn from them. :)
prelepe forme, hvala puno
Designing form always be a challenge for me. Thanks for sharing this showcase, now I can pick the closest design I need (and tweak a bit) :D
Simple and useful form.
this is very educational
Thanks for this fantastic post. I am working in a new site and wanted something I could use for some of the forms.
Great stuff.
Zoho Creator is really great tool to build web forms without writing a single line of code. It supports CAPTCHA and File Upload which are not even supported by Google Docs. If you’re looking for example of how to build web forms, have a look at this guide Zoho web forms builder.
Nice form examples
Teşşekkürler
Very professional examples.
While searching the Net for information about designing forms I stumbled on this web page that I found very helpful (the name of the page says it all)…
http://www.flysoftware.com/support/top_10_form_design_tips.asp
Very nice article with great showcase of form examples. :-)
süper bir makale
thanks for the inspiration.
i built the following Gr8 Form and Gr8 Form with Validation.
http://www.icodesites.com/gr8-code/index.php
Very nice makale
Thank`s Martin for the tip and for the answering my question!
Thanks for sharing these useful examples. I am really glad to see these. Thanks
thanks for the inspiration.
Wow, these CSS forms are really beautiful! Will check out the CSS and learn from them. :)
hp dv4 battery dell inspiron 1525 battery
This card is professional and catches the eye…clean simple design that really stands out! Very original.
thank you wery much
Nice form examples
Great colecction I will check Nice forms for me is the better for my design.
I want to make one nice report form, and try to find the html page , then I can use it in one cms.
Great. Just great. Thanks for your lists and references.
Some really good examples here. Useful because form elements can be amongst the most difficult to style.
I could tell how great you are in your field of interest. You could relate in each detail very well. Thank you for spending a time on sharing such informative writings to us. I will bookmark your page and looking forward to read some more of your writings soon.
This is a very informative article.I was looking for these things and here I found it. I am doing a project and this information is very useful me.
Nice forms? I’ll use the last one.
Thank you for examples.
asdf
Thank you so much for posting this article.It was really interesting to read it.
nice collections thanks for sharing
How one can develop CSS forms by refering this website.No coding is given..Not good
Thanks mate! @Person-above-me know how to fork code dude, you can learn much better by knowing how things work ;)
thank you very much
This will be very useful :)
Good contribution.Thanks
I really appreciate sharing this great post. Keep up your excellent work.
Very good.
can any one give me source code of above examples.
can any one give me source code of above examples.
my ID is:
sana_mit@hotmail.com
Excellent post. I want to thank you for this informative read. I will bookmark this site and visit again..
Very nice comments Thank you..
Very nice good thanks
awesome collection, thank you
your sites really beatiful, ı am follow me add, thankss