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
orangeguru
November 12th, 2006 9:31 pmThanks for that excellent collection!
Drew
November 13th, 2006 7:22 amSeems 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/
sven
November 13th, 2006 3:54 pmThis post is an english version of this german blog-entry:
http://www.drweb.de/weblog/weblog/?p=708
RipperDoc
November 13th, 2006 5:28 pmReally thorough list! I’m impressed.
PohEe.com
November 13th, 2006 5:44 pmNice article. Excellent post for Web2.0 resources.
Ivan Minic
November 13th, 2006 8:16 pmBrilliant collection!!
Annette Calabrese
November 13th, 2006 9:33 pmGreat collection, thanks for the useful reference
RUDE
November 14th, 2006 8:45 amI miss this one (http://paularmstrongdesigns.com/awesome/form/) in that incredible list ;-)
Paul Armstrong
November 14th, 2006 1:46 amNice list.
Jesper Rønn-Jensen
November 14th, 2006 7:52 pmThanks for that comprehensive form collection.
Ryan
November 15th, 2006 1:02 pmYeah.. Web 2.0 is really cool…
John Faulds
November 15th, 2006 8:30 pmIt 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/
Ruel
November 16th, 2006 10:08 amkewl forms you got here. really informative. thanks.
joseph
November 16th, 2006 5:56 pmI’m in love!!!!!!!!!
Great job!!!
Christian Tietze
November 16th, 2006 3:57 amI always prefered the Paul Armstrong’s “Awesome Form”:
Nelly
November 17th, 2006 12:13 pmLovely web 2.0 forms. I am definitely going to implement some ideas to my future web 2.0 website.
Allan
November 17th, 2006 5:32 pmwow very useful I love it.. thanks!
Shahrvand
November 18th, 2006 2:53 pmGreat. Just great. Thanks for your lists and references
JPC
November 20th, 2006 10:37 amWow! What a great resource!
Many thanks to you.
Gill
November 22nd, 2006 6:56 amThere’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
krishnamoorthy manickam
November 28th, 2006 7:34 pmIt’s amazing… Thanks a lot…
buchin
November 30th, 2006 3:36 amnice listing, it’s helpfull, thanks.
Addsw
December 6th, 2006 7:36 pmRuby on rails developers can easily produce css forms with the CssFormBuilder plugin ( http://cssformbuilder.rubyforge.org/wiki/wiki.pl )
S.W.
December 7th, 2006 12:54 amWow, great list, thanks!
koan
December 11th, 2006 6:50 pmIn none of the examples there’s a css replacement for the “Browse” button of the file upload form…
Mike Carter
December 13th, 2006 2:31 amA usefull resource for all form making options.
Wes
January 15th, 2007 5:33 amI will have a good look at this. This looks very good, thanks.
tech
January 20th, 2007 6:24 amabsolutely wonderful web source :D
css menus
January 22nd, 2007 4:05 amnice list of pretty forms. thanks!
Mathew Obrazy
January 24th, 2007 1:19 amAbsoutellz GREAT, thank zou really verz much…
tzMedia
January 25th, 2007 1:11 amHi 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!
Polarizer
February 1st, 2007 5:17 pmIncredible 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
Greg
February 16th, 2007 10:10 pmThancks for all that examples!
Nice!
jaatu
February 18th, 2007 12:08 pmMi prefered style is the fifth. Thanks for the fantastic compilation.
Amar
February 22nd, 2007 6:09 pmi 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
andrea
March 9th, 2007 9:45 pmreally great post!!
Thermage
March 11th, 2007 11:23 amGreat and excellent article t’s realy helpful. Thanks again.
Mec
March 13th, 2007 11:41 pmGood examples of beautiful functional Web 2.0 forms.
allbout
March 15th, 2007 9:23 pmI think these posts make the real web 2.0!
guanhua
March 22nd, 2007 9:51 pmOn personal opinion, I find this very helpful.
Replays
April 3rd, 2007 4:10 amAwesome list… jesus. Thanks a ton.
snark
April 11th, 2007 7:21 amThanx for the nice collection. Keep on moving!!!
Franke
April 11th, 2007 8:44 pmThanx, this is some pretty list, very nice!
Peter
April 19th, 2007 3:44 pmWow, great list, thanks.
Maik
April 20th, 2007 9:42 amThanks for that excellent list, great work.
Fastian
April 22nd, 2007 6:00 amThanx for the nice collection. Keep on coming
Калоян К. Цветков
May 27th, 2007 2:17 pmNice! The horizontal sematic form seems most fun :)
Jonathan Goodpasture
June 7th, 2007 12:55 amNice 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!
Alexey Maurov
June 15th, 2007 12:53 amWOW! Now, we have to choose :)
Chuck
July 3rd, 2007 7:19 pmExcellent and very informative site!
Martino
July 4th, 2007 7:30 pmWow. 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!
fab
July 5th, 2007 10:36 pmBig thanks for this post :)
Keral Patel
July 23rd, 2007 12:04 amOh 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.
Desenie
July 25th, 2007 11:53 pmNice article. Excellent post for Web2.0 resources.
decimus
August 2nd, 2007 2:32 amWUFOOO has great forms generator, but unfortuatelly you have paid for using it. Is there something for free?
Samson
August 2nd, 2007 5:27 amHey 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!.
Nina
August 10th, 2007 8:12 amIn 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
andreas
August 15th, 2007 1:22 pmGreat resources. I didn’t knew their existense…
thank you for sharing this.
Rsibaja
August 16th, 2007 11:26 amIn 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!
Rene Glembotzky
September 11th, 2007 8:33 pmHi, i’m working on an article about css Forms. Is it okay to quote the links you’ve researched? TIA!
Ed
September 11th, 2007 11:18 pmGreat examples of some great designs… thanks !
One question… why isn’t the form i just filled in (base of this page) styled ?
Location Bretagne
September 12th, 2007 9:43 pmIf 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..!
租車服務
September 14th, 2007 11:49 amWow some of those are really professional!
結婚相
September 20th, 2007 9:51 amGreat resources. I didn’t knew their existense…
ynr
October 6th, 2007 9:29 amHere’s a free online tool to build your own CSS-based forms: http://www.phpform.org
Armin
October 16th, 2007 10:17 pmI long time looking for this information and I suddenly find here. I.m happe thank You.
mowglitech
November 11th, 2007 1:45 amAn excellent article with various methods of css driven forms designs. Your article helps loads of help to many designers. Thanks :)
Diwakar
November 29th, 2007 11:18 amInformative and useful
ef
December 4th, 2007 1:44 pmTechnically it can’t be done because the browse button supposedly comes from the operating system and not the browser.
Aleron
December 5th, 2007 2:12 pmWOW – I have been do this type of search each time we need inspiration for something different.
Thanks and great work !
tech
December 8th, 2007 9:37 pmGood and nice website thank you very much
David
December 16th, 2007 9:16 pmDear author! Thank’s a lot for this useful and great links!