We build web applications.
From business tools to social and educational media, we have the team that can turn your tech fantasies into reality.

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.

Post dicussion

You must be logged in to post a comment.

  • Subscribe

    You can have new blog posts delivered to you as soon as they're published simply by subscribing to the RSS Feed below!

     

    Subscribe to RSS Feed | What is RSS?

     

    • “We are really happy with the way you understood our needs and are amazed by the speed and efficiency you have shown in customizing your Online Testing solution according to our needs. Thank you.”

      Gems Recruitment Consulting
    • “If you want original ideas, fast turn-around, lightening fast personal response and a top quality product at the end of it, its all in one place – Texel Graphics. Dont take my word for it, look at the quality of the work, look at the other testimonials in their website, and most importantly, BOOK NOW – before the prices go up!”

      Pushpak Tours and Travels
    • “I’m exceedingly happy with the work you have all done and fixing the major problems in the earlier version of the site – it has completely satisfied and exceeded my expectations. Many thanks to you.”

      www.visagenie.co.uk

      Visa Genie Ltd
    • “Texel Graphics worked hard to produce what was requested. First Empression counts. This is reflected at the massive increase in our web site traffic. The standard of work and customer care is second to none. I well recommend TexelGraphics.com.”

      www.jmfountain.com

      JMFountain
Downloads Web Designing Capabilities Presentation
Brochure on Internet Marketing
Brochure on Softwares for Education
Features of TestEzee Online Testing & Assessment Platform
Contact
General inquiries: contact@texelgraphics.com
Support: visit the FAQs
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 8
Updates

Our newsletter is awesome. Subscribe and get the latest updates.