Een bezoeker komt bij je formulier. Het eerste veld vraagt om hun e-mailadres. Maar je site heeft hun e-mailadres al van een eerdere aanmelding. Ze moeten het opnieuw typen. Een tweede bezoeker komt langs en het formulier vraagt om hun land. Je analytics weten al waar ze zitten. Waarom dan vragen?
Vooraf ingevulde formulieren zijn sneller klaar. Bezoekers hoeven geen informatie opnieuw in te voeren die jij al hebt. In dit artikel lees je hoe je formulieren vooraf invult en welke gegevensbronnen je kunt gebruiken.
Waarom vooraf ingevulde formulieren belangrijk zijn
Elk veld dat een bezoeker moet invullen, verlaagt het aantal ingevulde formulieren. Kun je 50% van de velden automatisch invullen, dan voelt het formulier korter. De bezoeker is er minder tijd aan kwijt. Minder velden betekent minder kans op fouten.
Onderzoek laat zien dat vooraf ingevulde formulieren 20 tot 30% vaker worden afgerond dan lege formulieren. Het verschil is echt.
Vooraf invullen uit URL-parameters
De eenvoudigste manier om vooraf in te vullen is gegevens meegeven in de URL, met wemasy.nl/contact?email=user@example.com&name=John. Zodra de pagina laadt, haalt JavaScript de parameters eruit en vult het formulier met const params = new URLSearchParams(window.location.search); document.getElementById('email').value = params.get('email'); document.getElementById('name').value = params.get('name');. Dit werkt als je vanaf een andere pagina naar een formulier linkt, bijvoorbeeld wanneer een e-mailcampagne linkt naar een contactformulier met het e-mailadres van de ontvanger al ingevuld, of een landingspagina linkt naar een aanmeldformulier met de campagne waar de bezoeker vandaan komt al ingevuld.
Wees voorzichtig met gevoelige gegevens. Geef geen wachtwoorden of creditcardnummers mee in URL's. Geef alleen niet-gevoelige gegevens mee, zoals e-mailadres en naam.
Vooraf invullen uit gebruikerssessies
Is de gebruiker ingelogd, dan weet je wie het is en kun je e-mailadres, naam, adres en andere gegevens uit hun account vooraf invullen. Gebruik op de server, voordat je het formulier toont, const user = getUserFromSession(); const form = { email: user.email, name: user.name, address: user.address };. Zet dan in de HTML-sjabloon <input type="text" name="name" value="<%= form.name %>">. Of gebruik in JavaScript nadat de pagina is geladen _blocked_('/api/user').then(res => res.json()).then(user => { document.getElementById('email').value = user.email; document.getElementById('name').value = user.name; });. Deze aanpak vereist dat de gebruiker is ingelogd. Gebruik voor openbare formulieren URL-parameters of externe gegevens.
Vooraf invullen uit browsergegevens
De browser slaat gegevens op die je op twee manieren kunt gebruiken. Ten eerste kun je met localStorage gegevens in de browser opslaan en later ophalen met localStorage.setItem('email', 'user@example.com'); const email = localStorage.getItem('email');. Dit blijft bewaard over paginaladingen en browsersessies heen, handig om de voortgang van een formulier te bewaren of het e-mailadres van een eerder bezoek te onthouden. Ten tweede onthouden moderne browsers formuliergegevens die de gebruiker eerder heeft getypt. Stel autocomplete-attributen in en het automatisch invullen van de browser springt aan met <input type="email" name="email" autocomplete="email"> en <input type="text" name="name" autocomplete="name">. De browser toont suggesties en vult het veld in zonder dat je code nodig hebt. Automatisch aanvullen helpt vooral op mobiel, waar typen traag gaat.
Vooraf invullen uit locatiegegevens
Je kunt de ongeveer locatie van de gebruiker bepalen en het land of de staat vooraf invullen met _blocked_('https://ipapi.co/json/').then(res => res.json()).then(data => { document.getElementById('country').value = data.country; document.getElementById('state').value = data.region; });. Dit gebruikt hun IP-adres om de locatie te schatten. Het is niet helemaal nauwkeurig (vooral bij VPN-gebruikers), maar in de meeste gevallen goed genoeg. Geef de gebruiker altijd de mogelijkheid om het aan te passen.
Vooraf invullen uit externe gegevensdiensten
Diensten voor gegevensverrijking kunnen bedrijfs- en persoonsgegevens opzoeken op basis van een e-mailadres. Typt de gebruiker een e-mailadres in, dan stuurt JavaScript het naar zo'n dienst, die antwoordt met bedrijfsgegevens, functietitel en locatie, en het formulier vult zich met die gegevens. Hiervoor heb je een API-sleutel en koppelingscode nodig, dus het is ingewikkelder, maar heel krachtig voor B2B-formulieren.
Verborgen velden vooraf invullen
Verborgen velden bevatten gegevens die de gebruiker niet ziet, maar die jouw backend nodig heeft.
<input type="hidden" name="source" value="email_campaign">
<input type="hidden" name="campaign_id" value="summer_2026">
Deze worden op de server vooraf ingevuld voordat het formulier wordt getoond. Gebruik ze om bij te houden waar de inzending vandaan kwam of welke campagne ertoe leidde.
Formulieren met meerdere stappen vooraf invullen
Vul bij formulieren met meerdere stappen stap 2 vooraf in met gegevens uit stap 1, zodat de gebruiker niet opnieuw hoeft in te voeren wat al is getypt. Sla de gegevens na het versturen van stap 1 op in de sessie of in localStorage. Haal ze op en vul ze vooraf in zodra stap 2 laadt, met const step1Data = JSON.parse(localStorage.getItem('formStep1')); if (step1Data) { document.getElementById('email').value = step1Data.email; }.
Privacy en toestemming
Vooraf invullen is handig, maar roept privacyvragen op. Iemands e-mailadres tonen zonder toestemming voelt opdringerig.
Vul alleen gegevens vooraf in waarvoor je toestemming hebt. Is de gebruiker ingelogd, dan heb je toestemming. Kwamen de gegevens uit een e-mailcampagne waarop ze hebben geklikt, dan heb je toestemming. Kwamen de gegevens van een externe dienst, controleer dan je privacybeleid.
Laat gebruikers vooraf ingevulde waarden altijd wijzigen. Zet ze niet vast.
Zo vult WEMASY formulieren vooraf in
WEMASY-formulieren ondersteunen vooraf invullen uit URL-parameters en gebruikerssessies. Koppel met automatiseringsdiensten of API's om vooraf in te vullen uit externe gegevens. Gebruik slim vooraf invullen om de locatie en andere kenmerken van bezoekers te herkennen.
Bekijk de mogelijkheden voor vooraf invullen in jouw WEMASY-abonnement.