7 Secrets for Designing Great Forms

Almost every website design includes some type of form. From simple email address collection to sign up for a newsletter or notification to full payment collection forms, it is imperative that you design a form that’s easy to use and understand.

The standards of form design are evolving as well. While many forms used to include multiple columns and ask for lots of information, most best practices now suggest keeping forms as simple as possible. And there’s a lot to the design as well. A good form is scannable, doesn’t require a lot of typing and includes smart labeling and formatting to help users fill out forms correctly the first time.

Here are a few secrets to ensure you are designing a form that users actually fill out.

1. Make It Easy to Scan and Read

You know that users scan websites to glean information and determine what actions they will take or whether the content and design interests them or not. The same is true of forms. User should be able to tell what information is needed at a glance and provide a clear explanation of what the form is for and how to submit it.

A highly-scannable form includes the following:

• Contrast: Text needs to be short and easy to read. Avoid lots of color and stick to traditional dark on light text-background combinations.
• Grouping and space: Group information that’s similar on longer forms. When collecting payment information for example, group customer information, payment information and shipping information. Three shorter blocks are easier to digest than one long one. Use smart spacing to that labels are connected to the field they explain, rather than uniform spacing between text and field elements.
• Clear finish/call to action: Make the button big and easy to see. The microcopy inside the button should tell users what will happen, such as “submit,” “pay now” or “proceed to next step.” Remember to close the feedback loop and let users know when a form is properly submitted.

2. Consider Floating Labels

There’s been a lot of debate about whether or not to use hint text inside form fields. The main problem is that too often this text doesn’t go away with a click and users have to actively delete it to start typing. That’s awkward.

Further, the Nielsen Norman Group found that blank fields can draw the eye and help users input information more clearly.

If you feel the need to use hints, consider an interactive solution—floating labels. Include your label information inside form fields so that it looks like placeholder text, but allow the text to animate and shift to the top left position once a user hovers over or clicks into the field. The label or hint never goes away and it does not get in the way of the user trying to fill out the form. (Plus the little animation is a fun surprise for users.)

3. Use Field Masks

Field masks can provide some of the same clues and form hints but without getting in the way of the usability. A field mask only appears once a user activates a field and provides an additional scanning clue as to what information is needed. The mask can assist the user further by automatically formatting information in an effort to avoid errors that will kick the form out on submission.

A good example of a field mask in action is with phone numbers. Consider the multiple format options:

• (000) 000-0000
• 000-000-0000
• 0000000000

How does a user know which one will work? The form field will specify and adjust the format as a user types, so he or she does not have to think about it and only has to key in numbers. (This also saves the hassle of having to switch between keyboards on a mobile device.)

4. Make Forms Keyboard-Friendly

You have no way of knowing what type of device a user will encounter your form on, but it should be equally easy to fill out anyway. Consider all the different types of keyboards that could send information to the form and adjust fields to detect and use the appropriate option.

On desktops, users should be able to enter a form and fill out each field without having to click a mouse. Advance automatically from one field to the next upon completion or use tabs or enter to move around. W3.org has a solid set of keyboard recommendations for you to follow.

On mobile devices, match the keyboard type to the data required. If the input is for letters, bring up the alpha keyboard; for numbers, bring up the numeric option. From Google: “App users appreciate apps that provide an appropriate keyboard for text entry. Ensure that this is implemented consistently throughout the app rather than only for certain tasks but not others.”

5. Opt for Vertical Format

Vertical forms are easier for users than multiple column formats. To best practice rule is to ensure that all the fields can fit on the screen without scrolling in a top to bottom format.

The one exception is for super-short forms where a user only needs to enter an email address or name and email address. Two side-by-side columns followed by a call to action button can work well in this situation as long as the email box is long enough for users to see all the letters of their address.

Remember to order elements logically in a vertical form as well. If you are collecting first name, last name, email address, and hair color sequence them in that way.

6. Limit Typing

Use as many pre-fill solutions as possible with forms. Nothing is more delightful then going to add an address and after the first few taps, the Google API kicks in and suggests address options.

This does three things:

• It makes it easier for users, particularly on mobile.
• It helps limit the number of fields necessary.
• It can help eliminate some user error, such as mistyping.

Consider the same thing with email addresses, such that users are given popular email domains after the @ symbol. When a user types in web@g …. the field automatically suggests [email protected].

7. Keep It Short and Sweet

You are going to be tempted to ask users for a lot of information in forms. Resist the urge!

Only ask for vital information in forms. There’s a stronger likelihood that users will fill out forms that require less commitment. If you need more information later, you can then email them from your list as ask for additional details. (As someone who has already opted in, the user is more likely to engage with you for more at this time.)

Avoid optional fields. Don’t ask for redundant information. Don’t use multiple fields where you could use one (phone numbers for example).

Conclusion

Give users something in return for filling out a form. Make it fun or interesting. Thank the user.

Creating a form that’s easy to read and easy to use will increase your chances of collecting data and turning a website visitor into a repeat user.

Carrie Cousins

Carrie Cousins is a freelance writer with more than 10 years of experience in the communications industry, including writing for print and online publications, and design and editing. You can connect with Carrie on Twitter @carriecousins.