Kävijä saapuu lomakkeellesi. Ensimmäinen kenttä kysyy hänen sähköpostiaan. Sivustollasi on kuitenkin jo hänen sähköpostinsa aiemmasta tilauksesta. Hänen pitää kirjoittaa se uudelleen. Toinen kävijä saapuu, ja lomake kysyy hänen maataan. Analytiikkasi tietää jo, missä hän sijaitsee. Miksi kysyä?
Esitäytetyt lomakkeet valmistuvat nopeammin. Kävijöiden ei tarvitse kirjoittaa uudelleen tietoja, jotka sinulla jo on. Tässä artikkelissa kerrotaan, miten lomakkeet esitäytetään ja mitä tietolähteitä voit käyttää.
Miksi esitäytetyt lomakkeet ovat tärkeitä
Jokainen kenttä, jonka kävijä joutuu täyttämään, laskee täyttöastetta. Jos voit täyttää 50 % kentistä automaattisesti, lomake tuntuu lyhyemmältä. Kävijä käyttää siihen vähemmän aikaa. Mitä vähemmän kenttiä, sitä vähemmän virheiden mahdollisuuksia.
Tutkimusten mukaan esitäytettyjen lomakkeiden täyttöaste on 20-30 % korkeampi kuin tyhjien lomakkeiden. Ero on todellinen.
Esitäyttö URL-parametreista
Yksinkertaisin tapa esitäyttää on välittää tiedot URL-osoitteessa: wemasy.fi/contact?email=user@example.com&name=John. Kun sivu latautuu, JavaScript lukee parametrit ja täyttää lomakkeen näin: const params = new URLSearchParams(window.location.search); document.getElementById('email').value = params.get('email'); document.getElementById('name').value = params.get('name');. Tämä toimii, kun linkität lomakkeeseen toiselta sivulta, esimerkiksi kun sähköpostikampanja linkittää yhteydenottolomakkeeseen vastaanottajan sähköpostiosoite esitäytettynä tai laskeutumissivu linkittää tilauslomakkeeseen lähdekampanja esitäytettynä.
Ole varovainen arkaluonteisten tietojen kanssa. Älä välitä salasanoja tai luottokorttinumeroita URL-osoitteissa. Välitä vain ei-arkaluonteisia tietoja, kuten sähköposti ja nimi.
Esitäyttö käyttäjän istunnosta
Jos käyttäjä on kirjautunut sisään, tiedät kuka hän on ja voit esitäyttää hänen sähköpostinsa, nimensä, osoitteensa ja muut tiedot hänen tililtään. Palvelimella, ennen lomakkeen näyttämistä, käytä: const user = getUserFromSession(); const form = { email: user.email, name: user.name, address: user.address };. Aseta sitten HTML-pohjassa <input type="text" name="name" value="<%= form.name %>">. Vaihtoehtoisesti voit käyttää JavaScriptiä sivun latauduttua: _blocked_('/api/user').then(res => res.json()).then(user => { document.getElementById('email').value = user.email; document.getElementById('name').value = user.name; });. Tämä tapa vaatii, että käyttäjä on kirjautunut sisään. Julkisissa lomakkeissa käytä URL-parametreja tai kolmannen osapuolen dataa.
Esitäyttö selaimen tiedoista
Selain tallentaa tietoja, joihin pääset käsiksi kahdella tavalla. Ensiksi localStorage antaa sinun tallentaa tietoja selaimeen ja hakea ne myöhemmin: localStorage.setItem('email', 'user@example.com'); const email = localStorage.getItem('email');. Tieto säilyy sivulatausten ja selainistuntojen yli, joten siitä on hyötyä lomakkeen edistymisen tallentamisessa tai käyttäjän sähköpostin muistamisessa edelliseltä käynniltä. Toiseksi nykyaikaiset selaimet muistavat tiedot, jotka käyttäjä on aiemmin kirjoittanut. Aseta autocomplete-attribuutit, niin selaimen automaattinen täyttö käynnistyy: <input type="email" name="email" autocomplete="email"> ja <input type="text" name="name" autocomplete="name">. Selain näyttää ehdotukset ja täyttää kentän ilman koodia. Automaattinen täyttö auttaa erityisesti mobiilissa, jossa kirjoittaminen on hidasta.
Esitäyttö sijaintitiedosta
Voit tunnistaa käyttäjän likimääräisen sijainnin ja esitäyttää maan tai osavaltion näin: _blocked_('https://ipapi.co/json/').then(res => res.json()).then(data => { document.getElementById('country').value = data.country; document.getElementById('state').value = data.region; });. Tämä arvaa sijainnin IP-osoitteen perusteella. Se ei ole täysin tarkka (etenkään VPN-käyttäjillä), mutta riittävän hyvä useimpiin tilanteisiin. Anna käyttäjälle aina mahdollisuus muuttaa arvoa.
Esitäyttö kolmannen osapuolen tietopalveluista
Tietojen rikastuspalvelut voivat hakea yritys- ja henkilötietoja sähköpostiosoitteen perusteella. Kun käyttäjä kirjoittaa sähköpostin, JavaScript lähettää sen rikastuspalvelulle, joka vastaa yrityksen tiedoilla, tehtävänimikkeellä ja sijainnilla, ja lomake esitäytetään näillä tiedoilla. Tämä vaatii API-avaimen ja integraatiokoodin, joten se on monimutkaisempi mutta erittäin tehokas B2B-lomakkeissa.
Piilokenttien esitäyttö
Piilokentät kuljettavat tietoa, jota käyttäjä ei näe mutta taustajärjestelmäsi tarvitsee.
<input type="hidden" name="source" value="email_campaign">
<input type="hidden" name="campaign_id" value="summer_2026">
Nämä esitäytetään palvelimella ennen lomakkeen näyttämistä. Käytä niitä seuraamaan, mistä lomakkeen lähetys tuli tai mikä kampanja sen toi.
Monivaiheisten lomakkeiden esitäyttö
Monivaiheisissa lomakkeissa esitäytä vaihe 2 vaiheen 1 tiedoilla, jotta käyttäjän ei tarvitse kirjoittaa uudelleen jo antamiaan tietoja. Kun vaihe 1 on lähetetty, tallenna tiedot istuntoon tai localStorageen. Kun vaihe 2 latautuu, hae ja esitäytä ne näin: const step1Data = JSON.parse(localStorage.getItem('formStep1')); if (step1Data) { document.getElementById('email').value = step1Data.email; }.
Yksityisyys ja lupa
Esitäyttö on kätevää, mutta siihen liittyy yksityisyyskysymyksiä. Jonkun sähköpostiosoitteen näyttäminen ilman lupaa tuntuu tungettelevalta.
Esitäytä vain tietoja, joita sinulla on lupa käyttää. Jos käyttäjä on kirjautunut sisään, sinulla on lupa. Jos tieto tuli sähköpostikampanjasta, jota hän napsautti, sinulla on lupa. Jos tieto tuli kolmannen osapuolen palvelusta, tarkista tietosuojaselosteesi.
Anna käyttäjien aina muuttaa esitäytettyjä arvoja. Älä lukitse niitä.
Näin WEMASY esitäyttää lomakkeita
WEMASY-lomakkeet tukevat esitäyttöä URL-parametreista ja käyttäjän istunnoista. Yhdistä automaatiotyökaluihin tai rajapintoihin esitäyttääksesi kolmannen osapuolen tiedoista. Älykkään esitäytön avulla tunnistat kävijän sijainnin ja muita ominaisuuksia.
Katso esitäyttöominaisuudet WEMASY-paketistasi.