posted: 7/30/07 filed under: Web Development
Searching for the perfect web form design? Need help standardizing your form building for usability and accessibility? Here are 101 resources to help you build a better web form.
Web Form Basics
- Basic Forms - basic input - yourhtmlsource.com
- Basic Forms Tutorial - theukwebdesigncompany.com
- HTML Forms and Input - w3schools.com
- HTML forms tutorial - web-source.net
- HTML Form Tutorial - willmaster.com
- Forms in HTML documents - w3.org
Best Practices / Usability / Accessability Recommendations
- 7 Steps to Useable Forms - sitepoint.com
- Accessible, stylish form layout - themaninblue.com
- Better Web Forms - 7nights.com
- Building better HTML forms - 456bereastreet.com
- Creating Accessible Forms - ohio-state.edu
- Dynamic Help in Web Forms - uxmatters.com
- Efficient creation of sensible and usable forms - 456bereastreet.com
- Eight UI tips for better Web forms - builderau.com.au
- Enhancing form usability with instructions and validation - techrepublic.com
- Evaluating the Usability of Search Forms Using Eyetracking: A Practical Approach - uxmatters.com
- Fancy Form Design Using CSS - sitepoint.com
- Form Design is Good Form - somerandomdude.net
- Form Design to Increase Conversions - braintalent.co.uk
- Forms and dynamic sites : Usability - leafdigital.com
- Forms, usability, and the W3C DOM - digital-web.com
- Good Practices in Form Design - 15seconds.com
- Increasing form usability with JavaScript - webcredible.co.uk
- Label Placement in Forms - uxmatters.com
- More Form usability - kalsey.com
- Prettier Accessible Forms - alistapart.com
- Sensible Forms: A Form Usability Checklist - alistapart.com
- Showing Good Form - 24ways.org
- Simple Tricks for More Usable Forms - sitepoint.com
- Using CSS to Create a Two-Column Layout - replace tables with css layout form tutorial - websiteoptimization.com
- User Experience Diagrams - lukew.com
- Usability Features - The Label Element - seoconsultants.com
- Web Application Form Design - lukew.com
- Web Application Form Design - uie.com
- Web Form Design Best Practices - rosenfeldmedia.com
- Web Application Form Design - lukew.com
- Web Usability Tech: Using AutoComplete to Your Advantage - webusability.se
Basic Form Design Techniques
- A Collection of CSS Stylesheets For Web Forms - formassembly.com
- Applying CSS to forms - webcredible.co.uk
- Awesome Form - paularmstrongdesigns.com
- Check it, don’t select it - c82.net
- CSS2 - Tableless forms - quirksmode.org
- Forms markup and CSS - Revisited - nidahas.com
- Free Web Form Templates - formassembly.com
- Fun with forms – customized input elements - picment.com
- HTML Tutorial - Form Design - functionx.com
- Style Web Forms Using CSS - sitepoint.com
- Web by Design: Creating Web Forms - iupui.edu
- Web Diner Forms Tutorial: Form Design - webdiner.com
Advanced Form Design Techniques
- AutoSuggest: An AJAX auto-complete text field - brandspankingnew.net
- Blog Comment Form Design Showcase - smileycat.com
- CSS styling of forms - cssplay.co.uk
- CSS Form Examples - smashingmagazine.com
- CSS-Only, Table-less Forms - jeffhowden.com
- Enhancing forms - Unobtrusive Javascript - onlinetools.org
- Fancy Form Design Using CSS - sitepoint.com
- Form Errors. Simplified. - kalsey.com
- (Functional) Pretty Forms - agavegroup.com
- Javascript Examples - HTML forms improvement tips - javascript-examples.com
- Styling form controls - 456bereastreet.com
- Rediscovering the Button Element - particletree.com
- Semantic horizontal Forms - skyrocket.be
- Standard Forms - Updated - stylephreak.com
- Tableless forms - roscripts.com
- Trimming form fields - stuffandnonsense.co.uk
- Tutorial: Form Styling with CSS - evoart.info
Form Processing
- AJAX and PHP Form Processing - jeffpipas.com
- Conditional Processing in ColdFusion Development - informit.com
- Facilitate form processing with the Form Processing API - Java - javaworld.com
- Form Processing CGI script by Biz Mail Form - Free Forms processor - bizmailform.com
- Form Processing Tutorials - PHP - iwebtool.com
- Form Processing Tutorials for ASP - tutorials-expert.com
- Form Processing with PHP Video Tutorial - killerphp.com
- Form Processing with PHP - webcheatsheet.com
- Making your forms work with CGI scripts - wise-women.org
- Simply form processing through a single templat - ColdFusion - easycfm.com
- Top 1 to 34 Form Processing - PHP scripts - programsdb.com
- Using HTML Quickform for Form Processing - devarticles.com
Form Validation
- AJAX form validation - roscripts.com
- Form Validation : Introduction - echoecho.com
- Generic Form Validation Routine - juicystudio.com
- Javascript form validation - doing it right - xs4all.nl
- Really easy field validation with Prototype - tetlaw.id.au
- Stock Form Validation Script - jennifermadden.com
- Submit Once! Form validation - dynamicdrive.com
- User-Friendly Form Validation with PHP and CSS - onlamp.com
- Validate form input before submitting the data - yourhtmlsource.com
Free Form Generators
- Accessible form builder - accessify.com
- Build Free Email Forms - mycontactform.com
- Email form generator - htmlbasix.com
- Form Generator - formlogix.com
- formfields - php form - formfields.com
- Free Form for All - subtraction.com
- Free Web Form Builder Software - formbreeze.com
- JotForm - jotform.com
- JSF Form Builder - jonas.com
- Niceforms 1.0 - badboy.ro
- Uni-Form - dnevnikeklektika.com
- Wufoo - making forms easy + fast + fun - wufoo.com
Fee-Based Form Creation / Management
- EasyFormIt Web Form Builder - easyformit.com
- Create and Process State-of-the-Art Web Forms - formassembly.com
- FormSite.com - formsite.com
- frevvo - web form builder - frevvo.com
- HTML forms can be as simple as "Copy and Paste" - freedback.com
- Icebrrg - icebrrg.com
- Web Form Builder And Hosting - madaquad.com
- Wufoo - making forms easy + fast + fun - wufoo.com
If I have missed any useful sources on forms, please let me know, and I will gladly add it.
HP has new exam serial for ase certification similar to the Cisco upgraded ccda and ccde certification exams.
July 31st, 2007 at 6:34 am
Nice list Jason, you got a lot of my favorite resources for form construction in there as well!
Feel free to add my article “Web Usability Tech: Using AutoComplete to Your Advantage” as well if you want to. It discusses the AutoComplete feature that is built into browsers and how to best utilize it form your forms fields.
July 31st, 2007 at 9:13 am
Don’t forget Wufoo for free (and fee-based) form generators…
July 31st, 2007 at 12:29 pm
I second the recommendation for WuFoo. I’ve been with them since the Beta and the service is smooth, reliable, flexible, and has an API that is coming along nicely.
You can host forms through them or embed them in you own web page and still have them do the processing, report generating, etc.
Highly recommended!
July 31st, 2007 at 1:02 pm
Thanks for bringing that to my attention guys. I added it under “Fee-Based Form Creation / Management” as well. I felt the web development community needed a place to get resources for forms, there seemed to be a lacking in the search engines. I hope everyone enjoys and I’ll keep it up to date.
July 31st, 2007 at 1:08 pm
Mattias, your link was added as well. I hadn’t considered the users that use autocomplete. Thank you for resource. I’m sure the readers will enjoy as well.
August 3rd, 2007 at 4:24 pm
Shouldn’t the title of this post be updated to read “103 Resources to Help You Build a Better Web Form”
My $0.02
August 4th, 2007 at 11:40 am
Wow, that is an amazing list of resources there! Great job on it, you’ve earned yourself a dig and a bookmark (via del.icio.us). Keep the great content coming!
August 4th, 2007 at 3:17 pm
Really useful stuff stumbled it for you thanks
August 10th, 2007 at 5:29 am
[...] 101 Resources to help you Build a Better Web Form [...]
August 13th, 2007 at 12:15 pm
[...] 101 Resources to Help You Build a Better Web Form Link-o-rama für alles, was nur ansatzweise etwas mit Online-Formularen zu tun hat. Darunter die besten Usability/Accessibility-Praktiken des modernen Designs von Formularen, Techniken, Skripten zur Bearbeitung von Angaben, Validierung und Verifikation von eingegebenen Daten sowie Generatoren von Online-Formalen und einschlägige Werkzeuge zu ihrer Erstellung online. [...]
August 13th, 2007 at 5:25 pm
[...] 101 Resources to Help You Build a Better Web Form Link-o-rama for everything you ever wanted to know about online-forms. Among them the best Usability/Accessibility-practices of modern form design, techniques, form processing scripts, form validation as well as form generators and related tools. [...]
August 20th, 2007 at 6:12 am
[...] Bartholme hat viele Links zum Thema Formulare richtig gestalten [...]
August 24th, 2007 at 7:31 pm
[...] 101 Resources to Help You Build a Better Web Form [...]
August 25th, 2007 at 11:04 am
Great list, Jason. Here is one for the Free Form Generators section:
Form Code Generator for Feedback (or Contact) Form
August 27th, 2007 at 2:34 pm
[...] [27.08.2007] cssjuice ajaxian dzone bardzo dobre !!! guistyles adesblog manwithnoblog ajaxwidgets jasonbartholme allgraphicdesign wipeout44 ejohn.org/blog [...]
September 1st, 2007 at 2:26 am
[...] 101 Resources to Help You Build a Better Web Form Link-o-rama fr alles, was nur ansatzweise etwas mit Online-Formularen zu tun hat. Darunter die besten Usability/Accessibility-Praktiken des modernen Designs von Formularen, Techniken, Skripten zur Bearbeitung von Angaben, Validierung und Verifikation von eingegebenen Daten sowie Generatoren von Online-Formalen und einschlgige Werkzeuge zu ihrer Erstellung online. [...]
September 5th, 2007 at 4:05 pm
As XHTML grows, XHTML 1.0 documents will be able to interoperate among other XHTML documents making it a more browser transitional language.To conclude, using the standards of web development lined out by the W3 is imperative for users to get the most out of a site. Often, making a webpage W3-compliant is the first step of SEO, a marketing tool to get the most out of your advertising dollar.
September 24th, 2007 at 12:41 pm
[...] 101 Resources to Help You Build a Better Web Form Link-o-rama for everything you ever wanted to know about online-forms. Among them the best Usability/Accessibility-practices of modern form design, techniques, form processing scripts, form validation as well as form generators and related tools. [...]
November 9th, 2007 at 10:37 am
[...] read more | digg story [...]
November 23rd, 2007 at 4:33 pm
[...] 101 resources to help you build a better web form @ Jasonbartholme [...]