Form design: best practices for conversion

Updated on October 19, 2026

Your form is short. The questions are relevant. Traffic is flowing in. And yet, on mobile, a significant portion of visitors stop at the second field. The problem is often neither the offer nor the number of questions: it's the form's design. An alphabetical keyboard that opens to a postal code field, a label that disappears as soon as you type, a light gray button that's barely visible. This guide compiles best practices for form design that have a measurable impact on conversion, along with the precise code or settings to apply.

In short: a form design that converts follows five best practices: a single column with visible labels above the fields, a mobile keyboard adapted to each data type, short steps with visible progress, sufficient contrast (4.5:1 for text, 3:1 for field borders), and a button that clearly indicates the user's outcome. These settings are inexpensive to implement and eliminate the friction that leads to abandonment on mobile devices.

One clarification before we get into the details: this article doesn't deal with the length of your forms, but with their format. And at the end, you'll find a 12-point audit checklist to verify your own form in ten minutes flat.

Layout: one column, labels above the fields

The most effective layout for a lead generation form is a single column, with each label placed above its corresponding field. The eye follows a straight line, without having to zigzag between columns or search for which label corresponds to which field.

The figures support this. In a controlled study conducted by the CXL Institute (now Speero) with 702 participants, the single-column version was completed in an average of 102.3 seconds, compared to 117.8 seconds for the multi-column version. This represents a time saving of approximately 13%, with the questions being strictly identical.

One important distinction: this study only measured the time taken by those who completed the form. It says nothing about those who dropped out. But a form that's quicker to read is rarely one that discourages people.

Placeholder, floating label or fixed label?

A fixed label, always visible above the field, remains the safest choice. The example text placed inside the field (the placeholder) disappears as soon as the first keystroke is entered: the user reviewing their input no longer knows what was being asked.

Floating labels, popularized by Material Design, only solve part of the problem. The label shrinks to fit the field, a long heading ends up truncated, and the contrast of the reduced text is often too low. Reserve the placeholder for a formatting example ("06 12 34 56 78"), never as the sole label.

Two exceptions are tolerated

The single-column rule allows for exceptions when two fields represent a single concept: postal code and city, or expiration date and security code. Placing them side-by-side on a computer remains readable, provided they are displayed one below the other on a mobile device.

Mobile: Display the correct keyboard for each field

Each field should trigger the keyboard corresponding to the expected data: a numeric keypad for a postal code, a telephone keypad for a phone number, and a keyboard with the "@" symbol for an email address. This HTML code detail prevents the user from having to manually switch between keyboards for each field.

This detail is often poorly implemented, even at large sites. The Baymard Institute's audit of touch keyboards showed that 54% of major US e-commerce sites did not display the optimized keyboard for the phone number, postal code, or credit card fields, 79% left autocorrect enabled, which corrupts the input. An email address "corrected" by the phone number is a lost lead.

Here are the settings to apply to the most frequently used fields in a French lead form:

Avoid type='number' for a postal code or a SIRET number: it adds unnecessary increment arrows on a computer and can remove the initial zero from a postal code like 01000.

The iPhone zoom trap

On iOS, Safari automatically zooms in on fields with text smaller than 16 pixels. The page shifts, the button goes off-screen, and the user has to zoom out manually. Set the font size for fields to a minimum of 16 pixels: the problem disappears.

Also consider touch targets. A 16px radio button is difficult to touch with the thumb; aim for clickable areas of at least 44 × 44px, making the entire line of the option clickable, not just the dot.

Autofocus and autocomplete: helping without forcing anything

Browser autocomplete saves precious seconds; autofocus, on the other hand, is more often a hindrance than a help. These are two similar settings with opposite effects.

The attribute autocomplete lets the browser fill in name, email, phone and address in one tap. On a six-field quote form, this can cut typing down to two or three taps. Conversely, turning autocomplete off “for security” on a contact form penalizes the user without protecting anything.

Autofocus, which automatically places the cursor in the first field upon loading, presents several problems. British designer Adam Silver identifies five: unexpected page breaks, blocked keyboard scrolling, inaccessible browser shortcuts, a screen reader announcing the field label instead of the page title, and on Android, a field activated without the keyboard opening.

Our recommendation is simple. Do not autofocus on a page that contains anything other than the form (introductory text, arguments, customer reviews). On a multi-step form, however, moving the focus to the title of the next step is useful: the person navigating by keyboard or with a screen reader immediately knows where they are.

Break it down into steps without losing the reader

A multi-step form converts better when each screen asks only one or two questions, progress is visible, and the first question requires minimal effort. Breaking down the form isn't a magic bullet: poorly designed, it adds clicks without reducing the workload.

Three design rules make all the difference:

• Start with an easy and engaging question : the type of project or need is presented as large, clickable cards. Contact details are added last, after the user has already invested some time.
• Show honest progress : “Step 2 of 4” is better than a bar that moves quickly at the beginning and then stagnates.
• Automatically proceed to the next screen after a single choice (radio button), but never after text entry, where the user must retain control.

To delve deeper into this format, our annotated examples of multi-step quote forms show the order of questions that works according to the sectors. And to display only the questions relevant to each profile, the conditional logic avoids showing a "Number of employees" field to an individual.

This partitioning can be done without a developer in the features page of Blastform : steps, visual maps, progress bar and display conditions are configured from the editor.

Colors, contrast and accessibility

An accessible form is also a form that converts better: the text must offer a contrast of at least 4.5:1 with its background, and field borders at least 3:1, according to WCAG criteria 1.4.3 and 1.4.11. This second criterion is most often overlooked.

Recent graphic design trends favor very light gray fields on a white background, with no visible border. As a result, on a phone screen in bright sunlight, the user can no longer distinguish where to click. A gray border like #767676 on a white background passes the test; the very common #E0E0E0 falls far short.

Three other reflexes to adopt:

• Never indicate an error by color alone. A red border is not enough for the approximately 8% of men affected by color vision deficiency: add an icon and a text message.
• Link each label to its field (tag label with the attribute for): Clicking on the label activates the field, and the screen reader reads the correct question.
• Keep a focus indicator visible. Removing the default blue outline without replacing it renders the form unusable with a keyboard.

The issue is no longer just a matter of convenience. Since June 28, 2025, the European Accessibility Act has imposed accessibility requirements on many public online services in the European Union, including e-commerce and banking services. A compliant form saves you from having to redo it later.

From a visual identity standpoint, aligning the form's colors and typography with those of your website builds trust: a form that looks like a generic third-party widget makes users hesitate. We discuss this aspect in more detail in our article on customizing a form without coding.

Microcopy and error messages

Microcopy refers to the small text surrounding the fields: labels, help text, error messages. Well-written, it addresses the objection before it blocks the user. Poorly written, it turns a simple typo into an abandonment.

Mark the optional fields, not the required ones

The red asterisk is an inherited reflex, but many users don't notice it or understand its meaning. The practice recommended by several UX specialists is the opposite: assume everything is mandatory and add "(optional)" only to the fields that aren't. If you have many optional fields, consider their usefulness.

Validate at the right time

According to the Baymard Institute, 31% of the sites tested have no online validation of the fields, and some users who have one trigger it too early. Displaying "invalid email address" when the person has only typed three letters creates frustration. The right time: when the user leaves the field. And as soon as they correct it, the error message should disappear as they type, without waiting for them to move to another field.

Writing down mistakes that help

Compare "Invalid format" and "The number must contain 10 digits, for example 06 12 34 56 78". The second one tells you what to do. Place the message directly below the affected field, never only at the top of the form, and keep all entries already made after an error.

Reassuring where there is a problem

The phone number field is a classic pain point in a lead generation form. A helpful line placed directly below it ("Only to call you back about your quote") addresses the concern the moment it appears. This is more effective than a generic footer that no one reads.

The send button: the last meter

The button should clearly state what the user receives, not the technical action they perform. "Receive my quote" converts better than "Send," because it reinforces the promise at the point of final action.

Unbounce reports several cases where a single word changed the result. On a B2B office rental portal, replacing "Order" with "Get" on the button increased conversions by 38% : the verb was finally talking about what one receives rather than what one must do.

In terms of design, four settings are important:

• Full width on mobile, so that the thumb can reach it without aiming.
• A color that contrasts with the rest of the page. The "best color" does not exist: it is the contrast with its environment that counts, not red or green per se.
• Never disabled or greyed out as long as the form is incomplete, the user doesn't understand what's missing. Let them click and indicate the fields to complete.
• A loading state after the click (“Sending in progress…”) to avoid double submissions and duplicate leads in your CRM.

These design optimizations are in addition to those focused on acquisition cost. If your primary concern is budget, our article on the decrease in cost per lead thanks to form conversion links these settings to your campaigns.

Best practices for form design: the audit grid in 10 minutes

Here's the grid promised at the beginning of the article. Take your phone, open the form in private browsing mode, and check each box. Each "no" represents a point of friction you can eliminate this week.

1. The form fits in one column on mobile.
2. Each field has a label visible above it, which remains displayed during data entry.
3. The email field opens a keyboard with "@" and does not use capital letters.
4. The phone number and postal code fields open a keypad.
5. The page does not zoom when you touch a field (minimum font size 16px).
6. The browser offers to automatically fill in name, email and phone number.
7. No field automatically receives focus when the page loads.
8. On a multi-step form, the progress is displayed ("Step X of Y").
9. The edges of the fields remain visible in maximum light, outdoors.
10. A deliberate error (email without @) displays a clear message below the field, not just a red border.
11. The button describes the benefit (“Receive…”, “Get…”) and occupies the entire width.
12. After clicking, a loading status and then a clear confirmation are displayed.

A score of 10 out of 12 or higher means your design is probably not your main obstacle. Below 8, start with points 3, 4, and 5: these are the quickest to fix and they all affect your mobile visitors.

To start from a base that already ticks most of these boxes, browse our ready-to-use B2B form templates, or see how other teams have done it in our case study on increasing the conversion rate.

Frequently Asked Questions

Can we replace the labels with the example text in the fields?

No. The example text (placeholder) disappears as soon as the first keystroke is made, preventing the user from checking what they have entered, and its light gray color often provides insufficient contrast. Keep a visible label above the field and reserve the placeholder for a formatting example.

Is a two-column form really less efficient?

In most cases, yes. A CXL study of 702 participants measured a 13% faster completion rate for single-column fields. The only reasonable exceptions are related field pairs, such as postal code and city, and only on computers.

Should autofocus be activated on the first field?

Not on a page containing anything other than the form. Autofocus causes the page to jump around, blocks keyboard scrolling, and confuses screen readers. It's only useful for focusing on the title of the new step in a multi-step form.

What is the best color for a form button?

There's no universal rule. What matters is the contrast of the button with the rest of the page and the readability of its text (at least 4.5:1). An orange button on an orange website is less noticeable than a blue button on the same website.

Does a multi-step form always convert better?

No, only if it's well-designed: one or two questions per screen, an easy first question, visible progress, and the contact details last. A three-field form has no reason to be split.

Do you want to apply these best practices without touching the code? Try Blastform for free or book a demo to review your current form with our team.