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 Forms
Screenshot

The Form Assembly – Form Layouts
Screenshot

CSS Styling of forms, Stu Nicholls
Screenshot

Semantic Horizontal Forms
Screenshot

Trimming form fields
Screenshot

Badboy Niceforms
Screenshot

Functional Pretty Forms
Screenshot

CSS-Only, Table-less Forms
Screenshot
Accessible Forms

Subtraction: Free Form for All – Standardkonforme Online-Formulare
Screenshot

Accessible CSS Forms
Screenshot

Form Layout Templates
Screenshot

Style Web Forms Using CSS
Screenshot

Form Help without Popups
Screenshot

Fun with forms – customized input elements
Screenshot

Styling Form Fields
Screenshot

AutoSuggest – An autocomplete text field with Ajax
Screenshot

Really easy field validation with Prototype
Screenshot

Scrollable Checklists
Screenshot

Create Web-Forms online

Icebrrg – HTML Web forms, surveys, and invitations made chillingly simple
Screenshot
Screenshot
Wufoo – Build HTML Forms, Online Surveys and Invitations
Screenshot

Screenshot
JotForm – a web based WYSIWYG form builder
Screenshot

Accessify Form Builder
Accessify

FormLogix – Create web forms for free
Formlogix

↑ Back to top

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 and loves solving complex problems in large companies. Get in touch.

  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/

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

    1
  52. 52

    Big thanks for this post :)

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

    1
  54. 54

    Nice article. Excellent post for Web2.0 resources.

    1
  55. 55

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

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

    1
  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

    1
  58. 58

    Great resources. I didn’t knew their existense…

    thank you for sharing this.

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

    1
  60. 60

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

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

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

    1
  63. 63

    Wow some of those are really professional!

    1
  64. 64

    Great resources. I didn’t knew their existense…

    2
  65. 65

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

    1
  66. 66

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

    1
  67. 67

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

    1
  68. 68

    Informative and useful

    1
  69. 69

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

    1
  70. 70

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

    Thanks and great work !

    1
  71. 71

    Good and nice website thank you very much

    2
  72. 72

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

    -1

↑ Back to top