UX Design and Usability in Web Forms

A web form is the toll booth of digital marketing. Visitors never come to a site to fill one in, so every field, label, button and message must make that step feel effortless. Well-designed forms ask only what is necessary, guide the eye down a single column, name the action clearly and explain errors, which raises completion and conversions.

Imagine the head of growth at a software company who has just paid for a campaign that sent twelve thousand qualified visitors to a landing page. The offer is strong, the copy is sharp, and the creative team is pleased. The page converts at one and a half percent. When the analytics team looks at the funnel, they find that most visitors scrolled to the form, started it, and left without sending it. The form asked for fourteen pieces of information, used the placeholder text as the only label, and closed with a button that said Submit. Nobody had thought of the form as part of the design, and yet it was the single most important rectangle on the page.

The original version of this article began with an observation that every digital team should keep on the wall. When a person enters a website, they have a specific objective, whether to obtain information or resources or to buy a product. Most of the time reaching that objective requires filling in a form, but the form is never the user's goal. It is a step that the user tolerates, not one that the user enjoys. The design question is therefore how to make the step so light that it disappears.

Why do web forms deserve executive attention?

Although forms can become tedious for customers, they are necessary for the company to collect information. In the inbound marketing methodology, obtaining the email of the people who visit the site is the moment when an anonymous visitor becomes a contact that the company can accompany through the whole buyer journey. Every conversion that follows, from the first nurturing email to the sales conversation, depends on that exchange. If you are new to the idea, our article on what leads are and why they are key to inbound marketing explains how contacts become revenue.

The methodology asks the company to offer valuable content in exchange for data, and the form is how that data is collected. The author adds a warning that applies to every budget line spent on attracting traffic. The form should not become an obstacle, because if it is confusing, very long or does not generate trust, it does not matter how much value is offered. The user experience will suffer and the person will most likely leave for another site, since in the digital world everything is a click away. Our article on how to maximize your lead conversions describes the wider context in which a form sits.

Independent research points in the same direction. The Baymard Institute, which studies online checkout in depth, reports in its work on minimizing form fields in checkout that most sites ask for more fields than they need, and that reducing them is one of the most reliable improvements. The Nielsen Norman Group's website forms usability recommendations likewise treat forms as a place where small design choices decide whether people complete a task. The solution, the author says, is quite simple. Design the form thinking about the user experience and about usability. What follows are the five elements that every form shares and how each should be optimized.

How should the structure of a form be organized?

Structure refers to how the fields are organized, the logical connections between the elements and the overall layout. A person should understand at a glance what the form asks and in what order, and should be able to complete it correctly the first time.

The first principle is not to ask too much. Before designing, the team must establish how and for what the information will be used and then ask only what it really needs. A form that is too long makes the customer feel overwhelmed, and not only because of its length. When there are many questions, people may not want to answer or may not know how, and they end up leaving. The second principle is to order the questions in a common and logical way, so that the form feels familiar. As the author observes, we will hardly ever see a phone number asked before a name. The third is to group related information, for example personal data in one block and company data in another, so that the user understands what is being requested.

The fourth principle concerns columns. The author recommends a single column because reading is faster, and notes that if two columns are used, many more elements must be considered so that the flow does not become an obstacle. Independent research agrees. The Baymard Institute advises that teams avoid extensive multicolumn layouts in forms, since people tend to miss fields placed beside each other. Short, closely related pairs, such as city and postal code, are the usual exception.

Which fields should a form include, and how should they behave?

Fields are the places where the user enters data, and they include text boxes, checkboxes, radio buttons, selection lists and password boxes. The choice of field type matters as much as the choice of question.

The author starts with a point that is the heart of the matter, which is to minimize the number of fields. A person who sees a very long form is unlikely to fill it in, so the information requested should be limited. Joining fields can also make a form look lighter. The example given is a date, where a single field with access to a calendar replaces three separate fields for day, month and year. That advice is sound for dates close to the present, such as a booking, though for a date far in the past, like a birth date, a calendar can be slower than typing, so the choice should be tested with the real audience.

The author also recommends avoiding optional fields. An optional field suggests that the information is not very relevant or that people are uncomfortable answering, and many times it makes a person leave without realizing the field was optional. If optional fields are used, they must be identified clearly. A related practice is to mark which fields are required so that nobody has to guess. Predefined options are another useful tool, since they help people complete the form and keep the database in order by limiting free text. A country list, a job level or an industry are natural candidates, and they save the marketing team hours of cleaning data later. Finally, the field currently selected should be clearly highlighted, which prevents confusion and wrong entries. This also helps people who navigate with the keyboard, an accessibility matter that the W3C Web Accessibility Initiative forms tutorial treats in detail.

What makes a field label clear?

Labels are the texts that specify what information goes in each field, and a clear label makes the process easier for the user.

The author's advice is to use short and descriptive expressions that let the client see quickly what to fill in. On placement, the best position is above the field, because it follows the reading flow and lets users take in the information quickly. Placing labels to the left can be beneficial if the intention is that fields are reviewed more carefully, and neither option should confuse the user. The author is firm that labels should sit outside the field. When a label is placed inside the writing area, users can lose sight of what they should enter once they start typing, and they make mistakes.

The accessibility guidance reinforces this point. The W3C explains in its page on labeling controls that every form control needs a label that is programmatically associated with it, so that people who use screen readers know what each field is for. Placeholder text that disappears as soon as someone types is a frequent source of errors, and it should be used for examples, not as a replacement for the label. This is a case where the lessons of usability and accessibility coincide, and where a small decision in design protects both conversion and compliance.

How should buttons be designed and named?

Buttons are the calls to action of the form. When the user clicks, the process either continues or is completed, which makes them an important element.

The visual aspect comes first. A button must look like a button and give feedback when the pointer passes over it and when it is clicked. It should stand out from the rest of the elements, since it is the one that completes the process. Position comes next. The button belongs at the end of the form, because it is the last step, and there should not be a large space between the last field and the button, since the aim is that it is clicked right after finishing.

The wording of the button is where many teams lose conversions without noticing. Generic names such as Submit give the impression that the form is only an administrative requirement, and they do not tell the user what will be received in return. It is better to specify what the person gets, for example Get the template or Subscribe to the blog. The final rule concerns hierarchy. There should be a single main button that completes the form and serves the main objective, and any button to go back or to delete should have a lower visual weight, so that people do not press the wrong one by mistake.

How should a form give feedback and handle errors?

Feedback consists of the messages that appear in a form when something has been completed or sent correctly, and also when something is wrong, in which case the message says what the error is and offers a possible solution.

The author recommends color codes, with green indicating that information is correct, red indicating the opposite, and yellow warning that a password is weak. The advice to validate fields as the form is filled in is excellent, because the user can correct immediately instead of returning to review. One refinement is needed. Accessibility guidelines warn against conveying meaning by color alone, since a significant share of people have some form of color vision deficiency. The simplest solution is to pair each color with an icon or a short text, such as a check mark and the words Looks good, or a warning sign and a sentence explaining the problem.

Two more practices complete the picture. If a help button is added to explain a field, it should be highly visible, otherwise it will not achieve its purpose. And when there is an error, the form should indicate specifically what the error is, so the person can solve it easily. A message that says Invalid input forces the user to guess, whereas a message that says The phone number must include the area code tells exactly what to do. The Nielsen Norman Group makes a related point in its principles for reducing cognitive load in forms, which is that people should be given as few chances to guess as possible.

What does this mean for the C-level?

For senior leaders, forms are one of the cheapest places in the business to find revenue. Traffic is expensive to acquire, and a small improvement in completion rate multiplies the return on every campaign, every trade show and every sales initiative that points to a form. Raising the conversion rate of a form is often a more economical way to grow leads than buying more traffic, because the visitors are already there. Forms also carry risk, because they collect personal data. The questions asked, the consent obtained and the way the data is stored are matters of regulatory and reputational importance, which is another reason to ask only what is necessary.

The leadership questions are straightforward. Who owns the forms of the company, and when were they last reviewed? What share of visitors who start a form complete it? Does the data collected reach the CRM correctly, and does the sales team use it? In many organizations the answers reveal that forms were built years ago by different teams and never examined as a system, which is precisely why a structured review pays off quickly.

How can a director start next Monday?

Pick the three forms that generate the most contacts, perhaps the contact page, the main content download and the quotation request. Complete each one yourself on a phone and note every moment of hesitation. Then count the fields, remove those that the sales team does not use, and rename the buttons to describe the benefit. Check that each label is visible after typing begins and that error messages say what to fix. Measure the completion rate before and after the change, for two to four weeks, and share the result with the leadership team. Then repeat the exercise with the next set of forms. Teams that do this routinely tend to find that a handful of small changes deliver most of the improvement.

How does ICX help?

ICX Consulting reviews the full path from the first click to the conversation with sales, joining the design of forms and landing pages to the CRM that receives the data. To start with an expert evaluation, we recommend our Heuristic Tests Toolkit. We chose it for this topic because a heuristic review is the fastest way to find the usability problems that the five elements above describe, such as unclear labels, hidden errors or ambiguous buttons, before investing in testing with users. You can also read about usability testing in UX design to see how to confirm your changes with real people.

Frequently asked questions

How many fields should a form have?

As few as the purpose allows. Each additional field lowers completion, so ask only for what you will use in the next step of the relationship. You can collect further information later, through progressive profiling or in the first conversation.

Should I use a single column or two?

A single column is the safer default because it creates a clear reading path. Place fields side by side only when they are closely related and short, such as city and postal code, and test the result.

Is placeholder text enough as a label?

No. Placeholder text disappears when someone types, which can make people forget what a field asks for, and it is poorly supported by assistive technology. Use a visible label outside the field and keep the placeholder for examples.

What is the best text for a form button?

One that tells the user what they will receive, such as Get the guide or Request a quotation. Avoid generic words like Submit, which describe the mechanics of the form and not the value to the person.

A good form respects the time and the trust of the person who fills it in, and the results show up in conversions that cost nothing extra to earn. If you would like an expert review of the forms and landing pages that matter most to your business, request a diagnostic with an ICX consultant and we will review them with you.