Make your website forms easier to fill in with autofill

Can customers fill in your website form without typing the same details again? Autofill can help with familiar information such as a name, email address and postcode. A useful form tells the browser what each field means, then lets the customer check and change the result.

This is a practical check for a small-business enquiry or order form. You do not need to rebuild the whole page: start with the fields people use most often.

What website form autofill does

Browsers can offer saved information when someone completes a form. The HTML autocomplete attribute gives the browser a hint about the information a field expects. It does not guarantee that a suggestion will appear: the result also depends on the browser and the customer’s settings and saved details.

There is an accessibility reason to identify fields properly, too. W3C explains that a machine-readable field purpose can help people with cognitive disabilities, including people who find it difficult to remember or enter information. A visible label still matters. Autofill is an extra aid, not a replacement for a clear question. See W3C’s explanation of identifying input purpose.

Start with one common customer task

Choose a real task, such as asking for a quote or entering a delivery address. List the fields it requires. If you cannot explain why you need a field, review whether it belongs in the form at all.

For example, an initial enquiry may need a name, a reply address and a short message. It may not need a full postal address. Keep the check focused on what your business actually needs at that stage.

Give your web designer a short field checklist

Ask whoever maintains your form to check that its visible labels and underlying field purposes agree. Common examples include:

• Full name: autocomplete="name".
• Email address: autocomplete="email", alongside a suitable email input type.
• Telephone number: autocomplete="tel", when the form needs the customer’s number.
• Postcode: autocomplete="postal-code".

If a checkout asks for both billing and delivery details, the code can distinguish them with values such as billing postal-code and shipping postal-code. Do not assume that two postcode boxes should receive the same address. The MDN autocomplete reference explains the supported values and grouping.

These examples concern information about the person completing the form. A form collecting someone else’s details needs more care; do not label every email or address box as if it belongs to the visitor.

Test suggestions and manual entry

1. Use a test browser profile with safe test details. Open the public form on a phone and on a computer.
2. Select a name, email or address field. If a saved suggestion appears, select it and check every field it fills.
3. Change one value manually. Check that the form keeps the correction when you move to the next field.
4. Repeat without using suggestions. Labels and instructions should remain clear, and manual entry should still work.
5. On an authorised test form, check the submitted result. For a live shop, use its agreed test process so that you do not place an unintended order or trigger a payment.

Record the browser, device, field and exact problem. “The billing postcode appeared in the delivery box” gives your designer a clearer starting point than “autofill is broken”. If no suggestion appears, check the browser setup before concluding that the website is at fault.

Check what happens when a value is wrong

Saved details can be old. A customer must be able to correct an address or email before submitting the form. Test a missing required field and check that the page explains the problem without losing the other entries. Our guide to testing a website contact form from start to finish covers the wider enquiry journey.

A successful autofill test is useful evidence about that task. It is not a complete accessibility audit, and it does not prove that every browser will behave in the same way.

Make one useful improvement first

Start with the form customers use most. Check its labels, field purposes and correction process, then repeat the same task after any change. Keep a short note of the result so the next website review has a clear starting point.

Need help explaining a form problem? Contact Hobbit Web Design with the page address, device and steps that caused it. Use test details rather than sending a customer’s personal information.