Forms are an essential data collection tool at sign up and checkout. They’re also places where a customer does the most work: filling in countless fields. That means it’s incredibly important to make form-filling as easy as possible. There are generally two kinds of forms:
- Single column forms
- Multi-column forms
A single column form looks like this:
Now look at this multi-column form:
As you can see, the single column form is pretty easy to fill. You just scroll down to fill in the form fields. No stress whatsoever.
Filling out the multi-column form is slightly more complicated. The customer might be confused as to whether to fill in the form in an up-down up-down motion or a left-right left-right motion. The confusion and the need for visual reorientation makes the whole thing more stressful than it is supposed to be. A single-column form is sleek, compact, and allows for one way scrolling that is a lot less complicated.
Confusion isn’t the only problem with multicolumn forms. Customers might easily fail to fill in some fields, assuming they are not required or maybe just fail to notice them. In other cases they type data into the wrong fields.
Let’s say you have two or three name fields in multi-column format. You have “First Name”, “Middle Name”, and “Last Name” fields. Since a vast majority of people view their names as a single entity, a significant proportion of your customers will fill out their entire name in the “First Name” field. Many would notice their mistake and correct it but it’s just less bothersome to everybody when you use a single name field.
Multi-column forms also look intimidating since they tend to show a lot of fields. People who’ve come to give you money should never have to deal with forms that look like applications for political asylum.
Exceptions involve fields that are closely related and contain limited amounts of data. The city, state, and zip code fields can form a three-column row though I recommend an automatic zip lookup as it’s more elegant.
Credit card fields (say security code and expiration date) can occupy the same row as each of them only contains three or four digits of data.