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

  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 topShare on Twitter

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 performance problems in large companies. Get in touch.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Thanks for that excellent collection!

  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/

  3. 3

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

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

  4. 4

    Really thorough list! I’m impressed.

  5. 5

    Nice article. Excellent post for Web2.0 resources.

  6. 6

    Brilliant collection!!

  7. 7

    Annette Calabrese

    November 13, 2006 9:33 pm

    Great collection, thanks for the useful reference

  8. 8

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

  9. 9

    Nice list.

  10. 10

    Jesper Rønn-Jensen

    November 14, 2006 7:52 pm

    Thanks for that comprehensive form collection.

  11. 11

    Yeah.. Web 2.0 is really cool…

  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/

  13. 13

    kewl forms you got here. really informative. thanks.

  14. 14

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

    Great job!!!

  15. 15

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

  16. 16

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

  17. 17

    wow very useful I love it.. thanks!

  18. 18

    Great. Just great. Thanks for your lists and references

  19. 19

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

  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

  21. 21

    krishnamoorthy manickam

    November 28, 2006 7:34 pm

    It’s amazing… Thanks a lot…

  22. 22

    nice listing, it’s helpfull, thanks.

  23. 23

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

  24. 24

    Wow, great list, thanks!

  25. 25

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

  26. 26

    A usefull resource for all form making options.

  27. 27

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

  28. 28

    absolutely wonderful web source :D

  29. 29

    nice list of pretty forms. thanks!

  30. 30

    Absoutellz GREAT, thank zou really verz much…

  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!

  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

  33. 33

    Thancks for all that examples!
    Nice!

  34. 34

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

  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

  36. 36

    really great post!!

  37. 37

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

  38. 38

    Good examples of beautiful functional Web 2.0 forms.

  39. 39

    I think these posts make the real web 2.0!

  40. 40

    On personal opinion, I find this very helpful.

  41. 41

    Awesome list… jesus. Thanks a ton.

  42. 42

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

  43. 43

    Thanx, this is some pretty list, very nice!

  44. 44

    Wow, great list, thanks.

  45. 45

    Thanks for that excellent list, great work.

  46. 46

    Thanx for the nice collection. Keep on coming

  47. 47

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

    May 27, 2007 2:17 pm

    Nice! The horizontal sematic form seems most fun :)

  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!

  49. 49

    WOW! Now, we have to choose :)

  50. 50

    Excellent and very informative site!

  51. 51

    Wow. Very impressive.
    Supreme concept of a personalized web portal.
    I look forward to using this as my browsers’ start page.
    Keep up the good work!

  52. 52

    Big thanks for this post :)

  53. 53

    Oh my god. Well I just said thank you to you on CSS tables page but this is is more cooler then that one. All research already done by you guys can save lots of hours for many developers. I am really very impressed with all this stuff. Thanks a lot once again.

  54. 54

    Nice article. Excellent post for Web2.0 resources.

  55. 55

    WUFOOO has great forms generator, but unfortuatelly you have paid for using it. Is there something for free?

  56. 56

    Hey folk,
    U kinda shock me with these mouth watering tips and pranks.
    My site is goin’ o be presented in the heavenlies. hahaha.
    keep it up mate!.

  57. 57

    In response to koan’s request for a way to change the browse button’s style…I found a few pages that propose hack-ish solutions. Technically it can’t be done because the browse button supposedly comes from the operating system and not the browser. Solutions typically take the form of making the Browse button invisible and placing an image over it.

    http://www.dreamincode.net/forums/showtopic15621.htm
    http://www.quirksmode.org/dom/inputfile.html

  58. 58

    Great resources. I didn’t knew their existense…

    thank you for sharing this.

  59. 59

    In the first example (Prettier Accessible Forms from a list apart) the guy is using Jquery just for posicionated a simple input element!! GOD! He is calling 2 JS file (the jquery framework and the plugin) just for that! And you can do that just with CSS!

    however the way how this guy is using the elements that’s impressive…

    ***********************

    SM very nice article! like always!

  60. 60

    Hi, i’m working on an article about css Forms. Is it okay to quote the links you’ve researched? TIA!

  61. 61

    Great examples of some great designs… thanks !

    One question… why isn’t the form i just filled in (base of this page) styled ?

  62. 62

    If you use Web 2.0 techniques in mobile devices (e.g. Pocket IE etc.) you will notice that it increases bandwith consumption. This is a really problem because mobile bandwith is much more expensive..!

  63. 63

    Wow some of those are really professional!

  64. 64

    Great resources. I didn’t knew their existense…

  65. 65

    Here’s a free online tool to build your own CSS-based forms: http://www.phpform.org

  66. 66

    I long time looking for this information and I suddenly find here. I.m happe thank You.

  67. 67

    An excellent article with various methods of css driven forms designs. Your article helps loads of help to many designers. Thanks :)

  68. 68

    Informative and useful

  69. 69

    Technically it can’t be done because the browse button supposedly comes from the operating system and not the browser.

  70. 70

    WOW – I have been do this type of search each time we need inspiration for something different.

    Thanks and great work !

  71. 71

    Good and nice website thank you very much

  72. 72

    Dear author! Thank’s a lot for this useful and great links!

↑ Back to top