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

Advertisement
  1. 1

    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!

    1
  2. 52

    Big thanks for this post :)

    1
  3. 103

    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.

    1
  4. 154

    Nice article. Excellent post for Web2.0 resources.

    1
  5. 205

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

    1
  6. 256

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

    1
  7. 307

    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

    1
  8. 358

    Great resources. I didn’t knew their existense…

    thank you for sharing this.

    1
  9. 409

    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!

    1
  10. 460

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

    1
  11. 511

    Great examples of some great designs… thanks !

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

    1
  12. 562

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

    1
  13. 613

    Wow some of those are really professional!

    1
  14. 664

    Great resources. I didn’t knew their existense…

    2
  15. 715

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

    1
  16. 766

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

    1
  17. 817

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

    1
  18. 868

    Informative and useful

    1
  19. 919

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

    1
  20. 970

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

    Thanks and great work !

    1
  21. 1021

    Good and nice website thank you very much

    2
  22. 1072

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

    -1

↑ Back to top