Egy látogató megérkezik az űrlapodra. Az első mező az e-mail-címét kérdezi. De az oldalad már megkapta az e-mail-címét egy korábbi feliratkozáskor. Újra be kell írnia. Egy másik látogató érkezik, és az űrlap az országát kérdezi. Az analitikád már tudja, hol tartózkodik. Minek kérdezni?
Az előre kitöltött űrlapok gyorsabban elkészülnek. A látogatóknak nem kell újra megadniuk az információt, amelyet már ismersz. Ez a cikk bemutatja, hogyan tölthetsz ki előre űrlapokat, és milyen adatforrásokat használhatsz.
Miért számítanak az előre kitöltött űrlapok
Minden mező, amelyet a látogatónak ki kell töltenie, csökkenti a kitöltési arányt. Ha a mezők 50%-át automatikusan ki tudod tölteni, az űrlap rövidebbnek érződik. A látogató kevesebb időt tölt vele. Kevesebb mezővel kevesebb a hibalehetőség is.
A tanulmányok szerint az előre kitöltött űrlapok kitöltési aránya 20-30%-kal magasabb, mint az üres űrlapoké. A különbség valós.
Előtöltés URL-paraméterekből
Az előtöltés legegyszerűbb módja, hogy az adatokat az URL-ben adod át, például így: wemasy.hu/contact?email=user@example.com&name=John. Az oldal betöltődésekor a JavaScript kinyeri a paramétereket, és kitölti az űrlapot ezzel: const params = new URLSearchParams(window.location.search); document.getElementById('email').value = params.get('email'); document.getElementById('name').value = params.get('name');. Ez akkor működik, ha egy másik oldalról hivatkozol az űrlapra, például amikor egy e-mail-kampány a címzett e-mail-címével előre kitöltött kapcsolatfelvételi űrlapra mutat, vagy egy landing oldal a forráskampánnyal előre kitöltött feliratkozó űrlapra mutat.
Légy óvatos az érzékeny adatokkal. Ne adj át jelszavakat vagy bankkártyaszámokat az URL-ben. Csak nem érzékeny adatokat adj át, például e-mail-címet és nevet.
Előtöltés felhasználói munkamenetekből
Ha a felhasználó be van jelentkezve, tudod, ki ő, és előre kitöltheted az e-mail-címét, nevét, címét és más adatait a fiókjából. A szerveren az űrlap megjelenítése előtt használd ezt: const user = getUserFromSession(); const form = { email: user.email, name: user.name, address: user.address };. Aztán a HTML sablonban állítsd be ezt: <input type="text" name="name" value="<%= form.name %>">. Másik lehetőségként JavaScriptben az oldal betöltése után használd ezt: _blocked_('/api/user').then(res => res.json()).then(user => { document.getElementById('email').value = user.email; document.getElementById('name').value = user.name; });. Ehhez a módszerhez a felhasználónak be kell jelentkeznie. Nyilvános űrlapoknál használj helyette URL-paramétereket vagy külső adatokat.
Előtöltés böngészőadatokból
A böngésző olyan adatokat tárol, amelyekhez kétféleképpen férhetsz hozzá. Először: a localStorage lehetővé teszi, hogy adatot tárolj a böngészőben, és később lekérd, ezzel: localStorage.setItem('email', 'user@example.com'); const email = localStorage.getItem('email');. Ez megmarad oldalbetöltések és böngészőmunkamenetek között, így hasznos az űrlap állapotának mentéséhez vagy a felhasználó e-mail-címének megjegyzéséhez egy korábbi látogatásból. Másodszor: a modern böngészők megjegyzik az adatokat, amelyeket a felhasználó korábban begépelt. Állítsd be az autocomplete attribútumokat, és a böngésző automatikus kitöltése működésbe lép, ezekkel: <input type="email" name="email" autocomplete="email"> és <input type="text" name="name" autocomplete="name">. A böngésző javaslatokat mutat, és kódolás nélkül kitölti a mezőt, az automatikus kitöltés pedig főleg mobilon segít, ahol lassú a gépelés.
Előtöltés helymeghatározásból
Meghatározhatod a felhasználó hozzávetőleges tartózkodási helyét, és előre kitöltheted az országot vagy a megyét ezzel: _blocked_('https://ipapi.co/json/').then(res => res.json()).then(data => { document.getElementById('country').value = data.country; document.getElementById('state').value = data.region; });. Ez az IP-címe alapján tippeli meg a helyet. Nem tökéletesen pontos (főleg VPN-felhasználóknál), de a legtöbb esetben elég jó. Mindig adj lehetőséget a felhasználónak a módosításra.
Előtöltés külső adatszolgáltatásokból
Az adatgazdagító szolgáltatások egy e-mail-cím alapján képesek cég- és személyadatokat keresni. Amikor a felhasználó beír egy e-mail-címet, a JavaScript elküldi a gazdagító szolgáltatásnak, amely cégadatokkal, beosztással és hellyel válaszol, az űrlap pedig előre kitöltődik ezekkel az adatokkal. Ehhez API-kulcs és integrációs kód kell, ami bonyolultabbá, de a B2B űrlapoknál nagyon erőssé teszi.
Rejtett mezők előtöltése
A rejtett mezők olyan adatot hordoznak, amelyet a felhasználó nem lát, de a háttérrendszerednek szüksége van rá.
<input type="hidden" name="source" value="email_campaign">
<input type="hidden" name="campaign_id" value="summer_2026">
Ezek az űrlap megjelenítése előtt, a szerveroldalon töltődnek ki. Használd őket annak követésére, honnan jött az űrlapbeküldés, vagy melyik kampány vezetett hozzá.
Többlépéses űrlapok előtöltése
A többlépéses űrlapoknál töltsd ki előre a 2. lépést az 1. lépés adataival, hogy a felhasználónak ne kelljen újra megadnia az információt, amelyet már begépelt. Az 1. lépés beküldése után tárold az adatokat a munkamenetben vagy a localStorage-ban. A 2. lépés betöltésekor kérd le és töltsd ki előre ezzel: const step1Data = JSON.parse(localStorage.getItem('formStep1')); if (step1Data) { document.getElementById('email').value = step1Data.email; }.
Adatvédelmi és engedélyezési szempontok
Az előtöltés kényelmes, de adatvédelmi aggályokat vet fel. Ha valakinek az e-mail-címét engedély nélkül mutatod meg, az tolakodónak érződik.
Csak olyan adatot tölts ki előre, amelynek használatára engedélyed van. Ha a felhasználó be van jelentkezve, van engedélyed. Ha az adat egy e-mail-kampányból származik, amelyre rákattintott, van engedélyed. Ha az adat külső szolgáltatásból jött, nézd meg az adatvédelmi tájékoztatódat.
Mindig engedd, hogy a felhasználók módosítsák az előre kitöltött értékeket. Ne zárd le őket.
Hogyan tölti ki előre az űrlapokat a WEMASY
A WEMASY űrlapjai támogatják az előtöltést URL-paraméterekből és felhasználói munkamenetekből. Kapcsolódj automatizálási eszközökhöz vagy API-khoz, hogy külső adatokból tölthess elő. Használd az okos előtöltést a látogató helyének és más jellemzőinek felismeréséhez.
Nézd meg az előtöltési lehetőségeket a WEMASY csomagodban.