How to prefill forms with user data (personalization)

A visitor arrives at your form. The first field asks for their email. But your site already has their email from a previous signup. They have to type it again. A second visitor shows up and the form asks for their country. Your analytics already know where they are located. Why ask?

Prefilled forms complete faster. Visitors do not have to re-enter information you already have. This article covers how to prefill forms and the data sources you can use.

Why prefilled forms matter

Every field a visitor has to fill lowers completion rate. If you can fill 50% of the fields automatically, the form feels shorter. The visitor spends less time on it. Fewer fields to worry about means fewer chances for errors.

Studies show that prefilled forms have 20-30% higher completion rates than blank forms. The difference is real.

Prefilling from URL parameters

The simplest way to prefill is to pass data in the URL using wemasy.com/contact?email=user@example.com&name=John. When the page loads, JavaScript extracts the parameters and fills the form using const params = new URLSearchParams(window.location.search); document.getElementById('email').value = params.get('email'); document.getElementById('name').value = params.get('name');. This works for linking to a form from another page, such as when an email campaign links to a contact form with the recipient's email prefilled or a landing page links to a signup form with the source campaign prefilled.

Be careful with sensitive data. Do not pass passwords or credit card numbers in URLs. Only pass non-sensitive data like email and name.

Prefilling from user sessions

If the user is logged in, you know who they are and can prefill their email, name, address, and other information from their account. On the server, before rendering the form, use const user = getUserFromSession(); const form = { email: user.email, name: user.name, address: user.address };. Then in the HTML template, set <input type="text" name="name" value="<%= form.name %>">. Alternatively, in JavaScript after the page loads, use fetch('/api/user').then(res => res.json()).then(user => { document.getElementById('email').value = user.email; document.getElementById('name').value = user.name; });. This approach requires the user to be logged in. For public forms, use URL parameters or third-party data instead.

Prefilling from browser data

The browser stores data that you can access in two ways. First, localStorage lets you store data in the browser and retrieve it later using localStorage.setItem('email', 'user@example.com'); const email = localStorage.getItem('email');. This persists across page loads and browser sessions, making it useful for saving form progress or remembering the user's email from a previous visit. Second, modern browsers remember form data the user has typed before. Set autocomplete attributes and the browser's auto-fill kicks in using <input type="email" name="email" autocomplete="email"> and <input type="text" name="name" autocomplete="name">. The browser shows suggestions and fills the field without requiring any code, and autocomplete helps especially with mobile where typing is slow.

Prefilling from geolocation

You can detect the user's approximate location and prefill the country or state using fetch('https://ipapi.co/json/').then(res => res.json()).then(data => { document.getElementById('country').value = data.country; document.getElementById('state').value = data.region; });. This uses their IP address to guess location. It is not perfectly accurate (especially for VPN users) but good enough for most cases. Always give the user the option to change it.

Prefilling from third-party data services

Services like Clearbit or Leadiro can look up company and person information based on an email address. When the user types in an email, JavaScript sends it to Clearbit, which responds with company info, job title, and location, and the form prefills with that data. This requires an API key and integration code, making it more complex but very powerful for B2B forms.

Prefilling hidden fields

Hidden fields carry data that the user does not see but your backend needs.

<input type="hidden" name="source" value="email_campaign">

<input type="hidden" name="campaign_id" value="summer_2026">

These are prefilled server-side before the form is rendered. Use them to track where the form submission came from or what campaign led to it.

Prefilling multi-step forms

In multi-step forms, prefill step 2 with data from step 1 so the user does not have to re-enter information they already typed. After step 1 is submitted, store the data in session or localStorage. When step 2 loads, retrieve and prefill it using const step1Data = JSON.parse(localStorage.getItem('formStep1')); if (step1Data) { document.getElementById('email').value = step1Data.email; }.

Privacy and permission considerations

Prefilling is convenient but raises privacy concerns. Showing someone's email address without permission feels invasive.

Only prefill data you have permission to use. If the user is logged in, you have permission. If data came from an email campaign they clicked, you have permission. If data came from a third-party service, check your privacy policy.

Always let users change prefilled values. Do not lock them in.

How WEMASY prefills forms

WEMASY forms support prefilling from URL parameters and user sessions. Connect to Zapier or APIs to prefill from third-party data. Use smart prefill to detect visitor location and other attributes.

See prefill capabilities in your WEMASY plan.

Frequently asked questions