Form Field Input Techniques to Prevent Garbage Output

by on 01/30/14 at 11:11 am

A successful checkout form is not only one that gets filled out, but also one that returns correct, reliable user information. This can only happen if you prevent users from giving you garbage output. There are three form field input techniques you should use, so that you’ll never get wrong and misformatted user information again.

Automate Your Form Fields

Automating the user’s form input allows them to fill out less fields and prevents mistakes. You can’t automate every field on your checkout form, but there are some you can automate so that you get the right output every time with minimal effort from the user.

Get City & State from Zipcode

On typical checkout forms, users have to type in their city name and select their state from a select menu. Making them fill out these fields instead of automating them increases their chance of making mistakes and giving you garbage output. It’s easy to mistype city names and there is a long list of states in a select menu that users have to choose from. You can automate the city and state field by asking users to enter their ZIP code first, then allow the Ziptastic API to input the right city and state into the fields. Here’s a tutorial on how to apply the API to your form: Autofill City & State from Zip Code with Ziptastic.


User types in zipcode to automate city and state fields

Get Card Type from Credit Card Number

It’s easy for a user with multiple credit cards to confuse one credit card with another when making a purchase. That’s why you should avoid asking users the type of credit card they’re using on your form and automate it for them. A jQuery credit card validator can detect the credit card type by reading the numerical pattern of the user’s credit card number. This works because each credit card company has a unique credit card number pattern. When users enter their credit card number, the type of credit card will highlight so that they don’t have to worry about it.


User types in credit card number, type of credit card is detected

Get Billing Address from Shipping Address

Users have to enter their shipping and billing address on checkout forms. But it’s inconvenient to make them enter it twice if they’re both the same. Allow users to automate their billing address by offering a checkbox that copies the shipping address into the billing section. Users can make a lot of mistakes if they have to fill out both the shipping and billing address fields. By allowing them to automate their information, they’re less likely to make mistakes, and you’re less like to get garbage output. Here’s a tutorial on how to do it: How to Use Javascript to Copy Text From One Field to Another


Checkbox copies & pastes shipping input to billing fields

Constrain Form Field Input

Another user interface technique you can use to prevent garbage output are form field constraints. Users can mistype their information. Having constraints minimizes the number of mistakes users can make.

Numbers Only from Phone & ZIP Code Fields

There are certain fields on a checkout form that should only contain a specific amount of numbers. Phone and ZIP code fields are two of them. Constraining these fields to only allow a limited amount of numbers and not letters prevents users from accidentally typing letters and excess numbers in the field.


Error is displayed when letters are in phone number field

Break Name, Phone Number & Address Fields Apart

Sometimes users could leave out important information if your fields aren’t specific enough. This often happens with the name, phone number and address fields. If you want the user’s full name, it’s important that you break the “name” field up into first and last name. A field labeled “name” can lead to users only putting their first name. Also, make sure to allow more characters for the last name field because last names tend to get long.


Name field is broken into first and last name

It’s important to make your phone number field specific too. Users need to know what type of phone number (ie. primary, mobile, home, work) you’re looking for. You should also separate the area code field from the phone number so that users won’t make the mistake of leaving out the area code.


Phone number field is broken into area code and primary phone

Users could also leave out important information in address fields if they are not specific. Instead of only having a field that says “address”, break the address field up into street address and apt./bldg./suite number. This prevents users from accidentally leaving out their apartment, building or suite number when they give you their address.


Address field is broken into street address and apt/suite/bldg

Use Select Menus for Known Input

Breaking fields out to more specific fields is a good way to constrain the user’s information. But another constraint is to use select menus for fields with known information. Credit card expiration dates have a set number of months and years users can choose from. By using select menus, you prevent users from typing in the numbers and making a mistake.


Select menus are used when range of possible input is known

Give a Preview and Confirmation

The last technique to prevent garbage output is to give users a preview and confirmation of their information before they submit it. This is important for checkout forms because if the user’s credit card information is incorrect you won’t get the sale, and if their shipping address is incorrect they won’t get their order. You want users to preview and confirm their information before they complete any transaction.


Preview and confirmation allows users to edit before placing order

Prevent Garbage Input to Prevent Garbage Output

The best way to prevent garbage output is to prevent garbage input. By applying form field automation, constraints and preview and confirmation, you greatly decrease the chance of users submitting incorrect and unreliable information to you. User experience is more than making your interface visually appealing. It’s the design decisions you make and the interface techniques you use to prevent user errors and mistakes from happening that make your user interface a great user experience.


Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

10 Responses to “Form Field Input Techniques to Prevent Garbage Output”

  1. Jez

    Feb 8th, 2014

    Also, don’t forget to allow for non-local users’ different name and address formats etc.

    When I see a US-centric form expecting my phone number to fit that format I leave.

    • Dmitrij

      Apr 22nd, 2014

      Absolutely good point.

      Aside from that, I’m a bit confused regarding the breaking up the full name fields into First Name and the Last Name. I might be mistaken, but I’m sure I read it here that users think of their name as of a single entity, therefore there should be a single field labeled Your Full Name. Which I think makes sense (less fields!).

      • yellow

        Jul 31st, 2014

        Yeah I’m with the single-field for name after working with a guy having a 3 part Dutch family name who always got mail with it writen incorrectly.

        p.s. This form is unusable without javascript, bad UX?

  2. Joe

    Feb 12th, 2014

    Thanks for a great article. It is a shame having to repeat what should be common knowledge but unfortunately, I still see many of these mistakes repeated.

    There are however two things I would like to add to this list.

    Firstly, I’d like to suggest that adding improvents to a form should start with some user testing, even if only a few people, to be certain you have captured as much as you can from actual user behaviour. There may be elements of your inputs requiring attention that isn’t described here or that you don’t know is problematic.

    Secondly, although the US is admittedly a big market, many businesses understand there is a world outside the US, that will be visiting. I you don’t sell outside the US, be clear about it before the user commits, and offer them options in their own country. They’ll thank you for it and you may be able to get a commission from the other side.

    But if you do ship to outside the US, make sure your forms can handle their address constraints and that there is an easy way for them to reach you from within the form if they have an issue or question. Your example would exclude Canada, for example

    If you don’t help your users they don’t complain, they invisibly leave.

    • yellow

      Jul 31st, 2014

      Better yet, don’t constrain them, you want their business even if they can’t spell or type.

  3. Mike

    Feb 17th, 2014

    Agree with Jez. US centric forms are a frequent irritation for non-US users. e.g. forcing user to enter a Zip code even if they’ve already selected a non-US country in the ‘country’ dropdown, and then rejecting it for not matching US formats. Also, pretty much everywhere else in the world calls it a post code, not zip code!

  4. Adilen Stivani

    Feb 21st, 2014

    me too agree with Jez.<3

  5. dave C

    Mar 25th, 2014

    “Numbers Only from Phone & ZIP Code Fields”

    Please remember though places like Canada has letters and numbers in their zips. So if you want an internationally conscious design keep that in mind.

    So I second some of the other comments here.

    But the point is well taken! Nice article!

  6. Harry

    Apr 17th, 2014

    In lots of countries, names don’t follow the first name > last name format. Unless your website is specific to countries where this is the norm (US, most of Europe) then having just one field named ‘Full Name’ can be better.

Leave a Comment