Build good forms

Below you will find numerous form design tips & UX examples for forms. Forms are highly contextual and depend on more than just the design of the form itself. These are general notes and may vary in special cases.

I. General

1. multi-level forms instead of one-page forms

Splitting forms into two or three steps will almost always make it easier to complete the forms. I keep finding that multi-level forms outperform generic single-level forms. There are three reasons why multi-level forms work so well:

• The first impression of multi-step forms is less intimidating than a long form with many question fields.
• By asking for sensitive information (email, phone) in the last step of a multi-step form, users* are more likely to fill in these fields – otherwise they lose the progress made by filling in the previous steps (this is a proven cognitive bias known as the “sunk cost fallacy”).
• When you see a progress bar, users are more motivated to complete the form. Again, this is based on numerous proven cognitive biases.

Remove fields that are not required.

• Each additional field in your form loses important leads – consider whether each question justifies the incremental loss.

3. use conditional logic to shorten.

• In conditional logic (sometimes called “branching logic”), a question is only displayed if a user has answered a previous question in a certain way. This technique reduces the average length of your form and at the same time reduces form abandonment by not displaying questions that may be irrelevant to certain user*s.

4. top left aligned field names are most readable.

• UX researchers found that aligning labels over fields on the left increases form execution time. The reason for this is that it requires fewer “visual fixes”. There is an acceptable alternative to top-oriented field names, which I discuss in item #16.

5. avoid asking questions side by side.

• Eye-tracking studies have shown that simple single-column layouts are better than multi-column layouts with side-by-side questions. The only exception to this rule is the query of dates (day, month, year) or time (hours and minutes), where several fields are expected in one row.

6. give people a reason to use your form.

• Imagine if you filled out a long form that would take an hour to complete? No one would fill it out. Unless you’re gifting a trip to the Bahamas to someone who fills it out. The promise of a free trip would give people the motivation to push through despite the long and poor user experience. Although this example is exaggerated, it illustrates the role that motivation plays in form optimization.

Group related fields into sections or steps.

• If your form contains more than six fields, it makes sense to group questions into logical sections or steps.

II. questions & field types

8. select field types that reduce the number of clicks required to complete.

• When Microsoft changed its computer shutdown message from a clickable shutdown icon to a dropdown box, they found that fewer people shut down their computers – just because of two extra clicks. When selecting the Formtype to use, try to use as few clicks as possible.

9. use smart presets.

• If you ask for “phone number” or “country”, you should suggest a default phone number or country based on the user’s IP address.

10. use radio buttons, checkboxes and dropdown lists instead of free text fields.

11. radio buttons should be arranged vertically.

• The vertical orientation of radio buttons (and checkboxes) makes them faster to process compared to a horizontal layout.

12. do not use split fields when requesting phone numbers or birth dates.

• Subdivided fields force the user to unnecessarily make additional clicks to get to the next field. Instead, it is better to have a single field with clear formatting guidelines in the placeholder. Even if you automatically send users to the next field, field subdivision requires more rigorous validation that has the potential to backfire.

13. confidential information

• Explain clearly why you are asking for confidential information. People are increasingly concerned about the protection of their data. If you need to ask for sensitive information, make sure you explain why it is needed using the support text below the field.

14. when querying addresses, use a zip code search to reduce field entry.

• When asking users to fill in their address, it is best to ask only for a house number and zip code and then use a service to suggest the full address.

15. use placeholders correctly

• A placeholder is the light text that appears in a form field. Wildcards should be used to help users fill in the field if they are unclear. In other words, you probably don’t need a placeholder for fields like “First Name”.

16. always display a field identifier

• A field identifier is the question text located above the field. These should always be present and not replaced by placeholders. Why? Because when you start typing text into a field, the placeholder text disappears, forcing users to remember the text. The only case where it may be acceptable not to have a field label is if you are using inline labels. Inline labels are a hybrid solution that are always in view, but don’t take up as much height space as top-facing labels.

17. use predictive search for fields with many predefined options.

• If you are asking users to select their country, profession, or anything else with a large number of predefined options, it is best to provide a predictive search function to reduce the number of required inputs and cognitive load.

III. predictive search – dropdown list

18. optional questions

• If you must ask an optional question, make it clear that it is optional. While I would recommend using optional fields to be removed after users have already submitted their data, they are still sometimes required to be asked. If you must ask optional questions, make it clear that they are optional with placeholders.

19. pictures

• Selectable images are among the most engaging question types

20. phone number

• Be careful when asking for phone numbers. People are less and less willing to share their phone numbers. Ask for it anyway, will very likely significantly increase the dropout rate.

21. input fields should be dimensioned according to the expected input.

• The size of a field should reflect how much text users are likely to enter. Therefore, fields such as postal code or house number should be shorter than fields such as street name.

IV. User friendliness

22. captchas

• Avoid the use of captchas. Captchas force the problem of spam management on users, causing friction and ultimately discouraging it. A better alternative would be to use an automated spam detection service like Akismet, a very simple quiz question (calculation 1 plus 3) or create a “honeypot” with hidden fields. Using a captcha should be the absolute last resort.

23. colors

• Don’t rely on colors for communication. While it is less common in women, one in 12 men has some degree of color blindness. When viewing validation errors or success messages, make sure that the field is not highlighted in green or red. Wherever color is used, try to also display text and/or icons to convey a message to users.

24. make sure that your entire form is navigable with the tab key.

• While many users use the tab key to navigate through forms, this is especially important for users with disabilities who rely on software that uses the tab function to move from one question to the next.

25. difficult questions

• If you ask a question that users may not understand, provide clear explanations to guide them to the correct answer. E.g. with a hint above a mouseover over a question mark.

26. does your form work on all popular browsers and devices?

• It may sound like common sense, but it’s good to verify that your forms work and are easy to use in all popular browsers and devices. When in doubt, use a service like BrowserStack.

27. is your form easy to use in bright or low light conditions?

• If people are likely to use your forms outdoors on their mobile devices, it’s important that your question fields are distinct from the form background. Otherwise, users may not be able to see where they should type.

28. make sure that nothing flashes more than twice per second.

• If you plan on using blinking cursors, animated progress bars, gifs, or anything else that blinks, make sure they don’t blink more than twice per second. Otherwise, this may cause seizures in some people.

29. enable browser auto-fill.

• Browsers like Google Chrome & Firefox now have an auto-fill feature that allows users to fill in standard fields with one click. For this to work, Google Chrome / Firefox look for contextual clues in the “Name”, “Label” and placeholder texts. Therefore, it is recommended to make sure that your fields are properly tagged with terms that a browser would recognize, such as “email”, “first name”, or “city”.

30. use step-by-step forms

• How do you keep your forms short enough to not scare users away, while still capturing more information when users are willing to provide more information? Step-by-step forms are an option. They allow the form to be sent when a user* has reached a certain step in the form, and then provide further information if they wish.

31. optimize the speed of your forms.

• Users expect websites and forms to load quickly. In fact, for every 100 milliseconds Amazon speeds up their site, they see a 1% increase in revenue. If you want to increase your conversions, make sure your form is as fast as possible.

32. automatic “next

• Avoid automatic advancing (automatically jumping to the next question). It is usually not expected and confused.

33. use visual cues and icons to make form fields more intuitive.

• Our brain processes visual images much faster than text.Visual prompts can be used to signal how to fill in a field.

V. Input validation & error handling

34. do not validate too strictly!

• Rigorous validation is a symptom of lazy programming. It is bad for the users. If there are many variations in the way users*can respond to a field (e.g. to a phone number with +12345678912, +44 12345678912, +44 12345678912, 012345678912), your programmers should use a rule that converts them to a consistent format on your page.
• Alternatively, you can use placeholders to clearly show the suggested format.

35. avoid double confirmation.

• Do not ask people to confirm their email or password twice. If you need to use a confirmation system for emails / passwords, it is better to have an icon or a checkbox that will confirm the password when you click on.

36. validate correctly.

• If you must use validation, make sure it is inline (to the right of the field) and report errors early. Do not wait for users to click “send” to report report validation errors. At the same time, inline validation should not be done in real time, as this is likely to report errors before users have filled in the field. Ideally, inline validation messages should be displayed about 500 ms after users have finished typing.

VI. trust

37. attractive design

• It has been shown that people trust “beautifully” designed forms / websites more than forms that look less aesthetic.

38. fix possible problems near your form.

• There are probably a number of reasons why people might feel uncomfortable using your forms. For example, “How long will it take to fill out the form?” – “Will I have to enter my credit card information?” – “Will I receive annoying phone calls from a salesperson?” By addressing them in advance, you can increase user confidence here.

39. show a strong trust note in close proximity to your form.

• Statements like “used by 100,000 people” and testimonials from other people in a similar situation are strong cues that make users more likely to trust you and use your form.

40. be careful with seals, unless you require payment.

• People associate privacy and security seals with payment. In the A/B test, adding a seal actually decreased the conversion rate because people thought they were going to a page to pay for something.

41. display live chat or contact information in the view of your form.

• For more complex forms where users may have questions about the form itself, this is an extremely powerful technique. It helps potential prospects answer any questions that are preventing them from using your form.

VII. multi-level forms & progress bars

42. when using multi-level forms, you should always display a progress bar.

• Progress bars encourage completion and reduce your users’ anxiety by clearly communicating how far you are from the end. Even if you start your progress bar with some progress already made, the number of people using the form will increase.

43. pay attention to your transition speeds.

• A dating platform collected data using a 5-step form. But they couldn’t figure out why users clicked the next buttons and then abandoned the form. It turned out that their transition speed was too fast. The user clicked on the next button and did not notice that the content of the step had changed because it changed so quickly. After slowing their transition speed, the bounce rate improved. This is one of the most non-intuitive lessons I’ve found about multilevel form design. After all, we are often told that faster is better. However, not when it comes to transition speeds.

44. use clear signage

• A progress bar alone is not enough. You should also display the total number of steps and the step the user is currently in to eliminate ambiguity.

IIX. Buttons & Call-to-Action

45. call to actions should end the sentence “I want….”.

• By default, many forms use boring call-to-action buttons like “submit” or “send”. These should be avoided and replaced with calls-to-action that correspond to what users want to achieve when filling out your form. A good rule of thumb is to answer the question “I want….” from the user’s perspective. For example, if it’s a request form for a free consultation, the call to action could be “Request my free consultation”.

46. make sure that the call-to-action contrasts strongly.

We’ve all heard about those infamous studies where changing the color of a button increased conversion. These studies can be dangerous if interpreted literally, as it is usually not the specific color that matters, but the contrast.

The call-to-action should have the same width as the fields.

• Uber’s forms use large full-width calls to actions that contrast sharply with the form backgrounds. By calling actions in the same width as fields, you remove any doubt about where the button is located.

Avoid using the “Clear” or “Reset” keys.

• In some forms there is a possibility to delete the fields next to the “continue” or “submit” button. The risk of accidentally deleting all the information you entered outweighs the small convenience of having to start over. Most users are aware that refreshing the page or re-entering information allows them to start over. Therefore, cancel or reset buttons should be avoided.

49. arrange your questions logically.

• For example, when asking for credit card information, ask for information in the same order it typically appears on the physical card (credit card number, expiration date, security code).

50. do not place too complicated legal messages near your keys.

• If you want your users to agree with a lot of complex disclaimers, try to combine them into as few files as possible and keep legal notices as precise as possible.

51. no automatic inclusion in mailing list

• Do not deceive users by automatically adding them to your mailing list. This looks manipulative and forces most users to make an extra click to unsubscribe from your list. It also violates the GDPR.

52 Clearly explain what happens next when you click on the “Send” button.

• When someone uses your form, they may wonder how long they will have to wait, if they need to prepare anything, or what will happen. Ideally, your form should redirect the user to a page that clearly communicates what will happen next and what they can expect.

53. send button

• When sending, deactivate the “Send” button. This serves to avoid duplicate entries and to additionally signal to users that the entries were successful.

Make it clear what users can expect next.

• Your call-to-action (and landing page in general) should clearly communicate what users can expect once he fills out your form.

55. use native functions

• Use the native features of the mobile device (camera, geolocation, date selection) to simplify tasks.

56. question fields and buttons should be at least 48 pixels high.

• The average size of the fingerpad for adults is about 10 mm. On the web, that’s about 48 pixels. Therefore, when designing forms to be used on mobile devices, make sure that your fields are at least 48 pixels high.

57. all form labels and placeholder font sizes should be above 16px.

• If you are designing forms for older users, your text should be at least 16px.

58. html input types

• Use specific HTML input types to display the correct keyboard. Have you ever noticed that when using a mobile device, the phone displays different keyboards depending on what question you ask? Sometimes the .com button appears, while sometimes a date selector appears? It’s all thanks to HTML input types. They are fantastic for mobile form design and you should be using them. There are eight input types that are relevant for form design:
  • input type=”text” displays the normal keyboard for mobile devices.
  • input type=”email” displays the normal keyboard plus “@” and “.com”.
  • input type=”tel” displays the numeric 0-9 key block.
  • input type=”number” displays a keyboard with numbers and symbols.
  • input type=”password” this hides characters as they are entered into the field.
  • Input type=”date” this displays the date selector of the cell phone.
  • input type=”datetime” The date and time selector of the cell phone is displayed here.
  • input type=”month” The month/year switch of the cell phone is displayed here.