Form autofill: the conversions you're leaving on the keyboard

Typing is the most expensive part of a form, especially on mobile: entering an email address without a typo on a phone keyboard takes more effort and time than everything else in the visit. Browsers, however, have known for years how to fill those fields in one tap, from data the user has already saved. When it doesn't work — the email field suggesting nothing, the numeric keypad not appearing for the phone number — it's almost never the browser: it's the form that's badly marked up. The good news: this is a one-hour fix that requires no redesign. It directly complements the fundamentals of our landing page form guide.

The autocomplete attribute: telling the browser what each field holds

The HTML standard defines the autocomplete attribute, which explicitly tells the browser the nature of each field: autocomplete="given-name" for the first name, family-name for the last name, email, tel, organization for the company, street-address, postal-code, address-level2 for the city. Correctly set, it lets the browser offer to fill the whole form in a single tap. Without it, the browser guesses from the field's name — and gets it wrong as soon as your fields are called input_23 or your-mail. The rule is simple: every contact field on your landing page should carry its standard autocomplete attribute. It's also one of the accessibility criteria we cover in our article on landing page accessibility.

The right mobile keyboard for each field

Second fix, complementary: the field type and the inputmode attribute determine which keyboard appears on mobile. A type="email" puts the @ within direct reach; a type="tel" opens the numeric keypad; an inputmode="numeric" suits the postal code. Every mismatched keyboard adds back-and-forth between input modes, therefore typos, therefore error messages — all on the device where most of your paid traffic lives. The trio of correct type + inputmode + autocomplete is the technical foundation of every form field; the rest (field count, visible labels, real-time validation) is design.

Address autocompletion: the free API French sites underuse

For forms that ask for an address — home service quotes, property valuation, delivery — assisted input changes the game: the user types three words, picks their address from a list, and the form fills street, postal code, and city in one go, with no typos. The best-known solution is the Google Places API (paid beyond a quota); for French addresses, the Base Adresse Nationale's Adresse API (adresse.data.gouv.fr) provides the same service for free, without an API key, with excellent national coverage. For a property valuation or local trades landing page, it's probably the best effort-to-impact ratio in the whole form: one smart field replaces four fields to type.

What research says about input effort

Form design is one of the few web topics with a solid scientific literature. Javier Bargas-Avila and colleagues at the University of Basel synthesized in 2010 twenty research-based guidelines for web form design (Bargas-Avila et al., 2010), including reducing input effort and leveraging browser mechanisms. Four years later, Mirjam Seckler and the same team empirically tested those guidelines in a controlled study published at the CHI conference (Seckler et al., 2014): guideline-compliant forms were completed significantly faster, with fewer errors and higher satisfaction — with the gap widening precisely on the longest forms, where input assistance has the most to work with. In other words: autofill isn't a comfort gadget, it's one of the documented levers against form abandonment.

The mistakes that break autofill

• autocomplete="off" set “for security” on the whole form — outside very specific cases (sensitive data, back-office tools), it's pure friction inflicted on every visitor.
• Exotically split fields (phone number in three boxes, address scattered across five unlabeled fields) that autofill can't target.
• A JavaScript-rebuilt form that doesn't fire standard events: the browser fills the fields, but your code never “sees” the values — always test submission after an autofill.
• Validation that rejects auto-filled values (spaces in the phone number, capitals in the email) instead of silently normalizing them.
• Hidden fields that get filled without the user's knowledge — beyond being unfair, several browsers penalize such forms.

A concrete example with LanderKit templates

The forms in the 10 LanderKit templates apply this foundation: correct field types, standard autocomplete attributes, adapted mobile keyboards. The Real Estate template (demo) illustrates the two-step address form, directly compatible with Base Adresse Nationale autocompletion, and the Local Agency template (demo) the local quote case. €89 each, €229 for the full pack.