Odwiedzający trafia na Twój formularz. Pierwsze pole pyta o jego e-mail. Ale Twoja strona już ma ten e-mail z poprzedniego zapisu. Musi wpisać go jeszcze raz. Pojawia się drugi odwiedzający, a formularz pyta o jego kraj. Twoja analityka już wie, gdzie się znajduje. Po co pytać?
Wstępnie wypełnione formularze są wypełniane szybciej. Odwiedzający nie muszą ponownie wpisywać informacji, które już masz. Ten artykuł pokazuje, jak wstępnie wypełniać formularze i jakich źródeł danych użyć.
Dlaczego wstępnie wypełnione formularze mają znaczenie
Każde pole, które odwiedzający musi wypełnić, obniża odsetek wypełnień. Jeśli możesz wypełnić 50% pól automatycznie, formularz wydaje się krótszy. Odwiedzający poświęca na niego mniej czasu. Mniej pól do ogarnięcia oznacza mniej okazji do błędów.
Badania pokazują, że wstępnie wypełnione formularze mają o 20-30% wyższy odsetek wypełnień niż puste. Różnica jest realna.
Wypełnianie z parametrów adresu URL
Najprostszy sposób to przekazanie danych w adresie URL, np. wemasy.pl/contact?email=user@example.com&name=John. Gdy strona się wczytuje, JavaScript wyciąga parametry i wypełnia formularz za pomocą const params = new URLSearchParams(window.location.search); document.getElementById('email').value = params.get('email'); document.getElementById('name').value = params.get('name');. Działa to przy linkowaniu do formularza z innej strony, np. gdy kampania e-mail prowadzi do formularza kontaktowego z wpisanym e-mailem odbiorcy albo strona docelowa prowadzi do formularza zapisu z wpisanym źródłem kampanii.
Uważaj na dane wrażliwe. Nie przekazuj haseł ani numerów kart w adresach URL. Przekazuj tylko dane niewrażliwe, takie jak e-mail i imię.
Wypełnianie z sesji użytkownika
Jeśli użytkownik jest zalogowany, wiesz, kim jest, i możesz wstępnie wypełnić jego e-mail, imię, adres i inne informacje z konta. Na serwerze, przed wyświetleniem formularza, użyj const user = getUserFromSession(); const form = { email: user.email, name: user.name, address: user.address };. Następnie w szablonie HTML ustaw <input type="text" name="name" value="<%= form.name %>">. Ewentualnie w JavaScripcie po wczytaniu strony użyj _blocked_('/api/user').then(res => res.json()).then(user => { document.getElementById('email').value = user.email; document.getElementById('name').value = user.name; });. To podejście wymaga zalogowanego użytkownika. W formularzach publicznych użyj zamiast tego parametrów URL lub danych zewnętrznych.
Wypełnianie z danych przeglądarki
Przeglądarka przechowuje dane, do których masz dostęp na dwa sposoby. Po pierwsze, localStorage pozwala zapisać dane w przeglądarce i odczytać je później za pomocą localStorage.setItem('email', 'user@example.com'); const email = localStorage.getItem('email');. Dane zostają po przeładowaniu strony i między sesjami przeglądarki, co przydaje się do zapisywania postępu formularza lub zapamiętania e-maila z poprzedniej wizyty. Po drugie, nowoczesne przeglądarki pamiętają dane formularzy wpisane wcześniej przez użytkownika. Ustaw atrybuty autocomplete, a włączy się autouzupełnianie przeglądarki, używając <input type="email" name="email" autocomplete="email"> i <input type="text" name="name" autocomplete="name">. Przeglądarka pokazuje podpowiedzi i wypełnia pole bez żadnego kodu, a autouzupełnianie szczególnie pomaga na telefonach, gdzie pisanie jest wolne.
Wypełnianie z geolokalizacji
Możesz wykryć przybliżoną lokalizację użytkownika i wstępnie wypełnić kraj lub region za pomocą _blocked_('https://ipapi.co/json/').then(res => res.json()).then(data => { document.getElementById('country').value = data.country; document.getElementById('state').value = data.region; });. Wykorzystuje to adres IP do odgadnięcia lokalizacji. Nie jest idealnie dokładne (zwłaszcza dla użytkowników VPN), ale w większości przypadków wystarcza. Zawsze daj użytkownikowi możliwość zmiany.
Wypełnianie z zewnętrznych usług danych
Usługi wzbogacania danych potrafią wyszukać informacje o firmie i osobie na podstawie adresu e-mail. Gdy użytkownik wpisze e-mail, JavaScript wysyła go do usługi, która odpowiada informacjami o firmie, stanowisku i lokalizacji, a formularz wypełnia się tymi danymi. Wymaga to klucza API i kodu integracji, więc jest bardziej złożone, ale bardzo skuteczne w formularzach B2B.
Wypełnianie ukrytych pól
Ukryte pola niosą dane, których użytkownik nie widzi, a które są potrzebne Twojemu zapleczu.
<input type="hidden" name="source" value="email_campaign">
<input type="hidden" name="campaign_id" value="summer_2026">
Są wypełniane po stronie serwera, zanim formularz zostanie wyświetlony. Użyj ich, żeby śledzić, skąd pochodzi zgłoszenie formularza i jaka kampania do niego doprowadziła.
Wypełnianie formularzy wieloetapowych
W formularzach wieloetapowych wypełnij krok 2 danymi z kroku 1, żeby użytkownik nie musiał ponownie wpisywać informacji, które już podał. Po wysłaniu kroku 1 zapisz dane w sesji lub localStorage. Gdy wczyta się krok 2, odczytaj je i wypełnij za pomocą const step1Data = JSON.parse(localStorage.getItem('formStep1')); if (step1Data) { document.getElementById('email').value = step1Data.email; }.
Prywatność i zgoda
Wstępne wypełnianie jest wygodne, ale budzi obawy o prywatność. Pokazywanie czyjegoś adresu e-mail bez zgody wydaje się naruszeniem.
Wypełniaj wstępnie tylko dane, do których masz prawo. Jeśli użytkownik jest zalogowany, masz zgodę. Jeśli dane pochodzą z kampanii e-mail, w którą kliknął, masz zgodę. Jeśli dane pochodzą z usługi zewnętrznej, sprawdź swoją politykę prywatności.
Zawsze pozwalaj użytkownikom zmieniać wstępnie wypełnione wartości. Nie blokuj ich.
Jak WEMASY wstępnie wypełnia formularze
Formularze WEMASY obsługują wstępne wypełnianie z parametrów URL i sesji użytkownika. Połącz z narzędziami do automatyzacji lub API, żeby wypełniać z danych zewnętrznych. Użyj inteligentnego wypełniania, żeby wykrywać lokalizację odwiedzającego i inne cechy.
Zobacz możliwości wstępnego wypełniania w swoim pakiecie WEMASY.