---
title: "Forms Nobody Abandons: 12 Rules for Better Form UX"
url: "https://www.insideuxdesign.com/en/blog/forms-nobody-abandons-12-rules-for-better-form-ux"
language: "en"
description: "12 rules for forms people actually finish: labels, required fields, inline validation, error messages, autofill, and accessibility, with real examples."
published: "2026-10-08T09:00:00+02:00"
updated: "2026-10-14T09:50:33+02:00"
---

# Forms Nobody Abandons: 12 Rules for Better Form UX

Visible labels, well-timed validation, helpful error messages: 12 proven rules for forms, explained step by step using a real-world checkout example.

Forms are where interest turns into action: an order, an inquiry, a sign-up. And that's exactly where many websites lose people who were already almost convinced. Not because the offer is wrong, but because the form is too long, raises questions, or scolds them in red text for every typo.

The good news: form UX is one of the best-researched areas of interface design. The Baymard Institute has been testing e-commerce checkouts for years, the Nielsen Norman Group (NN/g) has published numerous studies on labels and error messages, and the W3C's Web Accessibility Initiative (WAI) describes in detail how to build accessible forms. From these sources, you can derive twelve rules that work in almost any project.

To keep things concrete, one example runs through the whole article: the checkout of a small online coffee shop. Here's what the original version looks like:

- One long page with 19 fields in two columns, including salutation, title, date of birth, phone and mobile number, "Confirm email," and "Confirm password."
- The labels exist only as placeholder text inside the fields and disappear as soon as you type.
- Some required fields have an asterisk, others don't.
- The newsletter checkbox is already checked.
- The button says "Submit," and errors only show up afterward as a red block of text at the top of the page: "Invalid input."

Sounds exaggerated? Forms like this are everywhere. According to Baymard, the average US checkout displays 23.48 form elements by default, 14.88 of them form fields. Based on Baymard's analysis, a good checkout can get by with 12 to 14 elements, or 7 to 8 fields. Below, the coffee checkout gets better, rule by rule.

## Less Is More

### 1. Only Ask for What You Really Need

Every field costs time and attention. Filling out a form means reading, understanding, remembering, typing, and checking. This mental effort is called [cognitive load](https://www.insideuxdesign.com/en/glossar/cognitive-load). The higher it is, the more likely someone is to give up or make mistakes.

That's why the most effective step is often the most radical one: cut fields. Go through every field and ask: What happens if it's missing? If the honest answer is "nothing, but marketing would love to have the data," it goes, or it gets asked later on a voluntary basis.

For the coffee checkout, that means:

- **Salutation and title** aren't needed to ship coffee. They also force people into categories that don't fit everyone. Without a salutation, the form is shorter and more inclusive.
- **Date of birth** is only necessary if there's a legal age check. Not for coffee.
- **Phone and mobile number** become a single, optional field, and only if the delivery service actually uses the number.
- **"Confirm email"** doubles the work. It's better to show the address again, clearly visible, on the review page.
- **Password and account creation** move to the end: after the order, customers can create an account with one click, since the data is already there.

That last point is no minor detail. In Baymard's survey of US online shoppers, 18% of those who abandoned a purchase say the reason was that the site wanted them to create an account. 17% cite a checkout process that was too long or complicated.

For fields that only some people need, [progressive disclosure](https://www.insideuxdesign.com/en/glossar/progressive-disclosure) helps: information and options appear only when they become relevant. A link like "Add company name" or "Add apartment, suite, etc." reveals the field when needed. People ordering for themselves never even see it.

### 2. One Column, a Clear Order, Sensible Groups

Two-column forms look tidy on large screens, but they're harder to read. The eye has to zigzag, and the order isn't obvious: Do you continue to the right or down? In testing, Baymard observed a two-column form being interpreted in three different ways. Depending on how they read it, participants filled in every field, only one column, or skipped required fields. The recommendation is just as clear: a single-column layout with only one reading direction.

There's one sensible exception. Fields that form a logical unit can share a line, such as postal code and city, or a credit card's expiration date and security code. According to Baymard, two or three such fields side by side don't cause problems, as long as the form as a whole stays single-column.

The order matters just as much. It should follow the conversation two people would have on the phone: first who, then where, then how to pay. Within an address, use the order that's customary in the respective country. In Germany, that means street and house number, then postal code and city.

Related fields get a shared heading and a bit more space before the next group. The coffee checkout is now split into three blocks: "Contact" (email), "Shipping address" (name, street, postal code, city, country), and "Shipping and payment." In code, these groups belong in a `fieldset` with a `legend` as its heading. That way, people using a screen reader also hear which section a field belongs to.

### 3. Split Long Forms Into Steps and Show Progress

Some forms can't be cut down to seven fields, like an insurance quote or a job application. In that case, it helps to split the form into logical steps. For multi-page forms, the W3C WAI recommends exactly that: meaningful stages, with information at every point about where you currently are.

A good progress indicator answers three questions: How many steps are there? Which one am I on? What comes next? For the coffee checkout, it could look like this:

> Step 2 of 3: Shipping and payment

Above it sits a bar with the step names "Address," "Shipping and payment," and "Review and order." A few details make the difference:

- The step number also belongs in the page title, so it reaches screen readers and browser tabs.
- Going back must be possible at any time without losing data already entered.
- The indicator must not cheat. If a fourth step suddenly appears after "Step 3 of 3," trust is gone.

For short forms with just a handful of fields, on the other hand, splitting them up is usually unnecessary. Multiple steps are worth it when they genuinely make the form easier to understand, not just make it look shorter.

## Label Clearly

### 4. Visible Labels Instead of Placeholder Text

Placeholder text is the gray hint that sits inside an empty field and disappears when you start typing. As the only label, it looks sleek but causes a whole series of problems. NN/g sums them up in an article with the blunt title "Placeholders in Form Fields Are Harmful":

- As soon as someone types, the label is gone. Anyone who gets distracted for a moment has to remember what the field was for, or delete their input to check. That strains short-term memory.
- Before submitting, there's no way to check whether the entries are in the right fields. This is especially true when the browser has autofilled them.
- Fields with gray text look as if they're already filled in. In NN/g eye-tracking studies, people's eyes were drawn to empty fields, while fields with placeholders were more easily overlooked.
- Placeholder text often has too little contrast and isn't reliably read aloud by screen readers.

The solution is unspectacular: a visible label above the field that stays put while typing. Format hints also belong in plain sight below the label, not in the placeholder.

In the coffee checkout, an empty field with the gray text "ZIP" becomes a "Postal code" label above the field. Below the phone number field, a short hint appears: "Only used if the delivery service has questions." That one sentence answers the question almost everyone has about phone fields: Why do they want to know?

Small texts like these are called [microcopy](https://www.insideuxdesign.com/en/glossar/microcopy). They're short, but they often decide whether a field raises suspicion or builds trust.

### 5. Clearly Mark Required and Optional Fields

A classic: some fields have an asterisk, others don't, and there's no legend. Whoever fills out the form has to guess. That's why Baymard recommends marking both: required fields with an asterisk and optional fields with the spelled-out label "(optional)." In the 2021 benchmark, only 14% of the sites examined did this.

Why both? If only optional fields are marked, people have to infer that everything else is required. In Baymard's tests with such forms, 32% of participants ran into a validation error because they hadn't filled in a required field. Clear marking costs a few characters and saves that loop.

Two practical tips:

- If you take rule 1 seriously, most fields will be required. Optional fields stay the exception, and that's exactly why "(optional)" makes them stand out.
- To a screen reader, an asterisk alone is just a punctuation mark. In code, the field therefore also needs the `required` attribute (or `aria-required="true"`) so that "required" is actually announced.

In the coffee checkout, a short note now appears once above the form: "Fields marked with \* are required." The only optional field is labeled "Phone number (optional)."

### 6. The Button Says What Happens

"Submit," "Next," "OK": labels like these only say that something will happen, not what. A good button describes the action and its result. If you read "Send inquiry," you know what happens after the click. With "Submit," it's unclear whether you're about to buy something, save something, or just have it checked.

In the coffee checkout, each step gets a button that names the next step:

- **Before:** "Submit" on every page
- **After:** "Continue to shipping and payment," then "Continue to review," and finally "Place order and pay"

In Germany, by the way, that last button isn't a matter of taste. Under the so-called "button solution" in the German Civil Code (Section 312j BGB), the order button in online shops must clearly indicate the obligation to pay, for example with "zahlungspflichtig bestellen" ("order with obligation to pay"). "Submit" or "Next" doesn't cut it there.

Beyond that: each step has exactly one primary action, and it's visually prominent. Secondary actions like "Back to cart" take a back seat and don't look like a second, equal button. Hardly any form needs a "Reset" button that wipes all entries. It mostly gets clicked by accident.

## Handle Errors Kindly

### 7. Validate at the Right Moment

Inline validation means a form checks input right at the field instead of only after submission. That's generally helpful: an error that shows up right next to the field is fixed faster than one you have to hunt for after clicking the button. Even so, in Baymard's benchmark, 31% of the sites examined don't use inline validation at all.

The timing is crucial, though. Showing "Invalid email address" after the first character scolds people before they're even done. One Baymard test participant put it in a nutshell: Why are you telling me my email address is wrong when I haven't had a chance to fill it all out yet?

That's why both Baymard and NN/g recommend a clear pattern:

- **Show errors when the field is left**, that is, when moving to the next field, or when the input is clearly complete, for example after the five digits of a German postal code.
- **Remove errors as soon as they're fixed.** Here, validation can run on every keystroke. A red message that sticks around even though the input has long been correct is unsettling.
- **Use positive feedback selectively.** A checkmark next to a correctly completed field provides reassurance, especially for complex input like passwords with rules.

Empty required fields are an edge case. Anyone tabbing through the form just to get an overview shouldn't immediately face a wall of error messages. So it's better to flag empty required fields on submission.

One more detail: a grayed-out button that only becomes active once everything is correct looks elegant, but it doesn't reveal what's missing. Let people submit instead, and then clearly show which fields still need attention.

### 8. Error Messages That Actually Help

A good error message answers two questions: What went wrong? And how can it be fixed? It sits right at the affected field, is written in plain language, and doesn't blame the person. For longer forms, NN/g also recommends a summary at the top that points to the individual fields.

Here's what that looks like in the coffee checkout:

> **Before:** "Invalid input"
> 
> **After:** "The postal code has 5 digits, for example 10115."

> **Before:** "Email invalid"
> 
> **After:** "Your email address is missing an @ sign, for example name@example.com."

> **Before:** "Required field!"
> 
> **After:** "Please enter your street and house number so your package can reach you."

> **Before:** "Payment failed. Error code 05."
> 
> **After:** "Your bank declined the payment. Check your card details or choose a different payment method. Your cart is still saved."

A few principles are built into these examples:

- **Specific, not generic:** "Invalid" only says that something's wrong. An example of the right format shows how to get it right.
- **No technical jargon:** Error codes and terms like "invalid" or "Request failed" don't help customers.
- **Calm tone:** Exclamation marks and all caps come across as a reprimand.
- **Keep the input:** After an error, all fields that have already been filled in stay filled in. A form that clears itself after submission is one of the surest ways to drive people away.

Even better than a good error message is an error that never happens. If people enter the postal code with a space or the phone number with a slash, accept it and clean up the input in the background. The form should be flexible, not the people.

## Mobile and Accessible

### 9. Use Sensible Defaults and Autofill

The fastest field is one that doesn't have to be typed at all. Browsers and password managers can fill in names, addresses, email addresses, and payment details automatically, as long as the form tells them what a field means. That's what the HTML attribute `autocomplete` with its defined values is for. For the coffee checkout, these include:

- `autocomplete="email"` for the email address
- `autocomplete="given-name"` and `autocomplete="family-name"` for first and last name
- `autocomplete="street-address"` for street and house number
- `autocomplete="postal-code"` and `autocomplete="address-level2"` for postal code and city
- `autocomplete="tel"` for the phone number
- `autocomplete="cc-number"`, `cc-exp`, and `cc-csc` for the credit card

This is about more than convenience. The WCAG, the international guidelines for accessible web content, require in success criterion 1.3.5 ("Identify Input Purpose") at level AA that the purpose of fields collecting personal data be machine-readable.

Defaults also include anything the system already knows or can reasonably assume. In the coffee checkout, the "Billing address is the same as shipping address" checkbox is already checked, because that's true for most orders. The country is preset to Germany if the shop mainly ships there. The cheapest shipping option is preselected. WCAG 2.2 also requires in criterion 3.3.7 ("Redundant Entry") that information already entered isn't requested again within the same process.

There's a clear limit, though: defaults should save work, not sneak decisions past people. A pre-checked newsletter opt-in or automatically added insurance count as dark patterns. In the EU, consent given via a pre-checked box isn't legally valid either. That's why the newsletter checkbox in the coffee checkout is now unchecked.

### 10. The Right Input Types and Keyboards

On a smartphone, the field type determines which keyboard appears. Typing a postal code on the full letter keyboard is tedious. Baymard showed years ago how widespread the problem is: in its 2015 study, 54% of mobile sites didn't trigger the appropriate keyboard for phone, postal code, or credit card number fields.

The fix comes down to a few attributes:

- `type="email"` brings up a keyboard with an @ key.
- `type="tel"` opens a number pad for phone numbers.
- `inputmode="numeric"` shows digits for postal codes or card numbers.

A common mistake is using `type="number"` for postal codes. This type is meant for quantities, not for strings of digits. Depending on the browser, little arrows for counting up and down appear, and a leading zero, as in 01067 for Dresden or 02115 for Boston, can get lost. For postal codes, card numbers, and codes, a text field with `inputmode="numeric"` is the more robust choice.

Also helpful: turn off autocorrect and auto-capitalization for email addresses, because autocorrect can quickly turn a name in an address into a completely different word.

### 11. Large Touch Targets

The smaller and farther away a target is, the longer it takes to hit, and the more often people miss. This relationship is described by [Fitts’ Law](https://www.insideuxdesign.com/en/glossar/fitts-law). In forms, it mainly affects checkboxes, radio buttons, and buttons.

A few guidelines: in success criterion 2.5.8 at level AA, WCAG 2.2 requires a minimum size of 24 × 24 CSS pixels for click and tap targets, unless there's enough spacing to neighboring targets. The stricter level AAA (criterion 2.5.5) specifies 44 × 44 CSS pixels. Apple's Human Interface Guidelines also recommend at least 44 × 44 points, and Google's Material Design 48 × 48 dp. For forms on smartphones, the higher value is the better benchmark.

One simple trick enlarges the target area without taking up extra space: labels that are correctly connected to their field make the text clickable. Tapping "Billing address is the same as shipping address" checks the box, instead of having to hit the tiny square. In the coffee checkout, the shipping options are also designed as full, tappable cards, with the price and delivery time in each card. There's enough space between the cards so nobody accidentally picks express delivery.

### 12. Accessible From the Start

[Accessibility](https://www.insideuxdesign.com/en/glossar/accessibility) means a form also works when someone can't see, doesn't use a mouse, perceives colors differently, or has trouble concentrating. Some points are specifically technical, and the W3C WAI covers them in detail in its forms tutorial:

- **Connect labels in code:** Every field has a `label` whose `for` attribute points to the field's `id`. Only then does a screen reader announce "Postal code, edit text, required" on focus, instead of just "edit text."
- **Mark up groups:** Radio buttons like the shipping options sit inside a `fieldset` with a `legend`, so it's clear what "Standard" and "Express" refer to.
- **Tie hints and errors to the field:** With `aria-describedby`, the help text or error message is linked to the field and read out on focus. `aria-invalid="true"` marks the field as invalid.
- **Announce errors:** After submission, focus moves to the error summary at the top, whose entries link directly to the affected fields. Messages that appear without a page change are made audible to screen readers through a live region, for example with `role="alert"`.
- **Not just color:** A red border alone isn't enough, because not everyone perceives red the same way. Errors also get an icon and text. WCAG criterion 1.4.1 ("Use of Color") requires this as well.
- **Keyboard and contrast:** The entire form must be operable by keyboard, with a visible focus indicator. Field borders need enough contrast with the background so it's even clear where a field begins.

For many shops, this is now a legal issue as well. Since June 28, 2025, Germany's Accessibility Strengthening Act (Barrierefreiheitsstärkungsgesetz) has been in effect, covering, among other things, online retail aimed at consumers. An accessible checkout is no longer just good practice.

The best way to check is hands-on: fill out the form once using only the keyboard and once with a screen reader turned on. Afterward, you'll know more than any checklist can tell you.

## Conclusion

In the end, instead of one long page with 19 fields in two columns, the coffee checkout has three clearly named steps. The address now consists of eight fields, only one of which is optional. Labels stay visible, errors appear at the right moment and explain what to do, browsers fill in the address automatically, and the final button says unmistakably "Place order and pay."

None of these changes is spectacular. Together, though, they make the difference between a form that slows people down and one they barely notice. And that's exactly the goal: a good form doesn't stand out, it just gets done quickly. Whether that worked is ultimately shown by a quick test with real people, not by your own judgment.

## Checklist

- Every field has a clear purpose; everything else is cut or moved to a later, optional step.
- The layout is single-column, fields are logically ordered and grouped under headings.
- Long forms are split into steps, with a progress indicator and the ability to go back without losing data.
- Every field has a visible, persistent label; format hints sit outside the field.
- Required and optional fields are both clearly marked.
- The primary button describes the action, and in a shop it signals the obligation to pay.
- Validation runs when a field is left, and errors disappear as soon as they're fixed.
- Error messages sit at the field and say what's wrong and how to fix it.
- Fields use the right `autocomplete` values, and defaults help without being pushy.
- Input types open the right keyboard on smartphones.
- Touch targets are large enough and have sufficient spacing.
- Labels are connected in code, errors are announced, and they aren't conveyed by color alone.

## Sources

- [Baymard Institute: Cart Abandonment Rate Statistics](https://baymard.com/lists/cart-abandonment-rate)
- [Baymard Institute: E-Commerce Checkouts Need to Mark Both Required Fields and Optional Fields Explicitly](https://baymard.com/blog/required-optional-form-fields)
- [Nielsen Norman Group: 10 Design Guidelines for Reporting Errors in Forms](https://www.nngroup.com/articles/errors-forms-design-guidelines/)
- [W3C Web Accessibility Initiative: Forms Tutorial](https://www.w3.org/WAI/tutorials/forms/)