Tips for Coding and Designing Usable Web Forms

[HTMLBasicTutor]

The web form has been one of the most discussed elements in web design for more than ten years now. We can’t help it. Call-to-action functionality often leads users to a form; purchases are made using forms; users register or subscribe using forms — the uses for forms are endless.

While it is fairly easy to slap together a form in HTML, it’s not as easy to code, style, and design your form in a manner that makes it usable and accessible to the majority of users. Since forms play such a large role in website conversions and success rates, the tips below, as well as the resources provided at the end of this article, should prove valuable for developers creating and coding web forms....

Continued: Tips for Coding and Designing Usable Web Forms

This article covers:

• Two-Column vs. One
• Use Inline Form Validation
• Group Related Fields
• Clearly Indicate Required Fields
• Fancier Checkboxes, Radio Buttons, and Select Elements
• Display a Hint When a Field Gets Focus
• Be Generous with Whitespace
• Make Your Forms Accessible

Some good ideas that make sense in this article.

[greeze]

Thanks! It's really a good read. I hope most would read and really implement these tips so that the Internet can be filled with more nice and good looking websites.

[HTMLBasicTutor]

Here's another forms article: Fancy Form Design Using CSS

[Rockjone]

thx for the shearing inf o for the web site design

[HTMLBasicTutor]

You can highlight the form field a user is in. It’s a small visual cue as to where the cursor is in the form.

Adding focus to form fields

[AmySueN]

Thanks for the info! Some day I want to be brave enough to code my own forms instead of using James's or free templates. One step at a time...

[davidjoshua11]

Well, this is good information you shared here. This is really big help for me because I am gathering some information about web design. Maybe someday I can apply this information, I get it here.

[HTMLBasicTutor]

Not exactly a discussion about usability but still about forms: What Your Form Design Reveals About You

[snakeair]

Here is a very good article that might be useful to everyone.

Although i have not had the need to use these tools, i am sure lot's of other members would find this article interesting with the tools provided.

Web forms can be a great asset on your business site. They let you collect pertinent data and contact information from your visitors without exposing your direct e-mail address to the world. They also set specific boundaries on the type of data you receive from customers so that the information fits nicely into a spreadsheet or database as needed.

Building a web form used to require a bit of coding and “wiring” on the back end of your site. These days, there are some great free and low-cost resources on the web that make building and....

Full article and source: Business Web Forms

Does anyone have any comments about these 4 tools? What worked for you and what didn't work? Suggestions are more then welcomed.

[HTMLBasicTutor]

...Through hints and validation, we can create forms that are a lot more user-friendly than their offline counterparts. And in some cases, we can make forms that people might even enjoy filling out...

Best Practices for Hints and Validation in Web Forms

[HTMLBasicTutor]

The default display for a fieldset is a square cornered border. In certain browsers (Firefox and Safari and perhaps others) you can use CSS to make rounded corners on the border around the fieldset and around the legend.

Style a fieldset with rounded corners using CSS

[HTMLBasicTutor]

When creating a web form, one of the many choices you must make is how you are going to align your labels with your inputs. This is not a trivial decision, as this placement affects the readability/usability of your form, completion rates, speed of completion, and ultimately the satisfaction level of the users trying to get through your form. But is there one ultimate answer for how you should be aligning labels? Not really, it depends on the specific needs of your form and the design constraints of the page.

Label Placement on Forms

[charlesying]

The best thing is that Webform do not require you to setup a content type for each different form, instead each form is tied to a particular node.

[HTMLBasicTutor]

Originally Posted by charlesying

The best thing is that Webform do not require you to setup a content type for each different form, instead each form is tied to a particular node.

What does this have to do with the topic of this thread? "Coding and Designing Usable Web Forms"

[HTMLBasicTutor]

The registration process should entail simplicity, great usability and a high-level of accessibility. With numerous sites wanting to focus on how attractive and eye-catching their sign-up forms are, they seem to “forget” one principle; how the user interacts with the registration form....

24 Steps-Left Pages That Enhance The User Registration Process