--- title: Best Practices and Usability for Online Forms url: "https://b13.com/knowledge/creating-effective-web-forms" description: Forms are a common way to interact with websites, but they are easy to get wrong. We present best practices for designing intuitive forms every time. image: "https://b13.com/fileadmin/_processed_/7/2/csm_best-practices-online-forms2_d933966897.png" date: 2021-10-18 modified: 2026-08-19 lastUpdated: 2026-08-19 --- # Best Practices and Usability for Online Forms [ UX/UI-Design ](https://b13.com/knowledge/uxui-design) [ Forms ](https://b13.com/knowledge/forms) Best Practices and Usability for Online Forms =============================================== 25 October 2021 [ RSS Feed ](https://b13.com/rss.xml) ![User interface elements on an orange background, including text input fields, checkboxes, and a password entry field with a visibility toggle.](https://b13.com/fileadmin/_processed_/5/d/csm_best-practices-online-forms1_45e7bdf1a3.webp) Forms are one of the most common ways to interact with a website, for example signing up for a newsletter, completing a check-out process, contacting a company, or creating an account. It’s important to get the design right. The first thing users do when they see a form is to estimate how much time it will take to complete. They do this by scanning the form. The more complex a form appears, the more likely users are to abandon the process. The key is to make the process as seamless and simple as possible without negatively impacting the user experience. There are several well-established (but often ignored) guidelines to designing great forms. The Nielsen Norman Group talks about them in their article [Website Forms Usability: Top 10 Recommendations](https://www.nngroup.com/articles/web-form-design/). Here we present a deep dive into the best practice usability guidelines for designing online forms, so that users stay on task and have a delightful interaction with your website. Talk to our Design team to find out more. ------------------------------------------- [ Let’s connect! ](https://b13.com/lets-connect) Labels -------- ### Label and labelling of input fields The design principle of proximity states that related elements should be placed close to each other. This Nielson Norman Group article about [form design and white space](https://www.nngroup.com/articles/form-design-white-space/) explains that when a label is placed close to the corresponding input field, the eye can easily recognise which label belongs to which input field. ![place label close to input field](https://b13.com/fileadmin/_processed_/8/0/csm_image16_6db3dee806.webp) 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. ![Form fields for user registration, including sections for Name, Email, and Password. The Password field shows a green checkmark indicating acceptance, while a red "Don't" indicates an issue with the input.](https://b13.com/fileadmin/_processed_/6/7/csm_image14_d9fa577c6c.webp) Avoid capital letters in labels. They are harder to read and so make it harder to complete the form. ![Form fields for user registration, including sections for name, email, and password. The password field indicates validation status with a red "Don't" and a green "Do" next to the respective fields.](https://b13.com/fileadmin/_processed_/1/d/csm_image6_a24e4f1e2c.webp) The name of a label should be clearly understandable and in simple language to make the form easily accessible and to avoid mistakes. Labels should explain at first glance what information is needed. If technical terms are unavoidable, always include explanatory text to help. 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 and easily. ![Two input fields for email and password, with indicators for validation. The email field is labeled "Email," and the password field is labeled "Password." A red "Don't" and a green "Do" indicate the status of the inputs.](https://b13.com/fileadmin/_processed_/5/d/csm_image2_4c99ce9dbf.webp) ### Placeholder as an extension of the labeling Placeholders should never be used instead of a label, 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](https://www.nngroup.com/articles/form-design-placeholders/). ![Two email input fields are displayed side by side. The left field shows a red "Don't" with a cross mark, indicating an invalid entry. The right field shows a green "Do" with a check mark, indicating a valid entry.](https://b13.com/fileadmin/_processed_/7/6/csm_image17_7b1e14074b.webp) ### Note texts to explain input or formatting requirements. 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. ![Form fields for entering names and phone numbers, with instructions indicating to provide information on the right side and a warning not to on the left side. The right side includes a note about contacting for order-related inquiries.](https://b13.com/fileadmin/_processed_/a/8/csm_image5_65574b0cd1.webp) ### Use Input Masks. Input masks are not just placeholders, but format the data provided by the user to a desired format. 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. ![Form fields for entering credit card information, including sections for credit card number, expiration date (DD/MM/YYYY), and phone number in a specified format.](https://b13.com/fileadmin/_processed_/9/f/csm_image19_1b97ba4741.webp) ### Note Be mindful of your audience. Labelings, placeholders, masks etc. may differ between countries and regions. Input fields -------------- ### Input fields should look like 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. ![Two input fields labeled "Name," with one field marked in red with "Don't" and an "X," and the other field marked in green with "Do" and a checkmark.](https://b13.com/fileadmin/_processed_/d/4/csm_image4_4cdbd7365d.webp) ### 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. ![Form fields for user registration, including sections for entering a name, email address, and password. The name field is highlighted in yellow.](https://b13.com/fileadmin/_processed_/d/e/csm_image23_c1f9200cf3.webp) ### Input fields should be accessible via tab. Some users use the tab key to jump to the next input field. The form should be tested to see if the tab key navigates to the input fields in the correct order. Note also that the input fields themselves should be arranged logically as well, and that when a value is selected, the most frequently used options should be at the top. ### Avoid confirming the email address or password. If e-mail address or password fields are used in a form, refrain from making users repeat the input. The purpose of entering the data twice is to ensure that the data has been entered correctly. However, users often copy and paste the same content into the corresponding field. If this function is blocked, however, the risk is slightly increased that users will make one or more mistakes and, in the case of a password, not even see the error. It is better to give the possibility to display the password, for example. Unmasking the password and PIN helps to avoid logon errors. ![Form fields for user registration, including sections for name, email, and password with options to show or hide the password. Indicators for validation are shown, with a red "Don't" and a green "Do."](https://b13.com/fileadmin/_processed_/0/0/csm_image20_0fe1c9e408.webp) ### Size of the input fields should correspond to the content. Input fields should reflect the expected content in their size. 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. ![Form layout displaying fields for address, zip code, and city. The left side indicates incorrect entries with a red "Don't" and an "X," while the right side shows correct entries with a green "Do" and a checkmark.](https://b13.com/fileadmin/_processed_/9/f/csm_image13_d8092d6914.webp) ### Do not separate input fields into subfields. 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. ![Form fields for entering personal information, including "First Name," "Last Name," and "Full Name." A red "Don't" with a cross indicates an error, while a green "Do" with a checkmark signifies correct input.](https://b13.com/fileadmin/_processed_/3/6/csm_image9_e966e4595b.webp) ### Provide appropriate keyboard. 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. ![Two smartphone keyboard layouts for entering contact information. The left side shows a QWERTY keyboard with a red "Don't" indicator, while the right side displays a numeric keypad with a green "Do" indicator.](https://b13.com/fileadmin/_processed_/6/7/csm_image22_a9728f4f9c.webp) ### Avoid dropdown elements if 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. ![Dropdown menu for selecting gender on the left, showing options: "Please select," "Male," "Female," and "Other." On the right, a simplified selection with buttons for "Male," "Female," and "Other," labeled with "Don't" and "Do" indicators.](https://b13.com/fileadmin/_processed_/5/5/csm_image10_0133f94e03.webp) CTA button ------------ ### Avoid buttons that reset the form or delete input. The risk of involuntarily deleting entries made so far outweighs the unlikely event of wanting to start the form from scratch. The frustration of accidentally resetting a form will almost certainly result in users not filling out the form again. ### 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 end 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”. ![Account creation form with fields for username and password. Two buttons are displayed: "Submit" in orange with a red "Don't" indicator, and "Create my account" in orange with a green "Do" indicator.](https://b13.com/fileadmin/_processed_/5/b/csm_image18_c45b532c25.webp) ### Disable button after sending. Processing a form usually takes some time. Therefore, it is important to provide feedback not only when the action is complete, but also when a button has been pressed. Disabling the button not only prevents accidental resubmission, but also informs the user that the system has received their submission. ### Design primary and secondary buttons differently. If possible, secondary buttons should be avoided. However, if the form contains more than one button, each button should be visually weighted differently. The primary button should be more prominent than the secondary. Likewise, there should be enough spacing between each button so that the wrong button is not clicked accidentally. ![Checkout interface displaying two sections for entering a promotional code. The left section shows a red "Don't" indicator, while the right section features a green "Do" indicator, suggesting successful code application.](https://b13.com/fileadmin/_processed_/f/2/csm_image15_31cfc6b0d0.webp) Error message & validation -------------------------------- A digital product should always be designed and developed in such a way that it is error-friendly. That is, in the optimal case, no errors occur. This is only the case if the digital product reacts as flexibly as possible to the user’s input. More information about error handling can be found in our article “Best practices and usability for error messages and feedback systems”. The form and its structure ---------------------------- ### Keep it simple. 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 and easily. Only request relevant information or remove all fields that can be derived at a later time or that can be omitted. 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. ### Arrangement of input fields from easy to hard. Always prioritize the form’s input fields from easy to hard, and 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. ### Use single-column layout. 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. ![Form layout displaying fields for Name, Company, Email, and Phone Number, with a "Don't" section marked in red and a "Do" section marked in green, indicating correct and incorrect entries.](https://b13.com/fileadmin/_processed_/a/e/csm_image7_4cc147ccf8.webp) ### Structuring a complex form into semantic groups. The design principle of proximity is not only used for the label to the input field, but also for input fields that logically belong to each other. More complex forms in particular should have a visual separation or section headings that divide input fields into semantic groups. ![Form layout displaying fields for personal and contact information, including sections for name, email, address, zip code, and city. Indicators show "Don't" with a red cross and "Do" with a green checkmark.](https://b13.com/fileadmin/_processed_/5/2/csm_image12_d85dce7e28.webp) ### Note the size of the input fields and buttons. Especially for mobile devices, attention should be paid to the minimum size of input fields and buttons, as too small/narrow elements can make operation more difficult and unnecessarily frustrate users . 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. ![Two input fields for labeling, one with a red "Don't" and an "X" symbol, and the other with a green "Do" and a checkmark. Both have a "Submit" button below them.](https://b13.com/fileadmin/_processed_/d/f/csm_image1_2c5889faff.webp) ### Be careful with predefined input values. Predefined input values can be used to minimize the effort of filling out a form. However, predefined input values only make sense if you can be sure that more than 95% of the users would choose this value—especially if this value is needed. Users usually skip pre-filled input fields and do not check their value anymore. ![Two form fields for entering names, with a dropdown for selecting a country. The first field shows "Afghanistan" with a red "Don't" indicator, while the second field prompts "Please select" with a green "Do" indicator.](https://b13.com/fileadmin/_processed_/2/3/csm_image3_77e3ee49a0.webp) ### Use smart default settings. However, the rule for predefined input values does not apply to smart defaults, which are preset values based on available information from the user. Smart defaults can not only speed up the form filling process, but also reduce possible input errors. Nevertheless, users should be asked in advance whether they want to fill in the form with the preset values. ### Auto-fill functions of the browser. Some browsers have the function to automatically fill forms with just one click. Therefore, each input field should be provided with a term that the browser can recognize and fill in order to simplify and accelerate the form process for the user. This includes, for example, first name, last name or e-mail, but also credit card information. ### Use autocomplete when possible. When entering data, be mindful of the user effort required. Typing is not only time-consuming, but also error-prone—especially on mobile devices. Provide users with a list of suggestions based on the content of the input field. For example, GoogleMaps can be used to complete the address as it is typed. ### Distinguish between required and optional input fields, instead of mandatory fields. Generally, the majority of input fields in a form are mandatory. Therefore, only the input fields that are actually optional should be marked with “Optional”. Since the general rule is to ask only for necessary information, the number of optional input fields should be close to zero or limited to one or two. ![Form layout displaying fields for name, email, and phone number, with indicators for required and optional entries. The left side shows "Don't" with a red cross, while the right side shows "Do" with a green checkmark.](https://b13.com/fileadmin/_processed_/5/9/csm_image8_21ca18eb17.webp) ### Inform the 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 an information text that provides additional information. For example, when users can expect a response to a contact request. ### Handling sensitive data. People are increasingly sensitive about their privacy and security. Most users will hesitate when it comes to disclosing information that is too private or too sensitive. To avoid unnecessary doubts or questions, explain why certain data is needed and requested with the help of a notice. Avoid asking for unnecessary or confidential information. ### Avoid links to other sites. Avoid links that take users away from the form and to another page. The form process should not be interrupted by users suddenly finding themselves on another page and, in the worst case, even forgetting that they were in the process of filling out the form. Use links only when it is really necessary to explain something to users via an official source. Multi-step forms ------------------ ### Use of a significant progress indicator. 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. ![Progress indicators showing four steps in a process: Personal (completed), Address (completed), Payment (in progress), and Review (not started), with corresponding color codes indicating status.](https://b13.com/fileadmin/_processed_/e/4/csm_image11_ed8977b3cc.webp) ### 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. Accessibility --------------- It should always be possible for all users to access and use a digital product equally. Accessibility is not only beneficial for people with disabilities, it also contributes to a better user experience for all end users. Summary --------- If you’ve read this far, you’re as interested in creating delightful web experiences as we are! The Design Team at b13 are passionate about UX best practices and we’re experts at what we do. Contact us to talk more about usability and design, or if you’d like help improving the forms on your site. Talk to our Design team to find out more. ------------------------------------------- [ Let’s connect! ](https://b13.com/lets-connect) Related Articles ------------------ - ![A robotic hand holds a paintbrush, creating a purple swirl against a light blue background with circular patterns.](https://b13.com/fileadmin/_processed_/b/d/csm_DesignAndKI_Headerbild_bd966b1d32.webp) ### Designing Responsibly in the Age of AI: What We’re Learning as We Go 17 July 2026 | Laura Heine Laura Heine shares what she learned at the Design Leadership Meetup about responsibility, documentation, and treating AI fairly as a team. [ Read more: Designing Responsibly in the Age of AI: What We’re Learning as We Go ](https://b13.com/knowledge/designing-responsibly-in-the-age-of-ai-what-were-learning-as-we-go) - ![Several colorful web page mockups stacked together, showcasing different layouts and design elements against a purple background.](https://b13.com/fileadmin/_processed_/e/3/csm_CaminoTheme_Headerbild_d082598009.webp) ### Camino—The Need for a Default Theme in TYPO3 Is Real 27 January 2026 | Benni Mack With TYPO3 v14, Camino introduces a default theme that removes friction from first installs. Why this matters—and how TYPO3 laid the groundwork. [ Read more: Camino—The Need for a Default Theme in TYPO3 Is Real ](https://b13.com/core-insights/blog/camino-the-need-for-a-default-theme-in-typo3-is-real) - ![User interface design featuring a dark sidebar with navigation options and a central content area with placeholder text.](https://b13.com/fileadmin/_processed_/6/6/csm_V14BackendUX_Headerbild_6dcecb335f.webp) ### Designing TYPO3 14’s Backend: Our Vision for a Modern, Expandable Foundation 12 January 2026 | Laura Heine b13 is redesigning TYPO3’s backend for version 14 to feel modern, work faster, maintain user context, and create an expandable foundation that can evolve for years to come. [ Read more: Designing TYPO3 14’s Backend: Our Vision for a Modern, Expandable Foundation ](https://b13.com/knowledge/designing-typo3-14s-backend-our-vision-for-a-modern-expandable-foundation) - ![User interface elements including text fields, checkboxes, and buttons, connected by arrows on a purple background.](https://b13.com/fileadmin/_processed_/f/7/csm_EffectiveWebForms_Headerbild_2c906e6176.webp) ### Best Practices for Effective Web Forms 18 August 2025 | David Steeb Effective web form design is a critical component of user engagement and conversion. By focusing on clarity, simplicity, and user experience, businesses can create web forms that… [ Read more: Best Practices for Effective Web Forms ](https://b13.com/knowledge/creating-effective-web-forms) - ![A purple folder is centrally placed, surrounded by red and blue rectangular elements connected by lines on a grid background.](https://b13.com/fileadmin/_processed_/1/5/csm_EffectiveInformationArchitecture_Headerbild_c5bbf51bfe.webp) ### Designing an Effective Information Architecture: Best Practices 30 July 2025 | David Steeb Dive into our latest article exploring the world of information architecture and its profound impact on user experience. Learn key strategies and best practices for designing… [ Read more: Designing an Effective Information Architecture: Best Practices ](https://b13.com/knowledge/designing-an-effective-information-architecture-best-practices) - ![Two robotic arms are positioned around a magnifying glass, focusing on the letter "g" in a stylized font. The background features a grid pattern with repeated "Ag" symbols.](https://b13.com/fileadmin/_processed_/1/8/csm_FontGuidelines_Headerbild_6f3f5a0baa.webp) ### Designing with Type: A Guide to UI Font Size Guidelines 03 June 2025 | David Steeb Discover the importance of UI font size guidelines for creating accessible and visually appealing UI designs. Learn the best practices for typography in UI, including consistency,… [ Read more: Designing with Type: A Guide to UI Font Size Guidelines ](https://b13.com/knowledge/designing-with-type-a-guide-to-ui-font-size-guidelines) - ![A graduation cap is centrally placed among various flowchart elements, including rectangles and circles, set against a gradient background. The design suggests themes of education and decision-making processes.](https://b13.com/fileadmin/_processed_/2/e/csm_MasteringWebFlow_Headerbild_1558d4dcea.webp) ### Mastering Website Flowcharts 21 May 2024 | Stefanie Kreuzer An optimal user flow is crucial for successful websites. Learn how to use flowcharts to achieve clarity early in the UX design process. [ Read more: Mastering Website Flowcharts ](https://b13.com/knowledge/mastering-web-flow-charts) - ![Wireframing Best Practices](https://b13.com/fileadmin/_processed_/1/e/csm_Wireframing_4b24c64a42.webp) ### Mastering the Art of Wireframing: Essential Tips and Technique 31 August 2023 | Stefanie Kreuzer Wireframing is the first step in designing the structure of a website, and it serves many purposes; to describe how information is presented on a page, to determine a website’s… [ Read more: Mastering the Art of Wireframing: Essential Tips and Technique ](https://b13.com/knowledge/wireframing-best-practices) - ![A pathway leads through stylized clouds, flanked by a magnifying glass and gears, with icons representing text and documents in the background, suggesting themes of exploration and technology.](https://b13.com/fileadmin/_processed_/8/0/csm_accessibility-guide_0acd1932f3.webp) ### A Guide to Accessibility Considerations in UX Design 12 April 2024 | Franzi Töpler People with disabilities constitute one of the most significant segments of online users, but it is an often-overlooked population in the digital world. Increasing accessibility to… [ Read more: A Guide to Accessibility Considerations in UX Design ](https://b13.com/knowledge/a-guide-to-accessibility-considerations-in-ux-design) - ![A robotic arm is positioned near a laptop screen displaying a grid and technical diagrams, while a human hand holds a red block, suggesting interaction between technology and manual input.](https://b13.com/fileadmin/_processed_/e/9/csm_UserFlowTools_Headerbild_ae115ca311.webp) ### Choosing a User Flow Tool 03 April 2024 | Stefanie Kreuzer In digital design, picking the right user flow tool isn’t just about choice; it’s about navigating challenges like integration issues, team collaboration, and budget constraints.… [ Read more: Choosing a User Flow Tool ](https://b13.com/knowledge/choosing-a-user-flow-tool)