Blog
7 Tips For Building Better Website Forms
Published on May 05, 2009
As a website user, few things frustrate me more than a website form that doesn’t work as it should. As a website designer I know there are several steps I can take to make sure that the website forms I build don’t fall into this category.
1. Simplify visual layout
First and foremost a website form (no matter how complex it is) should look easy to complete. This will encourage visitors to complete the form and guide them through the process of giving you the information you seek from them. Each form will be unique and spending time in planning its layout is critical.
2. Use <legend> <fieldset> and <label>
Completing a website form is tricky but it’s even trickier for impaired visitors of your website. To maximize accessibility use <legend> <fieldset> and <label> html tags in your code. These three tags provide semantic meaning to your form and attach form labels to their associated field in a non-visual way to ensure impaired visitors can complete it.
3. Set the tab index for each field
Once the first field of a website form is completed and the tab button is pushed visitors should be taken to the next item to complete. Setting the tab index allows you to define this order (as opposed to relying on the browser). This simplifies the completion of the form and also improves accessibility for visitors who can’t use a mouse.
4. Clearly mark required fields
Determining which form fields must be completed by visitors should be a part of any website form design. Once this determination is made, be sure your website form clearly indicates what fields are mandatory and what fields are optional. This will save visitors the frustration of getting unexpected error messages.
5. Provide clear error messages
And speaking of error messages, make sure when a user does receive an error message from an improperly completed form that that error message is useful and written in plain English. In general an error message should clearly instruct visitors what field they need to fix and guide them back to that field.
6. Use an anti-spam technique
All forms I build now have some technique to prevent the submission of spam entries. CAPTCHA is a very popular anti-spam technique. I’ve also used CSS to visually hide a field from human visitors and then use PHP to test if the hidden field is completed (automated spam-bots will fill it in). Make sure your forms account for these inevitable spam submissions.
7. Test, test and test again
Nothing is more frustrating to website owners than a form that doesn’t work. The submitted data doesn’t get entered into the database. A notification email fails to send. A user gets no confirmation of anything when submitting their information. All of these things can be avoided with thorough testing of all website forms. Don’t neglect this step!
Conclusion
Following these steps above will ensure that your website avoids the pitfalls of poorly designed website forms and (even better) ensure that your visitors do not experience the all too common frustrations such forms brings.
Subscribe
You can have new blog posts delivered to you as soon as they're published simply by subscribing to the RSS Feed below!
