CSS-Based Forms: Modern Solutions

Advertisement

In Web 2.0 registration and feedback forms can be found everywhere. Every start-up tries to attract visitors’ attention, so web-forms are becoming more and more important for the success of any company. In the end, exactly those web-forms are responsible for the first contact with potential customers. Let’s take a look, which modern solutions a web-developer can use, designing his/her next css-based form. Links checked: May/08 2008.

Developing Forms

Prettier Accessible Forms1

Screenshot2

The Form Assembly – Form Layouts3

Screenshot4

CSS Styling of forms, Stu Nicholls5

Screenshot6

Semantic Horizontal Forms7

Screenshot8

Trimming form fields9

Screenshot10

Badboy Niceforms11

Screenshot12

Functional Pretty Forms13

Screenshot14

CSS-Only, Table-less Forms15

Screenshot16

Accessible Forms

Subtraction: Free Form for All – Standardkonforme Online-Formulare17

Screenshot18

Accessible CSS Forms19

Screenshot20

Form Layout Templates21

Screenshot22

Style Web Forms Using CSS23

Screenshot24

Form Help without Popups25

Screenshot26

Fun with forms – customized input elements27

Screenshot28

Styling Form Fields29

Screenshot30

AutoSuggest – An autocomplete text field with Ajax31

Screenshot32

Really easy field validation with Prototype33

Screenshot34

Scrollable Checklists35

Screenshot36

Create Web-Forms online

Icebrrg – HTML Web forms, surveys, and invitations made chillingly simple37

Screenshot38
Screenshot39

Wufoo – Build HTML Forms, Online Surveys and Invitations40

Screenshot41
Screenshot42

JotForm – a web based WYSIWYG form builder43

Screenshot44

Accessify Form Builder45

Accessify46

FormLogix – Create web forms for free47

Formlogix48

Footnotes Link

  1. 1 http://www.alistapart.com/articles/prettyaccessibleforms
  2. 2 http://www.alistapart.com/articles/prettyaccessibleforms
  3. 3 http://www.formassembly.com/form-garden.php?formId=29&style=/form-builder/css/campground_2
  4. 4 http://www.formassembly.com/form-garden.php?formId=29&style=/form-builder/css/campground_2
  5. 5 http://www.cssplay.co.uk/menu/form.html
  6. 6 http://www.cssplay.co.uk/menu/form.html
  7. 7 http://www.skyrocket.be/2006/01/09/semantic-horizontal-forms/
  8. 8 http://www.skyrocket.be/2006/01/09/semantic-horizontal-forms/
  9. 9 http://www.stuffandnonsense.co.uk/archives/trimming_form_fields.html
  10. 10 http://www.stuffandnonsense.co.uk/archives/trimming_form_fields.html
  11. 11 http://www.badboy.ro/assets/articles/niceforms/niceforms.html
  12. 12 http://www.badboy.ro/assets/articles/niceforms/niceforms.html
  13. 13 http://www.agavegroup.com/?p=35
  14. 14 http://www.agavegroup.com/?p=35
  15. 15 http://jeffhowden.com/code/css/forms/
  16. 16 http://jeffhowden.com/code/css/forms/
  17. 17 http://www.subtraction.com/archives/2005/0822_free_form_fo.php
  18. 18 http://www.subtraction.com/archives/2005/0822_free_form_fo.php
  19. 19 http://www.websiteoptimization.com/speed/tweak/forms/
  20. 20 http://www.websiteoptimization.com/speed/tweak/forms/
  21. 21 http://www.themaninblue.com/writing/perspective/2004/03/24/
  22. 22 http://www.themaninblue.com/writing/perspective/2004/03/24/
  23. 23 http://www.sitepoint.com/article/style-web-forms-css
  24. 24 http://www.sitepoint.com/article/style-web-forms-css
  25. 25 http://juicystudio.com/article/form-help-without-popups.html
  26. 26 http://juicystudio.com/article/form-help-without-popups.html
  27. 27 http://www.picment.com/articles/css/funwithforms/
  28. 28 http://www.picment.com/articles/css/funwithforms/
  29. 29 http://www.aplus.co.yu/css/styling-form-fields/
  30. 30 http://www.aplus.co.yu/css/styling-form-fields/
  31. 31 http://www.brandspankingnew.net/archive/2006/08/ajax_auto-suggest_auto-complete.html
  32. 32 http://www.brandspankingnew.net/archive/2006/08/ajax_auto-suggest_auto-complete.html
  33. 33 http://tetlaw.id.au/view/blog/really-easy-field-validation-with-prototype/
  34. 34 http://tetlaw.id.au/view/blog/really-easy-field-validation-with-prototype/
  35. 35 http://c82.net/article.php?ID=25
  36. 36 http://c82.net/article.php?ID=25
  37. 37 http://www.icebrrg.com
  38. 38 http://www.icebrrg.com
  39. 39 http://www.icebrrg.com
  40. 40 http://www.wufoo.com
  41. 41 http://www.wufoo.com
  42. 42 http://www.wufoo.com
  43. 43 http://www.jotform.com
  44. 44 http://www.jotform.com
  45. 45 http://www.accessify.com/tools-and-wizards/accessibility-tools/form-builder/
  46. 46 http://www.accessify.com/tools-and-wizards/accessibility-tools/form-builder/
  47. 47 http://www.formlogix.com/
  48. 48 http://www.formlogix.com/

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

Advertisement
  1. 1

    Thanks for that excellent collection!

    9
  2. 2

    Seems a shame not to also mention The Form Assembly (as a form-generating solution):
    http://www.formassembly.com

    And their free HTML-form styling library, wForms:
    http://www.formassembly.com/wForms/

    5
  3. 3

    This post is an english version of this german blog-entry:

    http://www.drweb.de/weblog/weblog/?p=708

    2
  4. 4

    Really thorough list! I’m impressed.

    1
  5. 5

    Nice article. Excellent post for Web2.0 resources.

    1
  6. 6

    Brilliant collection!!

    1
  7. 7

    Annette Calabrese

    November 13, 2006 9:33 pm

    Great collection, thanks for the useful reference

    1
  8. 8

    I miss this one (http://paularmstrongdesigns.com/awesome/form/) in that incredible list ;-)

    -1
  9. 9

    Nice list.

    1
  10. 10

    Jesper Rønn-Jensen

    November 14, 2006 7:52 pm

    Thanks for that comprehensive form collection.

    2
  11. 11

    Yeah.. Web 2.0 is really cool…

    1
  12. 12

    It only covers a small area of form styling, but I wrote a piece on styling form buttons: http://www.tyssendesign.com.au/articles/css/styling-form-buttons/

    0
  13. 13

    kewl forms you got here. really informative. thanks.

    1
  14. 14

    I’m in love!!!!!!!!!

    Great job!!!

    1
  15. 15

    I always prefered the Paul Armstrong’s “Awesome Form”:

    1
  16. 16

    Lovely web 2.0 forms. I am definitely going to implement some ideas to my future web 2.0 website.

    1
  17. 17

    wow very useful I love it.. thanks!

    1
  18. 18

    Great. Just great. Thanks for your lists and references

    1
  19. 19

    Wow! What a great resource!
    Many thanks to you.

    3
  20. 20

    There’s one form not listed that absolutely should be and that’s Mike Cherim’s Accessible, Secure Form.

    http://green-beast.com/blog/?p=128

    0
  21. 21

    krishnamoorthy manickam

    November 28, 2006 7:34 pm

    It’s amazing… Thanks a lot…

    1
  22. 22

    nice listing, it’s helpfull, thanks.

    1
  23. 23

    Ruby on rails developers can easily produce css forms with the CssFormBuilder plugin ( http://cssformbuilder.rubyforge.org/wiki/wiki.pl )

    1
  24. 24

    Wow, great list, thanks!

    1
  25. 25

    In none of the examples there’s a css replacement for the “Browse” button of the file upload form…

    1
  26. 26

    A usefull resource for all form making options.

    1
  27. 27

    I will have a good look at this. This looks very good, thanks.

    1
  28. 28

    absolutely wonderful web source :D

    0
  29. 29

    nice list of pretty forms. thanks!

    0
  30. 30

    Absoutellz GREAT, thank zou really verz much…

    1
  31. 31

    Hi Gang,
    Your lists of CSS and design resources, is rapidly reducing my needs to go Google the web universe.
    The funny thing is I never do seem to google up some of these goodies. thanks so much!

    1
  32. 32

    Incredible large and nice collection. Thank you for sharing it. But now i’ve to go on to create better forms for our site.

    the polarizer

    1
  33. 33

    Thancks for all that examples!
    Nice!

    1
  34. 34

    Mi prefered style is the fifth. Thanks for the fantastic compilation.

    1
  35. 35

    i am working on web application want to set Browsers Tabs Title as my project name as if u open google site it get set asGoogle with icon

    1
  36. 36

    really great post!!

    1
  37. 37

    Great and excellent article t’s realy helpful. Thanks again.

    1
  38. 38

    Good examples of beautiful functional Web 2.0 forms.

    1
  39. 39

    I think these posts make the real web 2.0!

    2
  40. 40

    On personal opinion, I find this very helpful.

    1
  41. 41

    Awesome list… jesus. Thanks a ton.

    1
  42. 42

    Thanx for the nice collection. Keep on moving!!!

    1
  43. 43

    Thanx, this is some pretty list, very nice!

    1
  44. 44

    Wow, great list, thanks.

    1
  45. 45

    Thanks for that excellent list, great work.

    1
  46. 46

    Thanx for the nice collection. Keep on coming

    1
  47. 47

    Калоян К. Цветков

    May 27, 2007 2:17 pm

    Nice! The horizontal sematic form seems most fun :)

    1
  48. 48

    Jonathan Goodpasture

    June 7, 2007 12:55 am

    Nice selection of css forms and I don’t care what anybody says… if it isn’t a spreadsheet looking object, use css. If you use the words ‘build’ or ‘layout’, you need css. I am fairly new to css but have been building tableless websites now for about 6 months and converting old table layout websites to tableless and I absolutely wonder where have I been all these years looking back. Very nice collection of forms. This is my first form build in css as I am so looking forward to building a feedback form for our corporate intranet. THANKS!

    2
  49. 49

    WOW! Now, we have to choose :)

    1
  50. 50

    Excellent and very informative site!

    1

↑ Back to top