22 Best Form Design Practices (With Definition)

By Indeed Editorial Team

Published August 2, 2022

The Indeed Editorial Team comprises a diverse and talented team of writers, researchers and subject matter experts equipped with Indeed's data and insights to deliver useful tips to help guide your career journey.

Forms are useful documents for collecting information and gathering data on things like consumer demographics or customer satisfaction. Companies and professionals can implement forms on their online webpages or mobile applications to allow users to complete transactions or submit requests. The design of a form influences how easily users can complete it to ensure proper submissions and a satisfactory experience, and if you're responsible for making forms for your organization, you may benefit from reviewing some best design practices.

In this article, we explain what form design practices are, discuss their importance and provide 22 of the best form design practices for you to review.

Related: What Is Forms Testing? Definition, Importance and Steps

What are form design practices?

Form design practices involve the application of design concepts and theories when creating forms for a specific purpose. These practices consider aspects like readability, navigability and aesthetics to ensure that viewers have a smooth experience while completing a form.

The best practices for designing forms allow creators to structure forms logically and thoroughly to minimize the potential for submission errors or incomplete forms. When designing forms, there's a variety of recommended practices for form fields, boxes, buttons and labels to suit general and specific form purposes.

Related: 8 Essential Parts of a Great Website

Why are form design practices important?

Form design practices are important for ensuring that users can read, understand, fill and complete forms quickly and accurately. These practices focus on the process of forming and presenting content for simplicity and ease of comprehension.

The presentation of the form also follows design practices that make it easy to differentiate one field or section from another so that viewers access and complete the required areas of a form with minimal disruptions. Form design practices maintain the necessary information for viewers to understand what the form requires and how to provide that information.

Related: How To Generate Targeted Website Traffic (With Benefits and Tips)

22 best form design practices

Consider these best practices when designing forms:

1. Use autofocus for input fields

When users open a form or form link, autofocus allows them to easily identify where to begin in filling out a form. Autofocus can include highlighting the first input field box for users to begin typing with a colored box indicator. When users complete a field, some autofocus capabilities may automatically highlight the next text box for users to fill out.

Related: What Is a User Interface? (Definition, Types and Examples)

2. Automatically fill in characters

For forms where a majority of users may fill out the same information, automatically filling in certain form fields can save users time. This is beneficial for forms for users within the same country or for forms that can automatically locate the state of a user. Other automatically filled characters include dashes and parenthesis for values like membership numbers or phone numbers.

3. Consider keyboard types

Certain field boxes may only require either an alphabetical or numerical character. In these cases, you can set the keyboard for those fields to match the input requirements. This is useful for mobile phone users to minimize the time it may take for them to manually switch between keyboards on their devices.

4. Define field boxes from buttons

Clearly differentiate the form field boxes from functional buttons to ensure that users know where to fill out information. Field boxes and buttons may have similar sizes or shapes, but you can define them through their outlines or colors. Field boxes may have a colored outline without a box fill color, while buttons have a distinct fill color to identify them with.

5. Delete reset or clear buttons

Reset and clear buttons may cause accidental information deletion. Users can refresh a page or select blocks of text to clear without dedicated form buttons to provide that function. Delete any reset or learn buttons to minimize potentially erased information.

6. Display errors in field boxes

While users fill out the fields in a form, it's beneficial to alert them to errors as they complete sections. Some forms only alert users to errors when they attempt to submit a form which can require more time for users to locate and correct each error or cause users to cancel the form filling process completely. Displaying errors in the specific box as a user fills them out allows users to correct errors immediately.

7. Ensure form readability

Make sure that the form's text is readable by considering the colors, fonts and sizes of elements present on the form webpage. Use contrasting colors for the text color and background color while also allowing for changeable or large font sizing. Standard text and background contrast uses black and white or you can also use online resources to determine the contrast between desired color choices.

8. Group together field sections

Grouping together field boxes into sections allows viewers to anticipate the information required from them to complete forms faster. Consider address sections and grouping together field boxes that complete an address. When these fields are together, users can predict the next field on the form to begin entering their information.

9. Include drop-down menus

When presenting viewers with multiple options to choose from, use a drop-down menu for list options with over six items. Presenting all the options in other formats, such as check boxes or circle boxes, also known as radios, can make the form longer than necessary. Having these multiple options in a drop-down menu can save space on the form webpage and make it easier to navigate.

10. Label fields instead of placeholders

Some forms may have field boxes with placeholder titles that specify what information to input. These placeholders disappear when users begin typing in the field box, which can cause confusion in what information the form requests. Using a label next to the field instead of a placeholder reminds users what the box is for.

11. List items vertically

For single answer or multiple choice lists, list the options vertically. Webpages commonly scroll vertically, so listing items vertically follows this natural flow. Listing the items vertically also ensures that users can identify each option clearly.

12. Maintain one column

Similar to listing items vertically, maintain the form field boxes in a single column to ensure readability. Some columns may have separate divisions within them to complete information, such as an address, but the overall view of a form maintains the shape of one column. Maintaining one column throughout the form follows the vertical direction of form items.

13. Minimize field lengths

Different fields may require information restricted to a certain number of characters. This applies to information such as phone numbers or membership numbers. Set the length of these field boxes to accommodate only the necessary amount of characters.

14. Provide auto-completion capabilities

Auto-complete can reduce the amount of time it takes for users to complete forms and enhance the experience of completing a form. Form areas for addresses may have auto-complete capabilities that search for available addresses as users input each character. Other auto-completion functions include automatic fill enabled from users' saved information for names, passwords or credit cards.

15. Provide requirement summaries and suggestions

Providing summaries for field boxes can ensure that users understand why they're required to fill out specific information in the form. These boxes may also instruct users on how to locate things like card security codes or other data. For forms that request users to create a username or password, these summaries may suggest usernames using name information or strong passwords that satisfy password criteria.

16. Reduce optional items

Many forms mark required fields with red asterisks for users to identify. It's important to mark required items in a form for users to fill out and submit the form successfully. Aim to remove or reduce optional items to shorten the length of the form and reduce the amount of time it takes to complete it.

17. Separate groups into steps

For long forms, consider separating field groups into steps on different webpages. Having more than six field boxes on one page may overwhelm viewers. Separating these groups makes it easier for users to navigate and potentially move back and forth between form steps if necessary.

18. Show passwords

Allow users to see the passwords they input to ensure that they enter the correct password. When users create an account, they may not see if the password has typos, which makes it challenging for them to log in with their credentials later on. Users may refrain from attempting to access their account if it requires changing the password.

19. Specify button functions

Label buttons with their specific function so that users know what happens when they click on it. Use short labels that clearly state the button function. Rather than a button label with "Submit your form," consider labeling it as "Submit."

20. Shorten field box labels

For readability, use short field box labels aligned above their dedicated box to inform users what the box is for. When labeling field boxes, avoid using all capitalized letters and consider using sentence cases where only the first letter and proper nouns have capitals. This minimizes the look of the labels for easier navigation.

21. Use radios and check boxes

Radios are the circular buttons on lists that allow single responses. Check boxes are the boxes on lists that allow users to check multiple boxes for a multiple-choice response. When creating a form, make sure to use the correct format so that users can input accurate information.

22. Visualize form progress

Provide a progress visualization that allows users to see where they are in the form-filling process. This visualization can also provide users with the capability to navigate between areas in the form. Users can use this feature to review their form information before submitting it.

Explore more articles