{"id":54734,"date":"2020-12-03T07:00:27","date_gmt":"2020-12-03T15:00:27","guid":{"rendered":"https:\/\/eigene-homepage-erstellen.net\/?p=54734"},"modified":"2024-09-05T08:00:10","modified_gmt":"2024-09-05T15:00:10","slug":"form-follows-function-how-to-properly-label-online-form-fields","status":"publish","type":"post","link":"https:\/\/eigene-homepage-erstellen.net\/blog\/design-dev\/form-follows-function-how-to-properly-label-online-form-fields.htm","title":{"rendered":"Form Follows Function: How to Properly Label Online Form Fields"},"content":{"rendered":"\n

When was the last time you enjoyed filling out a form? No, seriously, like really enjoyed it? I mean kicked in your roommate’s bedroom door to show them a video of a gaze of chunky adorable raccoons tearing at a grown man holding a storage container full of hotdogs<\/a> kinda fun. Never?<\/p>\n

Not surprising. Because, the role of a form isn’t to be fun. A form is a tool that collects data from a user, usually in exchange for services or additional information. A form needs to be efficient, elegant, and accessible.<\/p>\n

Forms that meet the criteria I just laid out are more likely to see submissions (conversions). That’s because these forms will clearly request information, which limits confusion, which in turn means your users will more often than not fill in the form correctly and submit it on their first try.<\/p>\n

Forms are a big topic where accessibility, user experience, and CRO are concerned. And while there are varying opinions on how to approach forms from each perspective, there is one tactic that is a simple starting point to an elegant, accessible form that all disciplines can agree on: proper form field labeling. When done right, label elements expand the interact-able range of your fields. When a user clicks or focuses on a label, that part of your form will gain focus. No wasted space; the labels actively assist in form completion.<\/p>\n

However, when done incorrectly, form label elements can actually detract from the user experience, impact accessibility, and ultimately lead to decreased conversions.<\/p>\n

Common Form Label Problems<\/h2>\n

In my experience the most common issue I find when auditing forms for accessibility is poor labeling. Labels are often hidden and “replaced” with some other aspect of a field. Here are a few examples of those replacements. Let us see how many you are guilty of…<\/p>\n