When a user opens a form, they have already decided something: whether it's to request a quote, sign up for a list, or complete a purchase.
That step shouldn't make them change their mind, but just one extra field, a confusing error message, or a button that doesn't explain why it's blocked, is enough for them to abandon the session.
A form that follows good UX practices ensures that almost 8 out of 10 people complete it correctly the first time; one that doesn't, only 4 out of 10. The difference is not in what is asked, but in how it is asked.
In this article, we review the cost of a poorly designed form, what changes when good UX practices are applied, and the most common mistakes to avoid before launching it.
How much your business loses due to a poorly designed form
Not all forms lose the same amount when they fail. A contact form loses leads, a purchase form loses sales, a subscription form loses database entries, and the impact can vary greatly depending on the type.
On average, a contact form is completed in just over a third of attempts (37.9%), a purchase form in just over half (58.2%), and a quote or demo request form in almost three-quarters (74.5%).
Imagine it in your own funnel: out of every 100 people who reach checkout, how many complete the purchase? The difference between that figure and 100% is no mystery; these are sales that were almost closed and fell by the wayside. Multiply that by your average ticket value, and you'll see that the problem has a very specific price on your bottom line.
In B2B, the situation changes, but the question is the same: out of every 100 companies that start filling out your quote request form, how many actually submit it? Here, we're not talking about €50 tickets, but leads that can be worth thousands of euros each, so losing just a few along the way has a direct impact on the sales pipeline.
That's why it's worth reviewing every form decision:
- Is that field essential to process the order?
- Does the error message say what to do, not just that something went wrong? Does the card form convey enough trust to enter a 16-digit number?
- Are you asking for an exact quote before they trust you?
- Are you forcing them to leave a phone number when they'd prefer to start with email?
- Is it clear what happens after submitting the form, or does it disappear into a void without confirmation?
Why forms are abandoned: security, length, and unnecessary questions
The most cited reason for abandonment is not price or product, but distrust regarding sensitive data: almost 3 out of 10 people abandon due to security concerns. This is followed by form length, accounting for just over 1 in 4, and finally, questions that don't seem related to what the user wants to do, at 1 in 10.
Key aspects for a good form
Visible labels and logical grouping of fields
The label indicates what information goes in each field and should always be placed above it, and never replaced by a placeholder (example text) that disappears as soon as the user starts typing.
Grouping related fields (address, payment, contact) into visual blocks reduces the perception of a long form even if it has the same number of fields, based on Gestalt principles of visual grouping.
Fewer fields, less friction, and more conversion
The average checkout can display almost twice as many fields as are actually needed to complete an order. In any active form you have, it's worth asking first if the absence of any of the fields would prevent processing the information or delivering the order.
Validate at the right moment, not too early
Ideal validation occurs when the user finishes filling out the field, not while they are still typing. Validating too early is frustrating: if the email field shows an error as soon as the first few letters are typed, it signals a failure before the user has finished typing. Done at the right time, this type of validation reduces errors by up to 22% and significantly speeds up completion time.
Make progress visible in long or multi-step forms
When a form exceeds 8 or 10 fields, dividing it into steps with a clear indicator, such as "Step 2 of 4," helps the user know how much is left and prevents them from abandoning it halfway. Dividing into steps doesn't improve conversion on its own: in a short form, it can add unnecessary friction, but in a long form or one with multiple decisions, it helps make it more manageable.
Single-column form
A single-column form is completed, on average, 15 seconds faster than a multi-column form, because the user doesn't have to visually reorient themselves between fields. On desktop, short and related fields, such as city and zip code, can be placed on the same line without breaking the reading order.
Tip: connect and measure your form well
Although this article focuses on user experience, a well-designed form is useless if the data doesn't go anywhere, or if it's not being measured correctly.
Remember: design and data should always coexist. Before publishing, it's advisable to review these four points:
Form types by structure
Single-screen vs. multi-step forms
A single-screen form works best when the purchase or registration is simple and there aren't too many fields to fill out: the user sees everything at a glance and completes the process without interruptions.
A multi-step form, on the other hand, makes sense when there are several decisions or distinct blocks of information (personal data, shipping, payment): dividing it reduces the feeling of a long form, although it adds visual friction that is only justified if the content requires it.
Specific vs. generic error messages
A specific error message identifies exactly what is missing or wrong, instead of just pointing out that something failed. If the problem has an alternative solution, such as data that already exists in the system, offer that directly (instead of just rejecting the complete data) to resolve it with concrete instructions, and prevent form abandonment.
Clear progress indicator
In long or multi-step forms, showing the user's current position ("Step 2 of 4") helps minimize abandonment halfway through. The format can vary (number of steps, percentage, visual bar), but the function is always the same: to let the user know how much is left before they start to get impatient.
Watch out: it's not advisable to go beyond four steps. After that, each extra screen reduces the likelihood of the user completing the form.
Errors that significantly increase abandonment in any form (and how to reduce them on your website)
Asking for unnecessary information before completing the action
Each additional field increases the effort required to finish. Before keeping it, it's worth asking if its absence would prevent processing the action: a second phone number, a date of birth unrelated to the purchase, or a question about commercial preferences can usually be postponed to another stage, made optional, or removed altogether.
Unclear error messages
A message like "incorrect data" warns that there's a problem but doesn't help solve it. The customer has to guess which field failed and what format is expected, when the message should identify the problem and indicate how to correct it, always located next to the corresponding field.
Disabled buttons without explanation
A locked button without any indication leaves the user wondering what needs to be completed. Keeping the button always active and, when trying to proceed, pointing out the pending fields is clearer than leaving a gray button without context.
A button that erases everything the user has typed
"Reset" or "clear form" buttons don't solve any real user problem and introduce the risk of someone losing their work due to an accidental click. If the form collects sensitive data and the user deliberately wants to abandon, a cancel button is sufficient, always with much less visual prominence than the submit button.
Form not accessible or navigable by keyboard
The form should be completable without using a mouse, with a logical tab order and each field correctly associated with its label. Errors should also be announced to screen readers and linked to the corresponding field, not just indicated by color.
Checklist to reduce abandonment in your forms
Ask yourself these key questions before publishing any form on your website:
- Is each field essential to complete the action, or can it be removed, postponed, or marked as optional?
- Do the labels remain visible at all times while the user fills in and reviews their data?
- Do errors appear next to the affected field and explain how to correct them?
- Has the form been tested on a physical mobile device, with autofill and the appropriate keyboard for each type of data?
- Can it be completed entirely with a keyboard and maintain a logical focus order?
- Is progress clear when the form is divided into several steps?
- Is it measured in which fields most errors or abandonments occur to prioritize improvements?
Remember: none of this requires a complete website redesign. Most of the time, it's enough to review the form field by field: what is being asked, when an error appears, and how long it takes the user to reach the end.
If you don't know where to start, at Línea Gráfica we audit your website to tell you exactly what is hindering your conversions.
Sources
FormStory — Form Abandonment Statistics: https://formstory.io/learn/form-abandonment-statistics/
FinancesOnline — 109 Online Form Abandonment Statistics: https://financesonline.com/form-abandonment-statistics/
Nielsen Norman Group — Website Forms Usability: Top 10 Recommendations: https://www.nngroup.com/articles/web-form-design/
Feathery — 150 Online Form Statistics: https://www.feathery.io/blog/online-form-statistics
Marketing4ecommerce — The 5 best checkouts in Spanish eCommerce: https://marketing4ecommerce.net/formularios-de-checkout-y-registro-de-5-grandes-ecommerces/
uiFromMars — Form design: why 67% abandon them (and how to avoid it): https://uifrommars.com/diseno-formularios-reducir-abandono/
CXL — Form Design Principles: 13 Empirically Backed Best Practices: https://cxl.com/blog/form-design-best-practices/
WPForms — 101 Unbelievable Online Form Statistics & Facts: https://wpforms.com/online-form-statistics-facts/
Stripe — One-page vs. multi-step checkout: https://stripe.com/mx/resources/more/one-page-checkout-vs-multistep-checkout
Shopify — One-page checkout: https://www.shopify.com/es/blog/pago-en-una-pagina
