7 Secrets for Designing Great Forms

Default avatar.
March 08, 2017
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.
airbnb

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. floating 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) 0000000
  • 0000000000
  • 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.) fields

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.” google

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. protector

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 web@​gmail.​com. travel

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). breckbrew

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.

Read Next

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…

3 Essential Design Trends, March 2023

One thing that we often think about design trends is that they are probably good to make a list. That’s not always true…