9 resources to create better HTML forms

by Cedric Dugas on November 18, 2009

Forms are a pretty boring piece of the Internet, it’s not fun to create and it’s not fun to interact with. Yet this is mostly our only way to communicate. We should strive to make better forms and make them as painless as possible to complete. Here are some resources worth looking to make better forms in every way possible.

Keep it simple

Look at the Twitter registration, it does not ask for the password twice and there is only 6 fields. If you must have more fields then please let them register and ask for it in their profile. Less fields there are, more potential subscribers you get (avoid long form and duplicate if you can). Also please keep them focus on finishing you form, no distraction should interrupt the process.

The New Registration and Login Grammars
“Provide your name, email and password; verify the email; login to the site with username and password until you’re timed out. You know the drill. But a wave of new web apps and protocols is challenging the status quo”

Signing Up to Websites, 1999-2009. A Montage
“Following up The New Registration and Login Grammars, I thought it would be interesting to look at how signup forms have changed over the years.”

Why are we typing passwords twice?
“We are typing passwords twice because of legacy design patterns we forgot to abandon. There is no reason for why everybody should suffer just because a few can’t type their password correctly. I jump confirmation ship!”

Smashing magazine web design pattern
Smashing magazine web design pattern part2
“If you want to maximize the revenue of your service you need to maximize completion rates of your web forms. Unless you have some revolutionary ideas to impress your visitors at first glance, it is not enough to simply enable users to sign up on your site.”

Help your users

Get tools to help your users complete your form faster with no frustration. Use a good client side validation, code completion and etc.

A list apart article on inline validation
“Web forms aren’t great conversationalists. They ask a bunch of questions, then wait until you answer them all before they respond. So when you register for that cool social network or use an e-commerce site, it’s pretty much a monologue.”

Position Absolute form validation plugin
This validation plugin can validate your fields on the fly, it can even send a inline request to see if a user is available in a DB for example.

Masked Input Plugin
“It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). It has been tested on Internet Explorer 6/7, Firefox 1.5/2/3, Safari, Opera, and Chrome.”

Stop masking password and the Password Unmasking Plugin
“Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn’t even increase security, but it does cost you business due to login failures.”

Autocomplete plugin
“Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering.”

Ads

Get professional testking 642-481 web development training and learn how to create better web pages using html and JavaScript framework. Our self paced testking HP0-S20 study guide and testking 640-460 web tutorials are good source to keep up with latest trends and tools in web development.



6 comments

Nice resources, thank you!

by Mathiew on November 19, 2009 at 2:49 pm. Reply #

Make web forms sexy! …eh…

by Edgar Leijs on November 19, 2009 at 2:57 pm. Reply #

Nice resources, thank you!

by jezz on December 17, 2009 at 1:59 am. Reply #

111

by 11 on January 4, 2010 at 9:45 am. Reply #

Thanks for sharing – is see same at – Twapt.net Mobile Form Builder helps you build forms, in just minutes, without any programming or design experience.
Your clients and visitors will be able to contact you anytime, anywhere, because your forms are accessible and can be filled from every mobile phone in the world.
Whether you want a contact form, a quick survey, an inscription form, employee reports, opinion polls, or any other input, using Twapt.net Mobile Form Builder – 5 minutes and you’re ready to go. Everywhere.

by xdynx on February 1, 2010 at 7:12 am. Reply #

I read this article fully concerning the difference of most recent and previous technologies, it’s awesome article.

by GR on October 30, 2014 at 4:04 am. Reply #

Leave your comment

Required.

Required. Not published.

If you have one.