Návštěvník přijde na váš formulář. První pole se ptá na e-mail. Váš web ale jeho e-mail už zná z dřívější registrace. Musí ho psát znovu. Přijde druhý návštěvník a formulář se ptá na jeho zemi. Vaše analytika už ví, kde se nachází. Proč se ptát?
Předvyplněné formuláře se dokončují rychleji. Návštěvníci nemusí znovu zadávat údaje, které už máte. Tento článek ukazuje, jak formuláře předvyplnit a jaké zdroje dat můžete použít.
Proč na předvyplněných formulářích záleží
Každé pole, které musí návštěvník vyplnit, snižuje podíl dokončených formulářů. Pokud můžete automaticky vyplnit 50% polí, formulář působí kratší. Návštěvník s ním stráví méně času. Méně polí znamená méně starostí a méně příležitostí k chybě.
Studie ukazují, že předvyplněné formuláře mají o 20 až 30% vyšší podíl dokončení než prázdné. Ten rozdíl je skutečný.
Předvyplnění z parametrů v adrese URL
Nejjednodušší způsob předvyplnění je předat data v adrese URL pomocí wemasy.cz/contact?email=user@example.com&name=John. Když se stránka načte, JavaScript parametry vyčte a formulář vyplní pomocí const params = new URLSearchParams(window.location.search); document.getElementById('email').value = params.get('email'); document.getElementById('name').value = params.get('name');. Funguje to, když na formulář odkazujete z jiné stránky, například když e-mailová kampaň odkazuje na kontaktní formulář s předvyplněným e-mailem příjemce, nebo když landing page odkazuje na registrační formulář s předvyplněnou zdrojovou kampaní.
Buďte opatrní s citlivými daty. V adresách URL nepředávejte hesla ani čísla platebních karet. Předávejte jen nezávadné údaje, třeba e-mail a jméno.
Předvyplnění z relací uživatele
Pokud je uživatel přihlášený, víte, kdo je, a můžete předvyplnit jeho e-mail, jméno, adresu a další údaje z jeho účtu. Na serveru před vykreslením formuláře použijte const user = getUserFromSession(); const form = { email: user.email, name: user.name, address: user.address };. Potom v šabloně HTML nastavte <input type="text" name="name" value="<%= form.name %>">. Případně v JavaScriptu po načtení stránky použijte _blocked_('/api/user').then(res => res.json()).then(user => { document.getElementById('email').value = user.email; document.getElementById('name').value = user.name; });. Tento postup vyžaduje přihlášeného uživatele. U veřejných formulářů použijte parametry v adrese URL nebo data třetích stran.
Předvyplnění z dat prohlížeče
Prohlížeč ukládá data, ke kterým se dostanete dvěma způsoby. Za prvé localStorage umožňuje uložit data v prohlížeči a později je načíst pomocí localStorage.setItem('email', 'user@example.com'); const email = localStorage.getItem('email');. Přetrvá přes načtení stránek i relace prohlížeče, takže se hodí k uložení rozpracovaného formuláře nebo k zapamatování e-mailu z předchozí návštěvy. Za druhé moderní prohlížeče si pamatují údaje, které uživatel do formulářů už psal. Nastavte atributy autocomplete a automatické vyplňování prohlížeče se spustí pomocí <input type="email" name="email" autocomplete="email"> a <input type="text" name="name" autocomplete="name">. Prohlížeč zobrazí návrhy a pole vyplní bez jakéhokoli kódu a automatické doplňování pomáhá hlavně na mobilu, kde je psaní pomalé.
Předvyplnění z geolokace
Můžete zjistit přibližnou polohu uživatele a předvyplnit zemi nebo stát pomocí _blocked_('https://ipapi.co/json/').then(res => res.json()).then(data => { document.getElementById('country').value = data.country; document.getElementById('state').value = data.region; });. Poloha se odhaduje podle IP adresy. Není dokonale přesná (zejména u uživatelů VPN), ale ve většině případů stačí. Uživateli vždy nechte možnost ji změnit.
Předvyplnění ze služeb třetích stran
Služby pro obohacení dat umí podle e-mailové adresy dohledat údaje o firmě a osobě. Když uživatel zadá e-mail, JavaScript ho pošle službě, ta odpoví informacemi o firmě, pracovní pozici a poloze a formulář se těmito daty předvyplní. Vyžaduje to klíč API a integrační kód, takže je to složitější, ale pro formuláře B2B velmi silné.
Předvyplnění skrytých polí
Skrytá pole nesou data, která uživatel nevidí, ale váš backend je potřebuje.
<input type="hidden" name="source" value="email_campaign">
<input type="hidden" name="campaign_id" value="summer_2026">
Předvyplňují se na straně serveru před vykreslením formuláře. Použijte je ke sledování, odkud odeslání formuláře přišlo nebo která kampaň k němu vedla.
Předvyplnění vícekrokových formulářů
U vícekrokových formulářů předvyplňte krok 2 daty z kroku 1, aby uživatel nemusel znovu zadávat, co už napsal. Po odeslání kroku 1 uložte data do relace nebo localStorage. Když se načte krok 2, data načtěte a předvyplňte pomocí const step1Data = JSON.parse(localStorage.getItem('formStep1')); if (step1Data) { document.getElementById('email').value = step1Data.email; }.
Soukromí a oprávnění
Předvyplnění je pohodlné, ale vyvolává otázky soukromí. Zobrazit někomu e-mailovou adresu bez povolení působí necitlivě.
Předvyplňujte jen data, která smíte použít. Pokud je uživatel přihlášený, oprávnění máte. Pokud data pocházejí z e-mailové kampaně, na kterou klikl, oprávnění máte. Pokud data pocházejí ze služby třetí strany, zkontrolujte své zásady ochrany osobních údajů.
Uživatelům vždy dovolte předvyplněné hodnoty změnit. Nezamykejte je.
Jak WEMASY formuláře předvyplňuje
Formuláře WEMASY podporují předvyplnění z parametrů v adrese URL a z relací uživatele. Pro předvyplnění z dat třetích stran se propojte s automatizačními nástroji nebo API. Pomocí chytrého předvyplnění zjistíte polohu návštěvníka a další vlastnosti.
Možnosti předvyplnění uvidíte ve svém tarifu WEMASY.