How to Create (Stunning) Web Forms


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

Before I forget — try Formstack if you want stunning-looking web forms.

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?

Before you leave, can you answer this?

What’s the worst mistake you’ve seen in form design?

What site nails it for form design?

If you had a magic wand, the one thing you’d change….

PS – If you want to design web stunning forms, take the free trial on Formstack.