How to Create (Stunning) Web Forms

Creating web forms is harder than you’d think. Yes, it looks easy but…

So, let’s say you’re designing a form for your company’s website.

How can you make sure uses don’t get frustrated, impatient, or annoyed and leave your site?

The last thing you want is to get someone to your site, then see them hit the Back button because one field confused them.

When designing forms, you have (at least) five HTML form elements to play with:

1. Drop-down box
2. Radio buttons
3. Check boxes
4. Type-in box
5. Hyperlinks

But which should you use? It’s the wrong question, isn’t it?

In form design there’s no ‘one size fits all.’

We need to determine which element works best — at each stage in the form design.

Sarah Miller and Caroline Jarrett [PDF] suggest four steps for choosing web form elements:

1. Is the page for navigation or information gathering?
2. How will your choice impacts the form?
3. How will it affect your users and their interactions?
4. Use these six questions to narrow down the choice of form element for each question on your form.

The six question are…

1. Is it more natural for the user to type the answer rather than select it?
2. Are the answers easily mis-typed?
3. Does the user need to review the options to understand the question?
4. How many options are there?
5. Is the user allowed to select more than one option?
6. Are the options visually distinctive?

You agree with this approach? 

Download: Technical Writing Templates