Using autofill for forms
Last updated:
Autofill saves your users time when completing forms. Learn how to optimally use and configure this browser feature in Formcentric.
What is autofill?
Autofill is a practical browser feature that saves you time when completing online forms. The browser remembers data that you have already entered into similar fields and automatically suggests these values for new forms.
Example: If you have entered your name into a form once before, the browser will automatically suggest this name for future forms with a "First name" field.
How does autofill work in Formcentric?
In Formcentric, you can control which browser suggestions go into which fields when creating a form. This ensures more suitable suggestions and a better user experience.
Available form fields
The function is activated by default for the following form fields:
Configuring autofill
To make sure the browser offers the right autofill suggestions, you need to assign the correct usage to each form field. The following steps show you how to set this up in the form editor.
Step 1: Select a form field
- In the form tree, click the form element you want to configure.
- Scroll to the Autofill section.
Step 2: Configure the settings
You can tell the browser three key pieces of information:
Shipping or invoice address
Specify whether the field belongs to a shipping or a billing address:
- Choose Shipping for delivery addresses.
- Choose Invoice for invoice addresses.
Contact type
Specify what kind of contact data is expected:
- Phone number
- Mobile phone number
- Fax number
- Pager number
- Email address
Usage
Specify exactly what information belongs in the field. Formcentric distinguishes between two categories based on a standardized browser schema:
- Address lines hold the actual street address. Address: Line 1 is typically used for the street name and house number, while additional lines can be used for details like apartment number, building, or floor.
- Address levels describe geographic or administrative divisions. Address: Level 1 corresponds to the state or region, and Address: Level 2 corresponds to the city or town.
A common mistake is configuring the city as an additional address line. This doesn't work, since browsers treat city and street as separate data categories.
Example: Recommended configuration for an address form
| Form field | Recommended usage |
| First name | First name |
| Last name | Family name |
| Street / house number | Address: Line 1 |
| Address line 2 (optional) | Address: Line 2 |
| City | Address: Level 2 |
| State | Address: Level 1 |
| ZIP / postal code | Postcode |
| Country | Country name |
| Phone | Phone |
| Email address |
For more details on the underlying autocomplete attribute, see the
MDN documentation
.
Disabling autofill
For sensitive data, you can specifically disable the function:
- Select the corresponding form field.
- Move the Autofill slider control to the left.
When should you disable autofill?
- For sensitive input (e.g. social security number).
- When the browser should not store data.
- For one-time, non-reusable input.
Benefits for your users
- Faster completion - Known data is automatically suggested.
- Fewer typing errors - Stored data is usually correct.
- Better user experience - Forms become easier and more pleasant.
- Higher conversion rate - Users abandon forms less frequently.
