101 Resources to Help You Build a Better Web Form
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.
Related Resources
Nowadays people have many options to make money online. Best one is the offering of cheap web hosting servers by establishing a web hosting company. For this people need to have Linux or windows dedicated server so they can make some good earnings. Along with web hosting services they can also become domain reseller. Another good option for people is work at home jobs. Most of these jobs are in home affiliate business for which the best considered is banner advertising. To make some good earnings people need to have basic IT knowledge in the form of a+ certificate.
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.
Don’t forget Wufoo for free (and fee-based) form generators…
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!
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.
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.
Shouldn’t the title of this post be updated to read “103 Resources to Help You Build a Better Web Form”
My $0.02
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!
Really useful stuff stumbled it for you thanks
Great list, Jason. Here is one for the Free Form Generators section:
Form Code Generator for Feedback (or Contact) Form
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.