Web forms are boring, How can web design help?

We all know it, forms are boring and filling them out is tedious and pointless. Yep, it’s true, web forms suck, but with some good’ol web design we can make them bearable.

Continue reading

Toby Osborne - Web Developer

About the author

Toby Osborne

Hi, I’m Toby, a web developer with over eight years experience. My professional goal is to educate businesses in the use of technology to streamline their workflow.

Posted on:

Share to:

Everyone’s experienced it at least once, a form so long, so tedious that you decide to go somewhere else. I know I have, and that’s a clear sign of bad web design; a form should gain leads not to lose them. So how can you make sure your web forms don’t suck?

Keep it simple stupid, design can only do so much.

Complexity is a big problem with web forms. That’s not to say it’s designed to be difficult, but instead, it lacks design, to begin with.
I’m not talking about making it look pretty. It’s the planning that needs a design, and sometimes we can end up doing more with less.

A form is a basic set of fields that you (the business) want to know from the customer. With this information, you’ll be able to better understand and market to your audience. So, you add fields to learn more, but that’s lazy design.

The more fields you add, the less likely someone is to fill it out, then you have nothing.

Instead, you should be thinking, “How can I take fields away?”; be inventive and think of other ways to get the same details without asking. Here are some typical examples.

How did you learn about us?

This is a common field, and a lot of the time it’s made required. I don’t know about you, but I will select whatever from the list because I don’t want to answer a pointless question.

This field is inaccurate and pointless, but you can get the same information without it.

Using “Google Analytics” you can see exactly where people came from. Search engines, social media or direct traffic are all viewable from the dashboard.

For more accurate information, or non-digital mediums create campaign URL’s.

First Name, Last Name

The most common fields ever, but why are they separate? The only reason they’re separate is to allow for a more personal approach. Ever received an email using your full name; it’s much less friendly.

A three-line piece of code to split the first and last name from a full name field solves the problem. Your customer only has one box to complete, and you get the exact same information. Win-win.

Don’t make work to your customers, you can get the same results by being inventive.

Avoid asking for too much, too soon

The next common issue with form complexity is asking for things you don’t currently need. We’ve worked with clients that wanted to ask for everything on the registration form. It made a total of 9 fields, and funny enough no one used it.

The very same day we switched it to email and password, people started to register. In fact, a study by unbounce shows that forms with 3-5 fields tend to convert 20% of the time, while those with 6 only 15%.

You don’t need everything all at once, so have several forms at different stages, in the process. Register, Checkout etc.

Don’t ask for more than you need. Too many fields will lower the submission rate.

Web form accessibility is vital.

I say it all the time, accessibility is the most crucial part of web design, the same rings true for form design.

So what do I mean by accessibility? Well, labels, touch boxes and relevance.

Web Form Labels

Your form should have labels for every field. Labels describe what information needs filling in, can you imagine having to guess?

They also have a lot of support from screen readers, and browsers to make it easier for people to use. Some of you might be thinking what about placeholders? No, placeholders disappear when the field is um filled. Making it difficult for people to double-check their answers.

Use Labels, and don’t rely on placeholders.

Touch Boxes

Make sure that your form elements are big enough to see, tapped and clicked. Remember your customers access your site from any device; if a form element is too small to use, then it won’t be.

Think of the lost sales because of something as stupid as a button is too small.

Make sure all form elements can be seen, clicked and tapped on any device.

Relevance, use the right elements.

Don’t fall into the trap of using the wrong form fields, it can hurt. Think about what makes the most sense, should that gender field be a radio group or a select box? The answer, radio.

Using the wrong field types can negatively affect the information you gain. What if you wanted to know a person’s title (Mr, Mrs, Lord etc.), imagine how many Jedi you’d get if it were a free-hand field.

Use the right form fields for the job, you want to limit answers to what you can use.

Validate form fields before submission

Have you ever filled out a form only to submit it and get an unhelpful “there was an error” message? Even worst, did it also clear the fields making you enter it all again?

Avoid doing this by providing real-time feedback to answers as customers enter them. Better still, disable the submit button until there are no errors.

Provide real-time feedback to answers, before the customer clicks submit.

Use descriptive and friendly errors.

There’s always going to be someone that get’s something wrong. Whether it be putting an email address in the website field or missing a digit of their phone number.

Be sure that your error messages make it clear what field is wrong and why. Don’t you hate it when you get a “This field has an error” message, but it looks okay?

So, two tips:

  • highlight the field, and display the error message directly under it.
  • Be descriptive about what’s wrong with it.

Avoid generic error messages that don’t explain what’s wrong with the information.

Micro-text is awesome

Micro-text is any text on your website that isn’t a large part of your service. Think error/success messages, it’s the import text that everyone forgets about.

Error, success, label and button text all impact submission rates.

Submit button text alone can decide whether people submit the form or not. In the same unbounce article from earlier, they mention that using “submit” on form buttons is the least likely to convert.

It’s too generic, people want clarity and confirmation. So, make buttons actionable. Instead of “Submit” use “Send Message”, instead of “checkout” use “proceed to checkout”.

Make sure your form uses clear micro-text.

Ensure your submission buttons are actions “send message” not “Submit”.

Interactive forms or “Wizards” are great

You may have noticed a growing trend, interactive forms, known among techies as “Wizards”. I think it dates back to old computer setups or something.

These interactive forms are used to generate leads and get people to provide information, in exchange for an answer or resource. For example, we’re currently working on a form to provide cost estimates.

They tend to work really well, because the customer gets an answer to their question, and you get all the information to start their project. In our case we’d get the contact details, budget and rough project spec from a valid prospect.

Are web forms really this hard?

Despite what people may think, forms are the most complicated things on the web. There are so many things to consider and a lot of the time designers forget that; DON’T LET THEM.

Almost everything you gain from your website will be through a form. Whether it’s a contact, checkout or newsletter signup, make it clear, simple and tolerable.

Need a little help?

We’re excited to see you taking an interest in making your website better.
If we can help in any way, let us know.

Book a consultation send us a message or call +44 (0) 1258 917 311.

Get a free comprehensive audit of your website.