Smashing Magazine
CSS-Based Forms: Modern Solutions
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
The Form Assembly – Form Layouts
CSS Styling of forms, Stu Nicholls
CSS-Only, Table-less Forms
Accessible Forms
Subtraction: Free Form for All – Standardkonforme Online-Formulare
Fun with forms – customized input elements
AutoSuggest – An autocomplete text field with Ajax
Really easy field validation with Prototype
Create Web-Forms online
Icebrrg – HTML Web forms, surveys, and invitations made chillingly simple
Wufoo – Build HTML Forms, Online Surveys and Invitations
Vitaly Friedman, editor-in-chief of Smashing Magazine, an online magazine dedicated to designers and developers.
- 73 Comments
- 1
- 2
November 13th, 2006 7:22 amSeems a shame not to also mention The Form Assembly (as a form-generating solution):
http://www.formassembly.comAnd their free HTML-form styling library, wForms:
http://www.formassembly.com/wForms/ - 3November 13th, 2006 3:54 pm
This post is an english version of this german blog-entry:
- 4November 13th, 2006 5:28 pm
Really thorough list! I’m impressed.
- 5November 13th, 2006 5:44 pm
Nice article. Excellent post for Web2.0 resources.
- 6November 13th, 2006 8:16 pm
Brilliant collection!!
- 7November 13th, 2006 9:33 pm
Great collection, thanks for the useful reference
- 8November 14th, 2006 8:45 am
I miss this one (http://paularmstrongdesigns.com/awesome/form/) in that incredible list ;-)
- 9November 14th, 2006 1:46 am
Nice list.
- 10November 14th, 2006 7:52 pm
Thanks for that comprehensive form collection.
- 11November 15th, 2006 1:02 pm
Yeah.. Web 2.0 is really cool…
- 12November 15th, 2006 8:30 pm
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/
- 13November 16th, 2006 10:08 am
kewl forms you got here. really informative. thanks.
- 14November 16th, 2006 5:56 pm
I’m in love!!!!!!!!!
Great job!!!
- 15November 16th, 2006 3:57 am
I always prefered the Paul Armstrong’s “Awesome Form”:
- 16November 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.
- 17November 17th, 2006 5:32 pm
wow very useful I love it.. thanks!
- 18November 18th, 2006 2:53 pm
Great. Just great. Thanks for your lists and references
- 19November 20th, 2006 10:37 am
Wow! What a great resource!
Many thanks to you. - 20November 22nd, 2006 6:56 am
There’s one form not listed that absolutely should be and that’s Mike Cherim’s Accessible, Secure Form.
- 21November 28th, 2006 7:34 pm
It’s amazing… Thanks a lot…
- 22November 30th, 2006 3:36 am
nice listing, it’s helpfull, thanks.
- 23December 6th, 2006 7:36 pm
Ruby on rails developers can easily produce css forms with the CssFormBuilder plugin ( http://cssformbuilder.rubyforge.org/wiki/wiki.pl )
- 24December 7th, 2006 12:54 am
Wow, great list, thanks!
- 25December 11th, 2006 6:50 pm
In none of the examples there’s a css replacement for the “Browse” button of the file upload form…
- 26December 13th, 2006 2:31 am
A usefull resource for all form making options.
- 27January 15th, 2007 5:33 am
I will have a good look at this. This looks very good, thanks.
- 28January 20th, 2007 6:24 am
absolutely wonderful web source :D
- 29January 22nd, 2007 4:05 am
nice list of pretty forms. thanks!
- 30January 24th, 2007 1:19 am
Absoutellz GREAT, thank zou really verz much…
- 31January 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! - 32February 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
- 33February 16th, 2007 10:10 pm
Thancks for all that examples!
Nice! - 34February 18th, 2007 12:08 pm
Mi prefered style is the fifth. Thanks for the fantastic compilation.
- 35February 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
- 36March 9th, 2007 9:45 pm
really great post!!
- 37March 11th, 2007 11:23 am
Great and excellent article t’s realy helpful. Thanks again.
- 38March 13th, 2007 11:41 pm
Good examples of beautiful functional Web 2.0 forms.
- 39March 15th, 2007 9:23 pm
I think these posts make the real web 2.0!
- 40March 22nd, 2007 9:51 pm
On personal opinion, I find this very helpful.
- 41April 3rd, 2007 4:10 am
Awesome list… jesus. Thanks a ton.
- 42April 11th, 2007 7:21 am
Thanx for the nice collection. Keep on moving!!!
- 43April 11th, 2007 8:44 pm
Thanx, this is some pretty list, very nice!
- 44April 19th, 2007 3:44 pm
Wow, great list, thanks.
- 45April 20th, 2007 9:42 am
Thanks for that excellent list, great work.
- 46April 22nd, 2007 6:00 am
Thanx for the nice collection. Keep on coming
- 47May 27th, 2007 2:17 pm
Nice! The horizontal sematic form seems most fun :)
- 48June 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!
- 49June 15th, 2007 12:53 am
WOW! Now, we have to choose :)
- 50July 3rd, 2007 7:19 pm
Excellent and very informative site!
- 51July 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! - 52July 5th, 2007 10:36 pm
Big thanks for this post :)
- 53July 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.
- 54July 25th, 2007 11:53 pm
Nice article. Excellent post for Web2.0 resources.
- 55August 2nd, 2007 2:32 am
WUFOOO has great forms generator, but unfortuatelly you have paid for using it. Is there something for free?
- 56August 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!. - 57August 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.
http://www.dreamincode.net/forums/showtopic15621.htm
http://www.quirksmode.org/dom/inputfile.html - 58August 15th, 2007 1:22 pm
Great resources. I didn’t knew their existense…
thank you for sharing this.
- 59August 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!
- 60September 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!
- 61September 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 ?
- 62September 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..!
- 63September 14th, 2007 11:49 am
Wow some of those are really professional!
- 64September 20th, 2007 9:51 am
Great resources. I didn’t knew their existense…
- 65October 6th, 2007 9:29 am
Here’s a free online tool to build your own CSS-based forms: http://www.phpform.org
- 66October 16th, 2007 10:17 pm
I long time looking for this information and I suddenly find here. I.m happe thank You.
- 67November 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 :)
- 68November 29th, 2007 11:18 am
Informative and useful
- 69December 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.
- 70December 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 !
- 71December 8th, 2007 9:37 pm
Good and nice website thank you very much
- 72December 16th, 2007 9:16 pm
Dear author! Thank’s a lot for this useful and great links!
- Sqetch, an Illustrator Wireframe Toolkit - http://bit.ly/91FmzO
- @ivorpad sorry for the stupid question, but how exactly is it easier than purchasing them in the Smashing Shop? :)
- Must-See: Impressive mixing deck of the future - http://bit.ly/9PSDjk (via @sideshowdarran @uxmag)
- @kassy4 you certainly did! :-P
- @jbruwer thanks for the link, but I am afraid it would be fair to not distribute the file skipping 365psd.com. We respect their efforts.
- @kassy4 buttons are not supposed to be floated, they are here to be clicked ;-)
- What is the worst mistake you see other designers do all the time? #smmistake
- @sazzy no worries, please take all the time you need. We have no deadlines!
- Google Instant Search Released - http://bit.ly/drRq8U
- @sazzy yaaay, happy birthday, Sarah! And congratulations to the wedding! You are a great couple!
Thanks for that excellent collection!