10 CSS Form Examples

by on 12th March 2008 with 163 Comments

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

Horizontal CSS Semantic 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

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

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

Veerle 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?

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

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

CSS Play Form

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

Prettier CSS 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

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.

Comments & Discussion

163 Comments

  • http://spigotdesign.com spigot

    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.

  • http://sarsini.it Martin Sarsini

    Great showcase, it’s always nice to have some ideas about how to style forms and make them “work”

  • http://ako-schudnut.kvalitne.cz Chudnutie

    I think second one is best.

  • http://whichweekend.com Jo Potts

    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

  • http://www.designshack.co.uk David Appleyard

    Thanks for pointing that out – I’ve changed the link.

  • Joseph

    Definitely should have included the Wufoo Form Gallery. They’re great.

    http://wufoo.com/gallery/

  • http://www.atmmultimedia.com James

    There is some excellent forms here.

    Thanks for sharing.

  • Stephen Ireland

    Another one to include for you- http://dnevnikeklektika.com/uni-form/

  • http://www.gfxpoll.com Eric

    Thank you m8t!

    Great guide, going to study on it!

  • http://www.webpixindia WebpixIndia

    An excellent article. Helps me lot in my projects.

  • http://www.mowglitech.com Mowglitech

    Great collection.

  • http://www.trcreative.co.uk Mike Lawson

    Some great examples here, thanks for sharing.

  • http://www. Shelon Padmore

    Helpful examples
    Thanks!

    - Shelon Padmore

  • http://www.einfoway.com Leena Ajwani

    Good one. I will use it in my project

  • http://plastics.inwiki.org/Main_Page vienna

    Already using it. Nice tips! Thanks a lot

  • http://blog.synergyinformatics.net Synergy Informatics

    Nice simple design, we’ll use it in one of our project.

  • http://www.philwebdesign.com phil web design

    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

  • http://www.free-movie-watch.com/ Alex

    Excellent examples. Nice sample

  • Pingback: VietNam PHP Blog » Blog Archive » 10 mẫu form CSS đẹp

  • Pingback: links for 2009-03-03 « sySolution

  • http://needcom.in Manoj

    Thanks for form css I have used it at my website.

    Thanks again

  • Hamzah

    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.

  • http://www.bestonlinescripts.com Best Online Script

    Nice CSS form.
    Thanks so much..!

  • amar

    excelent examples

  • Pingback: درس CSS: تنسيق نموذج بريدي

  • http://link Red17

    Re: bouncing flash into these. ,

  • http://link Maxx20

    But I think what is really necessary is to see and still live unblinded. ,

  • http://link Alex83

    Fans use stars to identify their preferred styles. ,

  • http://link Pol56

    October 2008 at 9:35 pm Dear Mr Goldstein,I work for the brazilian magazine and i´m interested in writing about your experiment. ,

  • http://www.vicina.info vicina.info

    A great collection of form styles. Those samples let others thinking of making a form prettier.

  • http://www.jasawebprofesional.com Dany Permana

    Very nice Css Forms..
    Thamk You so Much..

    Web Services

  • http://www.bbc.co.uk/labuk/experiments/personality imagebytekid

    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

  • http://www.mytaskhelper.com Igor Petrushenko

    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

  • Pingback: Custom Css Form(s)

  • http://www.atasozlerianlamlari.com Atasözleri

    thank you, very nice working!

  • http://www.spiralteck.com webb

    Are there any free codes for forms layouts?

  • http://www.bayshield.com Website Design

    Very nice. Thanks for sharing!

  • Mr. Jumri

    cool… I like one It very usefull

  • http://www.mukeshdesigns.com Mukesh.M

    very nice…………….

  • http://satyabhamasahoo.com satya

    Very Nice Totorial.

  • asd

    xss?

  • http://www.davetiye.gen.tr Davetiye

    thank you wery much

  • Pingback: フォームデザイン 参考・テンプレート | WebLab

  • Pingback: - Forms-Expert

  • http://www.sylogiquemedia.com/ Matthieu Desjardins

    Just what I was looking for. Tx.

  • http://www.atasozlerianlamlari.com atasözleri

    Thanks again. Wonderful examples.

    I am using in my web site..

  • http://www.zaratemizlik.com temizlik

    very nice shared, thanks

  • http://lucysfinest.com/ Lucy

    Thanx, I was looking for an easier solution. First link off of google 8=)

  • http://www.servemag.com/ naveed

    if you have creative new form plz show me code thanks

  • http://www.google.de tlim

    nee

  • http://www.frapanistanbul.com Davetiye

    It seems very convenient. I am going to try it. Thanks for sharing

  • http://www.vhnet.hd1.com.br Victor Binoto

    Very Nice ! Thanks my friend ! ( Brazil )

  • http://www.dekowebtasarim.com Deko web tasarım

    thanks really nice forms..

  • http://www.eariyorum.com Eariyorum

    excelent examples

  • http://www.webdesignvista.com/ ritesh

    Just stumbled into this article while looking for CSS form code blocks. Using some of them in next projects.

  • http://www.dugundavetiyesi.tk düğün davetiyesi

    Very Nice ! Thanks…

  • http://www.matbaarehberi.net matbaa rehberi

    excellent examples…

  • http://www.vampal.com Linda Amoxi

    Very Nice ! Thanks…

  • http://www.ekisilanlari.net ek iş ilanları

    excellent examples…

  • http://www.nikahsekeri.net nikah şekeri

    Very Nice ! Thanks…

  • http://www.kolayisbul.tk iş ilanları

    excellent examples…

  • http://www.klimalar.org klima fiyatları

    Very Nice ! Thanks…

  • http://www.bilezikmodelleri.com bilezik modelleri

    Very Nice ! Thanks…..

  • http://gs gsg

    such a nice style i will used it at my website …..

  • http://klik18.com pasan giklan gratis

    nice samples… unfortunately i dont know how to use niceforms to my website… the style is missing :(

  • http://www.addcolours.com Rali Madhu Sudhana Chary

    Excellent form examples, Thanks for posting.

  • http://www.dznice.com dz

    thank you ! i’ll use em in my site

  • mick

    would be good if i didnt have to wait 5 ucking minutes for all your images to load so that i can scroll down

  • http://www.atasozlerianlamlari.com atasözleri

    Thanks you very much! Wonderful forms.. Thanks again, you are wonderful!

  • http://www.absatzonline.de/webdesign/seo.html Klaus

    Thanks for that! Nice Forms, i like this Stuff!

  • http://www.measygames.co.cc yamed

    Nice css forms, thank you

  • shuvo

    thank you for give this forms

  • http://www.venturosis.com Web Developer

    i’m working late on an html form and your examples have helped inspire me.

  • http://www.IrfanAnsari.com Irfan Ansari

    Indeed great website, helped me alot,

    Thanks

  • http://www.ajansmagic.com Ajans Magic

    thnks nice forms

  • http://sandeep.org.in Sandeep Kumar

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

  • http://tangent89.com Tangent89

    Nice forms..I love it.
    We will use it in our site.
    Thanks a lot
    Shailesh kumar(Tangent89)
    Tangent89

  • http://www.czech-tourist.de/ John

    Great examples, I’ll try to use them at my website! Thanks, John

  • http://www.spanglishwebs.com/ Rachel

    Good clean CSS forms – Great!
    Thanks for sharing this with us.
    Rachel

  • Pingback: Web Resource » LoonDesign

  • http://techadictos.com tech

    nice list, thanks a lot for sharing this resource. I like this :)

  • http://www.shoppingcartbags.com reuseable bags

    I love this form example but why i can’t use this?

  • http://www.covicstudio.com David Coe

    Great list there guys! :D

  • http://www.absolutewebdesign.co.uk AndyC

    Thanks for this the number 5 form is spot on, just what I was looking for and dead simple :))

  • http://ss sss

    ss

  • http://www.blog.clacelestial.com/2011/01/favicon-download-online-ico-blogger.html gadarf

    Very good.

  • Shubh

    very useful forms and bueatiful forms.

  • http://www.sigarabirakmamerkezleri.com sigara bırakma

    Thanks for sharing these useful examples. I am really glad to see these. Thanks

  • http://mixsms.com mix sms

    really great collection of css based form design. I just was looking for that and fortunately found it here.
    thanks for sharing

  • http://www.buyshy.com/ Aajiz

    Its Nice. Very Helpful for me. I used one from these. thanks for sharing.

  • http://www.chorbazari.com/ Hina

    Nice sharing dude thanks for sharing its very helpful for me.

  • http://www.daskarhosting.com Daskar Hosting

    Great collection of forms..Thank you David..

  • http://www.100webhosting.com Jasmine

    Wow, these CSS forms are really beautiful! Will check out the CSS and learn from them. :)

  • Denis

    prelepe forme, hvala puno

  • http://nichpakaich.com nichive

    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

  • http://dailydomainspy.com DailyDomainSpy

    Simple and useful form.

  • http://www.binggoogyahoo.com sofie

    this is very educational

  • http://fiveholiday55.blogspot.com Helen Neely

    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.

  • http://www.goospoos.com Divyang

    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.

  • http://debt..atspace.cc Alen

    Nice form examples

  • http://www.izmirdavetiye.com.tr Davetiye

    Teşşekkürler

  • Mark

    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

  • http://www.webcointeractive.com AtlantaWebDesigner

    Very nice article with great showcase of form examples. :-)

  • http://www.izmirdavetiye.com.tr Davetiye

    süper bir makale

  • http://www.icodesites.com Brandon

    thanks for the inspiration.

    i built the following Gr8 Form and Gr8 Form with Validation.
    http://www.icodesites.com/gr8-code/index.php

  • http://www.davetiyeler.com.tr Davetiye

    Very nice makale

  • http://www.davetiyeler.com.tr İzmir Davetiye

    Thank`s Martin for the tip and for the answering my question!

  • http://www.davetiyecimatbaa.com Davetiye

    Thanks for sharing these useful examples. I am really glad to see these. Thanks

  • http://www.davetiyecimatbaa.com Davetiye

    thanks for the inspiration.

  • http://www.indirimlidavetiye.com Davetiye

    Wow, these CSS forms are really beautiful! Will check out the CSS and learn from them. :)

  • http://www.laptopsbatterysupplier.com laptops batteries

    hp dv4 battery dell inspiron 1525 battery

  • http://www.izmirdvetiye.com.tr İzmir Davetiye

    This card is professional and catches the eye…clean simple design that really stands out! Very original.

  • http://www.nikahsekerleri.gen.tr nikah şekeri

    thank you wery much

  • http://www.izmirdvetiye.com.tr İzmir Davetiyeci

    Nice form examples

  • http://www.juegosvestir-dtr.com Vestir ju

    Great colecction I will check Nice forms for me is the better for my design.

  • http://www.idresshop.com Merrywdress2011

    I want to make one nice report form, and try to find the html page , then I can use it in one cms.

  • http://www.spinthebottle.ru STB

    Great. Just great. Thanks for your lists and references.

  • http://highsidebsuperbikes.blogspot.com John

    Some really good examples here. Useful because form elements can be amongst the most difficult to style.

  • http://www.power2battery.com David Goole

    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.

  • http://www.acer-laptop-battery.com ACER JONE

    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.

  • http://tabula.org.ua Aleksandr

    Nice forms? I’ll use the last one.
    Thank you for examples.

  • asdf

    asdf

  • http://www.freestuffspot.com freebies online

    Thank you so much for posting this article.It was really interesting to read it.

  • http://www.softlandindia.co.in siva kumar

    nice collections thanks for sharing

  • http://designshack.net s.karpagam devi

    How one can develop CSS forms by refering this website.No coding is given..Not good

  • http://www.swavaldez.comw Sherwin

    Thanks mate! @Person-above-me know how to fork code dude, you can learn much better by knowing how things work ;)

  • http://www.davetiye.gen.tr davetiye

    thank you very much

  • http://www.davetiyex.com Davetiye

    This will be very useful :)

  • http://www.guzeldavetiye.com Guzel Davetiye

    Good contribution.Thanks

  • http://www.tekstovipesama1.com/ tekstovi

    I really appreciate sharing this great post. Keep up your excellent work.

  • http://www.gundoganbtp.com terrassement

    Very good.

  • sunny

    can any one give me source code of above examples.

  • sunny

    can any one give me source code of above examples.

    my ID is:
    sana_mit@hotmail.com

  • http://www.udruzenjebanja.co.rs/ banja srbija

    Excellent post. I want to thank you for this informative read. I will bookmark this site and visit again..

  • http://www.tolcu.com/ Brautkleider

    Very nice comments Thank you..

  • http://www.turkarama.de Gazeteler

    Very nice good thanks

  • http://e-irfan.com Irfan

    awesome collection, thank you

  • http://www.parttimeekisilanlari.info ek iş ilanları

    your sites really beatiful, ı am follow me add, thankss

  • http://www.davetiye.name davetiye

    thank you very much. good job

  • http://www.pkoretic.net Petar

    http://www.pkoretic.net/csTransPie/

    csTransPie library, i’m trying to make it as simple as possible and give all elements the look they need

  • http://www.davetiyesarayi.com/ davetiyeci

    awesome collection, thank you

  • http://www.ravzanurmatbaa.com.tr/ matbaa

    çok güzel paylaşım…

  • soukaina

    i like it so much ;)

  • http://www.flashgames.sa/ Flash Games

    Thanks for the lessons
    But some of them do not have an example of the application

    Thank you

  • http://www.esylhet.com sylhet

    I am searching something like html css form.

    thanks for sharing.

  • http://www.konumuzseo.com Seo

    i have found same view on ie and firefox by these forms

  • ümit altındis

    thanks for excellent forms

  • http://www.davetiye-dukkani.com davetiye-dukkani

    a useful platform for sharing good work ..

  • http://www.bankoatlar.com bankoatlar

    thank u for all your comment

  • http://www.bankoatlar.com at yarışı

    all comments are very useful

  • http://mannashake.wordpress.com/ Manna Shake

    very useful collections,wonder ful!

  • Jatin Kalra

    Great,He gives good idea.

  • http://networkscams.wordpress.com/ vital psp

    informative collections

  • http://www.homertechnologies.ca Jenny

    very nice list of form themes. But i have to tweak more if i were to use in my projects

  • prem

    its really good and easy to collect code from various sites.
    thank you dear

  • NITin

    Wow!Never knew that CSS could be so powerful.
    Thanks for the great post.

  • Aditya

    Module 1: Initiation of recruitment process
    Design a HTML page that tells about the e-recruitment. Process of e-recruitment from the user point of view should be provided. Users can be those who post the job and those who apply for the job.

    Module 2: Recruitment process
    Design a HTML page that has information about the placement consultants.( All the placement consultants and details about the placement consultant can be displayed

    Module 3: On Boarding
    Design a HTML page that tells about the various types of test(BCG, Written,Technical,HR)

    Can i get the User Interface coding for all the above three modules

  • http://www.teknoinek.com Ugur KAZDAL

    Useful staff. Thanks, I’m going to use 6th one. :)

  • http://www.tuljabhavani.in Kedar

    Love All Collection .Thanks a lot

  • http://lex-luthor.at Lex

    Selten so schlechtes CSS gesehn. Sieht aus wie Anno 1900

  • http://elisabethswelt.blogspot.com/2012/07/zeugnisse.html Augusta

    Blocking that website or any other from your computer ought to
    only be attempted as a last resort. You are also given the choice
    to favorite your leading jokes and also rate them. Facebook House introduced
    recently for Android devices.

  • http://www.iiconline.org/ForumRetrieve.aspx?ForumID=3171&TopicID=1016105&NoTemplate=False Download Street Fighter IV Keygen

    Thank you for sharing your info. I really appreciate your efforts and I will be waiting for your further write
    ups thank you once again.

  • Pingback: Tipps & Links CSS (CSS-INTENSIVESTATION, MISS MONOROM) | Lerntagebuch

Subscribe
Membership
About the Author