Wist je dat je je formulieren niet alleen gebruiksvriendelijker kunt maken, maar ook conversie kunt verhogen met iets simpels als “autocomplete”? Bij e-mailvelden is dit een slimme zet. In deze blog lees je wat “autocomplete” precies doet, waarom het belangrijk is, en hoe je het correct toepast in je e-mailformulieren.

Wat is “autocomplete”?
De `autocomplete`-attribuut in HTML laat de browser weten welk type gegevens er verwacht worden in een invoerveld. Hierdoor kan de browser eerder ingevulde gegevens automatisch voorstellen aan de gebruiker, zoals een e-mailadres, naam of telefoonnummer.

Waarom “autocomplet” gebruiken?

– Gebruiksgemak: De gebruiker hoeft minder te typen
– Minder fouten: Voorgestelde gegevens zijn vaak correct gespeld
– Hogere conversie: Hoe makkelijker het formulier, hoe groter de kans dat het wordt ingevuld
– Toegankelijkheid: Ook mensen met motorische beperkingen hebben hier baat bij

Het juiste attribuut voor e-mailvelden

Gebruik `autocomplete=”email”` om aan te geven dat een veld bedoeld is voor een e-mailadres. Voorbeeld:

<input type=”email” name=”email” autocomplete=”email” placeholder=”jouw@email.nl” required>

In, bijvoorbeeld, Contact Form 7 gebruik je:
[email* jouw-email autocomplete:email placeholder “jouw@email.nl”]

Veelgemaakte fouten

– Geen `autocomplete` gebruiken
– Verkeerde waarde zoals `on` of `true`
– Verkeerd type invoerveld zoals `type=”text”` in plaats van `email`

Volledige lijst van `autocomplete`-waarden

Persoonsgegevens:
– name – volledige naam
– given-name – voornaam
– family-name – achternaam
– email – e-mailadres
– tel – telefoonnummer
– bday / bday-day / bday-month / bday-year – geboortedatum
– sex – geslacht
– username – gebruikersnaam
– new-password / current-password – wachtwoorden

Adresgegevens:
– address-line1 – straat + huisnummer
– address-line2 – extra adresregel
– postal-code – postcode
– address-level2 – stad
– address-level1 – provincie
– country – land

Bedrijfsgegevens:
– organization – bedrijfsnaam
– organization-title – functietitel

Betaalgegevens:
– cc-name – naam kaarthouder
– cc-number – creditcardnummer
– cc-exp / cc-exp-month / cc-exp-year – vervaldatum
– cc-csc – beveiligingscode (CVC)
– cc-type – kaarttype

Conclusie:

Het correct gebruiken van `autocomplete` zorgt voor soepelere formulieren, minder fouten en hogere conversies. Vergeet dus niet dit simpele maar krachtige hulpmiddel in te zetten — je bezoekers (en je resultaten) zullen je dankbaar zijn.

Tip: Test je formulier op zowel desktop als mobiel. Sommige browsers gedragen zich anders bij autocomplete.