10 CSS Form Examples

by on 12th March 2008 with 160 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

160 Comments

Comments & Discussion

160 Comments

  1. spigot says:

    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.

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

  3. Chudnutie says:

    I think second one is best.

  4. Jo Potts says:

    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

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

  6. Joseph says:

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

    http://wufoo.com/gallery/

  7. James says:

    There is some excellent forms here.

    Thanks for sharing.

  8. Stephen Ireland says:

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

  9. Eric says:

    Thank you m8t!

    Great guide, going to study on it!

  10. WebpixIndia says:

    An excellent article. Helps me lot in my projects.

  11. Mowglitech says:

    Great collection.

  12. Mike Lawson says:

    Some great examples here, thanks for sharing.

  13. Helpful examples
    Thanks!

    - Shelon Padmore

  14. Leena Ajwani says:

    Good one. I will use it in my project

  15. vienna says:

    Already using it. Nice tips! Thanks a lot

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

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

  18. Alex says:

    Excellent examples. Nice sample

  19. Manoj says:

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

    Thanks again

  20. Hamzah says:

    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.

  21. Nice CSS form.
    Thanks so much..!

  22. amar says:

    excelent examples

  23. Red17 says:

    Re: bouncing flash into these. ,

  24. Maxx20 says:

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

  25. Alex83 says:

    Fans use stars to identify their preferred styles. ,

  26. Pol56 says:

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

  27. vicina.info says:

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

  28. Dany Permana says:

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

    Web Services

  29. imagebytekid says:

    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

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

  31. Atasözleri says:

    thank you, very nice working!

  32. webb says:

    Are there any free codes for forms layouts?

  33. Very nice. Thanks for sharing!

  34. Mr. Jumri says:

    cool… I like one It very usefull

  35. Mukesh.M says:

    very nice…………….

  36. satya says:

    Very Nice Totorial.

  37. Davetiye says:

    thank you wery much

  38. Just what I was looking for. Tx.

  39. atasözleri says:

    Thanks again. Wonderful examples.

    I am using in my web site..

  40. temizlik says:

    very nice shared, thanks

  41. Lucy says:

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

  42. naveed says:

    if you have creative new form plz show me code thanks

  43. Davetiye says:

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

  44. Very Nice ! Thanks my friend ! ( Brazil )

  45. thanks really nice forms..

  46. ritesh says:

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

  47. gsg says:

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

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

  49. Excellent form examples, Thanks for posting.

  50. dz says:

    thank you ! i’ll use em in my site

  51. mick says:

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

  52. atasözleri says:

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

  53. Klaus says:

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

  54. yamed says:

    Nice css forms, thank you

  55. shuvo says:

    thank you for give this forms

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

  57. Irfan Ansari says:

    Indeed great website, helped me alot,

    Thanks

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

  59. Tangent89 says:

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

  60. John says:

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

  61. Rachel says:

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

  62. tech says:

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

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

  64. David Coe says:

    Great list there guys! :D

  65. AndyC says:

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

  66. Shubh says:

    very useful forms and bueatiful forms.

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

  68. mix sms says:

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

  69. Aajiz says:

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

  70. Hina says:

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

  71. Great collection of forms..Thank you David..

  72. Jasmine says:

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

  73. Denis says:

    prelepe forme, hvala puno

  74. nichive says:

    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

  75. Simple and useful form.

  76. sofie says:

    this is very educational

  77. Helen Neely says:

    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.

  78. Divyang says:

    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.

  79. Alen says:

    Nice form examples

  80. Mark says:

    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

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

  82. Davetiye says:

    süper bir makale

  83. Brandon says:

    thanks for the inspiration.

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

  84. Davetiye says:

    Very nice makale

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

  86. Davetiye says:

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

  87. Davetiye says:

    thanks for the inspiration.

  88. Davetiye says:

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

  89. hp dv4 battery dell inspiron 1525 battery

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

  91. Vestir ju says:

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

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

  93. STB says:

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

  94. John says:

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

  95. David Goole says:

    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.

  96. ACER JONE says:

    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.

  97. Aleksandr says:

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

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

  99. siva kumar says:

    nice collections thanks for sharing

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

  101. Sherwin says:

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

  102. davetiye says:

    thank you very much

  103. Davetiye says:

    This will be very useful :)

  104. Good contribution.Thanks

  105. tekstovi says:

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

  106. sunny says:

    can any one give me source code of above examples.

  107. sunny says:

    can any one give me source code of above examples.

    my ID is:
    sana_mit@hotmail.com

  108. banja srbija says:

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

  109. Brautkleider says:

    Very nice comments Thank you..

  110. Gazeteler says:

    Very nice good thanks

  111. Irfan says:

    awesome collection, thank you

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

  113. davetiye says:

    thank you very much. good job

  114. Petar says:

    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

  115. davetiyeci says:

    awesome collection, thank you

  116. matbaa says:

    çok güzel paylaşım…

  117. soukaina says:

    i like it so much ;)

  118. Flash Games says:

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

    Thank you

  119. sylhet says:

    I am searching something like html css form.

    thanks for sharing.

  120. Seo says:

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

  121. ümit altındis says:

    thanks for excellent forms

  122. a useful platform for sharing good work ..

  123. bankoatlar says:

    thank u for all your comment

  124. at yarışı says:

    all comments are very useful

  125. Manna Shake says:

    very useful collections,wonder ful!

  126. Jatin Kalra says:

    Great,He gives good idea.

  127. vital psp says:

    informative collections

  128. Jenny says:

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

  129. prem says:

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

  130. NITin says:

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

  131. Aditya says:

    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

  132. Ugur KAZDAL says:

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

  133. Kedar says:

    Love All Collection .Thanks a lot

  134. Lex says:

    Selten so schlechtes CSS gesehn. Sieht aus wie Anno 1900

Leave a Comment

Subscribe
Membership
About the Author