Best Practices for Effective Web Forms

The most basic elements of form design are the labels and types of field you use, combined with how you arrange these on the page and how you provide feedback to your users. Let’s consider these factors in more detail.

Clear and Concise Form Labels

A form label should be as concise as possible and describe as precisely as possible what is expected from the user. Stefanie Braun advises: “Labels should explain at first glance what information is needed. If technical terms are unavoidable, always include explanatory text to help.”

Note that labels themselves do not serve as explanatory or help texts. They should always be kept concise and short with one or two words so that the form can be grasped quickly.

Similarly, buttons with a call to action should be descriptive. Avoid unclear prompts such as “Submit” or “Request”. The label of a button should always explain what the button does or what users will achieve by filling out the form. One way to describe the action is to start the sentence with “I want to…”. For example, if users want to create a customer account, the wording of the call to action could be “Create my customer account”.

Just as your labels should be crystal clear, so should your input fields. Creative or innovative ideas in the design of input fields can lead to a negative user experience if users no longer know or understand that they can interact with the field. Therefore, input fields should be recognizable as such and look as users would expect.

You should also always highlight the active input field. The first field of a form should be automatically highlighted when the user wants to fill in the form. This not only gives them a clue on where to start, but also saves them from typing or clicking. The focused field should be visually highlighted so that users can immediately see where they are.

Most users scan a website instead of reading it. The same applies to filling out forms. For this reason, forms should be kept as simple as possible in terms of their structure. This makes it easier to fill out a form quickly.

Here are the main guidelines for arranging your fields:

1. Always prioritize the form’s input fields from easy to hard. Only ask complex or personal questions towards the end. If users encounter a question they can’t answer at the beginning (for example, if they don’t have their credit card information), they’re more likely to abandon the process than if they’re asked to answer it later because they’ve already invested effort and feel compelled to complete the form.
2. Only request relevant information and minimize the number of related input fields either by structuring them into semantic groups, splitting them into several steps (multi-step form) or by progressively revealing more input fields.
3. Single-column forms are processed more easily from a cognitive point of view because multiple columns interrupt the vertical flow of the downward movement of the form. With multiple columns, the eyes zigzag back and forth, which significantly slows down the process and perception. Exceptions here are short and logically related input fields, such as city, state, and zip code, or date and time, which can be displayed in the same line.
    

Structure a complex form around semantic groups. The design principle of proximity states that related elements should be placed close to each other. More complex forms in particular should have a visual separation or section headings that divide input fields into semantic groups.
 

Feedback mechanisms are important to ensure users can successfully complete your forms. This means showing users when things have worked out well, and when there may be problems. Multi-step forms are a more elaborate way of providing feedback.

Here are some key principles to bear in mind:

1. Inform users about the state of success
   It is not enough to simply submit the form and reload the view if necessary. It is important that users are notified that they have successfully completed the form. The notification can be communicated via a simple check mark. Even better is a message that provides additional information. For example, when users can expect a response to a contact request.
2. Deactivate buttons after sending
   Processing a form usually takes some time. It is important to provide feedback not only when the action is complete, but also when a button has been pressed. Deactivating the button not only prevents accidental resubmission, but also informs the user that the system has received their submission.
3. Real-time feedback of buttons for the next step
   The button for the next step should only be activated when the user has filled in all the required input fields in the current step. The visual activation of the button allows the user’s focus to jump to the right place at the right time. It is important to note that the display between the deactivated and activated state is visually explicit.
4. Error messages
   A digital product should always be designed and developed in such a way that it is error-friendly. Thoughtfully designed error messages can help guide users through successful form completion, leading to better user engagement and conversion rates. More information about error handling can be found in our article on best practices and usability for error messages and feedback systems.
5. Multi-step forms should use a significant progress indicator
   When using a multi-step form, users should always be clearly informed about the total number of steps in the form, which step they are currently in, which steps are still ahead of them, and which steps have already been completed. Particularly in the case of more complex forms, the uncertainty of the process status can lead to users abandoning the process prematurely.
    

Once you understand the basics, there are some additional form design techniques that can make your designs even more effective. In this section, we delve into several of them, including the use of input masks, note texts, appropriate field sizing and arrangement, as well as the proper usage of dropdown elements.

The Use of Input Masks in Form Design

Input masks are a powerful tool in form design, assisting users to input data in the correct format. Input masks are not just placeholders, but format the data provided by the user in the manner required by your backend system. Brackets, spaces, and hyphens are automatically displayed in the input field when a phone number is entered, for example. Masked input not only prevents errors caused by incorrect formatting, but also makes it easier for users to verify the data they have entered.

You should note, however, that required formats may differ between countries and regions.

Note texts can provide clarity, prevent errors, and guide the user to enter information correctly. A hint text, like the label, should be placed in close proximity to the associated input field. This text is used to explain specific terms or why certain information is needed. Likewise, expected formatting for an input field can be displayed or explained in more detail.

Placeholders should never be used instead of a label or hint, because the context is lost for the user when filling in the input field. Placeholders in some cases are a supportive way to provide further explanations or hints. However, this additional support disappears when the data is entered. If the user forgets the hint while entering the data, they are forced to delete the entry in order to see the information again. Nielsen Norman Group explains more in the article Placeholders in Form Fields Are Harmful.

Field size and arrangement play a crucial role in form design. The design principle of proximity states that related elements should be placed close to each other. This Nielsen Norman Group article about form design and white space explains that when a label is placed close to the corresponding input field, the eye can easily recognize which label belongs to which input field.

The label should always be placed outside an input field so that users do not lose the context when answering an input field. For mobile and smaller forms, the label should be placed above the input field; for long desktop forms, it should be placed next to it.

Finally, the size of input fields should reflect the expected content. While an input field for an e-mail address, for example, can contain 40 characters, a postal code requires just five. Users perceive the size of an input field as an indication of the amount of text they need.

While it might seem intuitive to break up data into smaller input fields for ease of entry, this can slow down users. Input fields such as name, phone number, or date of birth should not be divided into multiple input fields. Subdividing them forces users to type or click extra times to move to the next field and may also require more precise validation, which can have a negative impact on the form process. The better solution is to show the formatting guidelines using placeholders, help texts or masks.

For mobile users, the appropriate keyboards should be made available or the input field should be provided with the appropriate input type. This prevents them from having to perform additional actions. For example, show the number keypad for phone number fields.

Dropdown elements can be beneficial in certain contexts, such as when many available options aren’t all known to the users. However, you should avoid dropdown elements wherever possible. A dropdown hides the choices and requires two clicks to select the desired option. Use a dropdown element only when the selection offers more than five options or when space is too limited, and include a search option when the selection significantly exceeds 20 items. Otherwise, provide the options as radio or check boxes so that only a single tap or click is required.

Designing forms for mobile devices requires a unique set of considerations. Users interact differently with mobile devices compared to desktops, primarily due to the touch interface and smaller screen size. As such, form design must adapt to these constraints to maintain a positive user experience.

Responsive Design Considerations

Responsive design is a must in the current era of varied screen sizes. A form designed with responsiveness in mind adapts to the screen size of the device it’s viewed on. This means that no matter whether a user is accessing your form from a small smartphone, a larger tablet, or a desktop computer, the form will adjust to fit the screen perfectly.

Touch-Friendly Input Fields and Buttons

With mobile devices, users interact directly with the screen. Therefore, input fields and buttons must be large enough to be easily tapped without accidentally selecting the wrong element. The area to be selected for touch should be at least 48x48px and for click 46x46px. Furthermore, click and touch areas should have at least 8px distance to each other.