How to Create User-Friendly Forms

Tips and Tricks For All Portions of a Web Form

PrimeMovers Pilates Solutions Contact Us Form
PrimeMovers Pilates Solutions Contact Us Form. Screen shot by J Kyrnin courtesy PrimeMovers Pilates Solutions

Forms and websites go hand-in-hand. Take a look at almost any site on the Web today and you will find a form of some kind, whether it is a simple "Contact Us" or "Request Information" form, a membership sign-up function, or a shopping cart feature. Forms really are a major part of the Web.

Forms are fairly easy to learn how to build on the front end, and while the back-end might be more tricky, it's still not terribly difficult. That's the technical side of form creation, but there is more to a successful form than just the code. Creating a form that your readers will want to fill out and not get frustrated with is incredibly important. It's more than just a matter of laying out your HTML in an accessible fashion. It's a matter of thinking about all aspects of the form and the purposes behind it. Here's some tips to consider as you work on your next online form:

The Layout of the Form

  • Line up the entry fields.
    It's really easy to create a form that just has the form elements right up next to the field names. By lining everything up, you create a consistent look at is easy to follow and easy to use.
  • Align the field names.
    Lining up the entry fields is not the only part of the layout you should look at. The names for those fields is important as well, so you want them lined up and looking nice.

The Content of the Form

  • Tell your readers what will be required.
    Almost all Web forms include required fields. These are fields that someone must fill out for the form to work. But don't make those fields a surprise to your readers, be sure to clearly label which information is required and which fields are optional.
    Also, make sure that each field that is required is clearly labeled, and not just color-coded. Color-coding does not show up in a screen reader or text browser. For this reason, you need to do more than just use color for this "required designation."
  • Don't ask too many questions.
    You might have 50 questions you would like to ask your readers, but chances are they won't want to answer them all. If your form is too long, they will get bored before they finish and you won't get any results. Ask yourself what you intended to do with the information. If it is a "nice to have for later", leave it off!  Also see if you can figure out an answer without asking a question. For example, if you are a B2B company and you ask for someone's email, you can safely remove questions for their website or company name. This is because you can likely get their website URL from their email address, and once you have that, you can look up the name of their company. Less is more when it comes to form fields, so edit aggressively!
  • Don't ask your readers to type.
    If it is at all possible, use a drop-down form. This will insure that your data is consistent, and your customers won't have to type as much. For example, if you are asking for their STATE, use a drop down with the possible answers instead of asking them to tyoe.
  • Put common answers at the top or selected.
    When you're using a drop-down field, be sure to use either the selected option or put the most common answers at the top.  Don't forget that it's okay to repeat answers within the form field, and don't stay married to alphabetical order if it doesn't make sense. For example, if you're asking people to fill in what country they live in, the most common countries of your readers should be at the top. 

Original article by Jennifer Krynin. Edited by Jeremy Girard on 10/5/17

Programming a User-Friendly Form

  • Validate the form data before you send to the CGI.
    Use JavaScript to validate your forms before you send it to the CGI. This is usually faster than CGI validation, and gives your readers immediate feedback.
  • Validate the form data within the CGI.
    This may seem like wearing a belt and suspenders, but it insures that the data is correct before you store it. And some people have JavaScript turned off.
  • Don't make your readers go back to fix errors.
    This is one of the most common usability problems with forms. There are errors and the reader is expected to remember them all and hit the back button and hope that the cache hasn't cleared or she'll have to fill in the form all over again. Take the extra step of rebuilding the form, and you will get more completely filled out forms.
  • Show your readers what they submitted.
    On many feedback forms, the reader submits her entries and they disappear into a void. She might receive a thank you note, but she has no record of what she sent. A well-crafted form will either send the data that was submitted to the reader or display it on the screen (for printing or saving).

    If you follow these hints you will create a form that is easy to read and fill out and your customers will thank you by filling it out, and not just leaving or ignoring it.