Smashing Magazine we smash you with the information that will make your life easier. really.

CSS-Based Forms: Modern Solutions

November 11th, 2006 in CSS | 305 Comments

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

The Form Assembly - Form Layouts

CSS Styling of forms, Stu Nicholls

Semantic Horizontal Forms

Trimming form fields

Badboy Niceforms

Functional Pretty Forms

CSS-Only, Table-less Forms

Accessible Forms

Subtraction: Free Form for All - Standardkonforme Online-Formulare

Accessible CSS Forms

Form Layout Templates

Style Web Forms Using CSS

Form Help without Popups

Fun with forms - customized input elements

Styling Form Fields

AutoSuggest - An autocomplete text field with Ajax

Really easy field validation with Prototype

Scrollable Checklists

Create Web-Forms online

Icebrrg - HTML Web forms, surveys, and invitations made chillingly simple

Wufoo - Build HTML Forms, Online Surveys and Invitations

JotForm - a web based WYSIWYG form builder

Accessify Form Builder

FormLogix - Create web forms for free

Published in CSS, November 11th, 2006
Tags: forms, free, Tutorials, web 2.0

1.

orangeguru (November 12th, 2006, 9:31 pm)

Thanks for that excellent collection!
2.

Drew (November 13th, 2006, 7:22 am)

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

And their free HTML-form styling library, wForms:
Link [www.formassembly.com]
3.

sven (November 13th, 2006, 3:54 pm)

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

Link [www.drweb.de]
4.

RipperDoc (November 13th, 2006, 5:28 pm)

Really thorough list! I’m impressed.
5.

PohEe.com (November 13th, 2006, 5:44 pm)

Nice article. Excellent post for Web2.0 resources.
6.

Ivan Minic (November 13th, 2006, 8:16 pm)

Brilliant collection!!
7.

Annette Calabrese (November 13th, 2006, 9:33 pm)

Great collection, thanks for the useful reference
8.

Paul Armstrong (November 14th, 2006, 1:46 am)

Nice list. Any chance you’d be up to adding Awesome Form?
Link [paularmstrongdesigns.com]
9.

RUDE (November 14th, 2006, 8:45 am)

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

Jesper Rønn-Jensen (November 14th, 2006, 7:52 pm)

Thanks for that comprehensive form collection.

This Justaddwater article on usability and visualization of required form fiels:
Link [justaddwater.dk]
11.

Ryan (November 15th, 2006, 1:02 pm)

Yeah.. Web 2.0 is really cool…
12.

John Faulds (November 15th, 2006, 8:30 pm)

It only covers a small area of form styling, but I wrote a piece on styling form buttons: Link [www.tyssendesign.com.au]
13.

Christian Tietze (November 16th, 2006, 3:57 am)

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

Link [paularmstrongdesigns.com]
14.

Ruel (November 16th, 2006, 10:08 am)

kewl forms you got here. really informative. thanks.
15.

joseph (November 16th, 2006, 5:56 pm)

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

Great job!!!
16.

Nelly (November 17th, 2006, 12:13 pm)

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

Allan (November 17th, 2006, 5:32 pm)

wow very useful I love it.. thanks!
18.

Shahrvand (November 18th, 2006, 2:53 pm)

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

JPC (November 20th, 2006, 10:37 am)

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

Gill (November 22nd, 2006, 6:56 am)

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

Link [green-beast.com]
21.

krishnamoorthy manickam (November 28th, 2006, 7:34 pm)

It’s amazing… Thanks a lot…
22.

buchin (November 30th, 2006, 3:36 am)

nice listing, it’s helpfull, thanks.
23.

Addsw (December 6th, 2006, 7:36 pm)

Ruby on rails developers can easily produce css forms with the CssFormBuilder plugin ( Link [cssformbuilder.rubyforge.org] )
24.

S.W. (December 7th, 2006, 12:54 am)

Wow, great list, thanks!
25.

koan (December 11th, 2006, 6:50 pm)

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

Mike Carter (December 13th, 2006, 2:31 am)

A usefull resource for all form making options.
27.

Wes (January 15th, 2007, 5:33 am)

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

tech (January 20th, 2007, 6:24 am)

absolutely wonderful web source :D
29.

css menus (January 22nd, 2007, 4:05 am)

nice list of pretty forms. thanks!
30.

Mathew Obrazy (January 24th, 2007, 1:19 am)

Absoutellz GREAT, thank zou really verz much…
31.

tzMedia (January 25th, 2007, 1:11 am)

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.

Polarizer (February 1st, 2007, 5:17 pm)

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.

Tony Y. (February 14th, 2007, 3:50 am)

A powerful now form server called Nenest is currently in Beta! A ton of powerful features. Demo:
Link [nenest.com]

Template:
Link [nenest.com]
34.

Greg (February 16th, 2007, 10:10 pm)

Thancks for all that examples!
Nice!
35.

jaatu (February 18th, 2007, 12:08 pm)

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

Amar (February 22nd, 2007, 6:09 pm)

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

andrea (March 9th, 2007, 9:45 pm)

really great post!!
38.

Thermage (March 11th, 2007, 11:23 am)

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

Mec (March 13th, 2007, 11:41 pm)

Good examples of beautiful functional Web 2.0 forms.
40.

allbout (March 15th, 2007, 9:23 pm)

I think these posts make the real web 2.0!
41.

guanhua (March 22nd, 2007, 9:51 pm)

On personal opinion, I find this very helpful.
Guys, I have also posted some more relevant info further on this, not sure if you find it useful: Link [www.bidmaxhost.com]
42.

Replays (April 3rd, 2007, 4:10 am)

Awesome list… jesus. Thanks a ton.
43.

snark (April 11th, 2007, 7:21 am)

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

Franke (April 11th, 2007, 8:44 pm)

Thanx, this is some pretty list, very nice!
45.

Peter (April 19th, 2007, 3:44 pm)

Wow, great list, thanks.
46.

Andy (April 19th, 2007, 9:55 pm)

Strongly recommend this one:

http://www.nenest.com/yform/Studio/

Lots of useful features like Auto-layout, Control + drag to copy …

I love it very much!
47.

Maik (April 20th, 2007, 9:42 am)

Thanks for that excellent list, great work.
48.

Fastian (April 22nd, 2007, 6:00 am)

Thanx for the nice collection. Keep on coming
49.

Калоян К. Цветков (May 27th, 2007, 2:17 pm)

Nice! The horizontal sematic form seems most fun :)
50.

Jonathan Goodpasture (June 7th, 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!
51.

Alexey Maurov (June 15th, 2007, 12:53 am)

WOW! Now, we have to choose :)
52.

Chuck (July 3rd, 2007, 7:19 pm)

Excellent and very informative site!
53.

Martino (July 4th, 2007, 7:30 pm)

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

fab (July 5th, 2007, 10:36 pm)

Big thanks for this post :)
55.

Keral Patel (July 23rd, 2007, 12:04 am)

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

Desenie (July 25th, 2007, 11:53 pm)

Nice article. Excellent post for Web2.0 resources.
57.

decimus (August 2nd, 2007, 2:32 am)

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

Samson (August 2nd, 2007, 5:27 am)

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

Nina (August 10th, 2007, 8:12 am)

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.

Link [www.dreamincode.net]
Link [www.quirksmode.org]
60.

andreas (August 15th, 2007, 1:22 pm)

Great resources. I didn’t knew their existense…

thank you for sharing this.
61.

Rsibaja (August 16th, 2007, 11:26 am)

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

Rene Glembotzky (September 11th, 2007, 8:33 pm)

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

Ed (September 11th, 2007, 11:18 pm)

Great examples of some great designs… thanks !

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

Location Bretagne (September 12th, 2007, 9:43 pm)

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

租車服務 (September 14th, 2007, 11:49 am)

Wow some of those are really professional!
66.

結婚相 (September 20th, 2007, 9:51 am)

Great resources. I didn’t knew their existense…
67.

ynr (October 6th, 2007, 9:29 am)

Here’s a free online tool to build your own CSS-based forms: Link [www.phpform.org]
68.

Armin (October 16th, 2007, 10:17 pm)

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

mowglitech (November 11th, 2007, 1:45 am)

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

Diwakar (November 29th, 2007, 11:18 am)

Informative and useful
71.

ef (December 4th, 2007, 1:44 pm)

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

Aleron (December 5th, 2007, 2:12 pm)

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

Thanks and great work !
73.

tech (December 8th, 2007, 9:37 pm)

Good and nice website thank you very much
74.

David (December 16th, 2007, 9:16 pm)

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