Luo ja sijoita liuku­lomakkeita

Published: 16. heinäkuuta 2026 · Last updated: 21. heinäkuuta 2026 · By Marcus Biel

Liuku­lomake on kompakti tilauslomake, joka näkyy selainikkunan reunassa tai valitussa kohdassa.

Se kiinnittää enemmän huomiota kuin sivun sisään sijoitettu lomake ja peittää vähemmän verkkosivustosta kuin keskitetty ponnahdusikkuna. Liuku­lomakkeet sopivat hyvin uutiskirjemuistutuksiin, alennuksiin, tuotepäivityksiin ja lyhyisiin tarjouksiin, joiden tulisi pysyä näkyvissä kävijän lukiessa sivua.

Tässä oppaassa käsitellään liuku­lomakkeille ominaisia asetuksia. Yhteiset asettelu-, sisältö-, kenttä-, tunniste-, typografia-, taso- ja tilausprosessitoiminnot esitellään pääoppaassa Tilauslomakkeiden rakennusohje.

Liuku­lomakkeen luominen

Avaa ”Signup Forms”, napsauta ”Create Form” ja valitse ”Slide-in”. Anna lomakkeelle selkeä sisäinen nimi ja siirry rakennusohjelmaan.

Voit myös muokata olemassa olevaa liuku­lomaketta napsauttamalla sen nimeä Signup Forms Overview-näkymässä.

Käytä esimerkiksi nimeä ”Blog Newsletter Slide-in”, ”New Product Reminder” tai ”Summer Coupon Slide-in”. Sisäinen nimi auttaa hallitsemaan lomaketta, eikä sitä näytetä automaattisesti kävijöille.

Liuku­lomakkeen mallin valitseminen

Liuku­lomakkeissa on tyhjä lomake, vakiolomake ja neljä suunniteltua mallia:

• Selkeä muistutus
• Tumma tarjous
• Lämmin kuponki
• Minimalistinen viesti

Mallit on suunniteltu kompakteja viestejä varten, mutta kaikkia elementtejä voi edelleen muokata. Voit vaihtaa sisältöä, kenttiä, värejä, typografiaa, reunusta, välistystä ja lähetyspainiketta aloitusmallin valitsemisen jälkeen.

Liuku­lomakkeen suunnittelu

Järjestä liuku­lomake visuaalisessa rakennusohjelmassa. Se voi sisältää tilauslomakkeen lisäksi tekstiä, kuvan, videon, luettelon, painikkeen, sosiaalisen median linkkejä, tilaajalaskurin, tyhjän välin tai erottimen.

Tilaa on vähemmän kuin laskeutumissivulla tai leveässä upotetussa lomakkeessa. Pidä tarjous kohdennettuna ja vältä sellaisen sisällön lisäämistä, joka pakottaa kävijät etsimään kenttiä tai lähetyspainiketta.

Valitse tilauslomakelohko, jos haluat määrittää kentät, vaaditut tiedot, piilotetut tunnisteet, edistymisen ilmaisimen, tilaajalaskurin, syöttökentät ja lähetyspainikkeen. Avaa ”Page settings”, jos haluat muuttaa liuku­lomakkeen taustaa ja ulkoasun yleisiä oletusasetuksia.

Yksisarakkeinen asettelu on yleensä selkein vaihtoehto. Jos käytät useita sarakkeita, tarkista huolellisesti, miten ne asettuvat kapeilla näytöillä.

Näytön sijainnin valitseminen

Valitse tilauslomakelohko ja avaa ”Widget Settings”. Sijainninvalitsimessa on kolme kertaa kolme -ruudukko:

• Ylävasen, yläkeskellä tai yläoikea
• Keskellä vasemmalla, keskellä tai keskellä oikealla
• Alavasen, alhaalla keskellä tai alaoikea

Valitse sijainti, joka ei peitä tärkeitä verkkosivuston ohjaimia. Tarkista evästeilmoitukset, chat-widgetit, navigointi, ostoskoripainikkeet ja muut kiinteät elementit ennen päätöstä.

Kapeilla mobiilinäytöillä Maildroppa yksinkertaistaa sijoittelua, jotta liuku­lomake mahtuu käytettävissä olevaan leveyteen. Yläreunan sijainnit pysyvät ylhäällä; muut sijainnit näytetään alareunasta. Testaa tulos aina pienellä näytöllä äläkä luota ainoastaan työpöytäsijaintiin.

Näyttöviiveen määrittäminen

”Display Delay” määrittää, kuinka monta sekuntia Maildroppa odottaa ennen liuku­lomakkeen näyttämistä upotetulla verkkosivulla.

Käytä arvoa 0, kun liuku­lomakkeen tulee olla käytettävissä heti. Anna pidempi viive, jos haluat kävijöille ensin aikaa tutustua sivuun. Rakennusohjelma hyväksyy enintään 86 400 sekunnin viiveen.

Lyhyt viive voi toimia hyvin yksinkertaisessa uutiskirjemuistutuksessa. Pidemmässä artikkelissa myöhemmin näkyviin tuleva lomake voi tuntua luontevammalta ja tehdä tarjouksesta merkityksellisemmän aktiivisesti lukeville kävijöille.

Näyttötiheyden määrittäminen

”Display Frequency” määrittää ajanjakson, jonka jälkeen liuku­lomake voidaan näyttää samalle kävijälle uudelleen. Voit valita:

• Aina
• Kerran tunnissa
• Kerran päivässä
• Kerran viikossa
• Kerran kuukaudessa

Käytä tarjoukseen sopivaa tiheyttä. Väliaikainen kampanja voi tarvita lyhyemmän aikavälin, kun taas yleisen uutiskirjemuistutuksen ei yleensä tarvitse näkyä jokaisella käyntikerralla.

Tiheys tallennetaan kävijän selaimeen. Toista selainta, yksityistä selausikkunaa tai tyhjennettyä selaintallennustilaa käsitellään eri käyntihistoriana.

Tilausprosessin yhdistäminen

Tarkista rakennusohjelman ylätunnisteessa määritetty tilausprosessi. Se määrittää lähetyksen jälkeisen vastauksen, Double Opt-in -sähköpostin ja vahvistuksen jälkeiset toiminnot.

Voit valita olemassa olevan prosessin, muokata nykyistä prosessia tai luoda sellaisen erityisesti tätä liuku­lomaketta varten. Jos samaa prosessia käyttää useampi lomake, siihen tehdyt muutokset vaikuttavat kaikkiin lomakkeisiin.

Esikatselu ja tallentaminen

Napsauta ”Preview”, jos haluat tarkastella liuku­lomaketta ennen sen lisäämistä verkkosivustollesi. Tarkista valittu sijainti, avautumiskäyttäytyminen, kenttien järjestys, sulkemispainike ja koko tilausprosessin vastaus.

Napsauta ”Save changes”, kun lomake ja Widget Settings -asetukset ovat valmiit. Palaa sitten Signup Forms Overview -näkymään.

Liuku­lomakkeen aktivointi ja upottaminen

Aktivoi liuku­lomake sen kolmen pisteen toimintovalikosta, jos se ei ole jo aktiivinen. Napsauta ”Show Code Snippet” ja kopioi koko koodi ”JavaScript”-välilehdeltä.

Lisää tämä skripti jokaiselle verkkosivustosi sivulle, jolla liuku­lomakkeen tulee olla käytettävissä. Toisin kuin upotetussa lomakkeessa, skriptin tarkka sijainti sivulla ei määritä liuku­lomakkeen näkyvää sijaintia. Widget Settings -asetuksissa valittu sijainti määrittää, missä liuku­lomake näkyy.

”HTML”-välilehti sisältää luodun merkkauskoodin mukautettuja toteutuksia varten. Testaa koko käyttö- ja lähetysprosessi huolellisesti, jos verkkosivustosi käyttää tätä vaihtoehtoa.

Yleiset ohjeet koodin sijoittamiseen löytyvät oppaasta Upotetun lomakkeen rakentaminen ja upottaminen.

Liuku­lomakkeen testaaminen verkkosivustolla

Kun olet lisännyt koodin, testaa oikea verkkosivu:

1. Tarkista, että liuku­lomake näkyy valitun viiveen jälkeen.
2. Vahvista sen sijainti leveällä näytöllä.
3. Tarkista mukautettu sijainti ja leveys kapealla näytöllä.
4. Varmista, ettei se peitä navigointia, evästeasetuksia, chat-painikkeita tai muita tärkeitä toimintoja.
5. Testaa liuku­lomakkeen avaaminen ja sulkeminen.
6. Lähetä lomake ja suorita Double Opt-in -prosessi loppuun.
7. Varmista tilaaja ja piilotetut tunnisteet Maildroppassa.

Tiheysasetus voi estää lomaketta näkymästä uudelleen toistuvien testien aikana. Käytä yksityistä selausikkunaa tai tyhjennä tarvittava selaintallennustila, kun haluat simuloida uutta kävijää.

Liuku­lomakkeen päivittäminen tai käytöstä poistaminen

Avaa sama liuku­lomake Maildroppassa, tee muutokset, esikatsele ne ja napsauta ”Save changes”. JavaScript-koodinpätkä käyttää edelleen samaa lomaketunnistetta ja lataa tallennetut asetukset.

Valitse Signup Forms Overview -näkymässä ”Deactivate”, kun haluat ottaa liuku­lomakkeen pois käytöstä poistamatta sitä. Poista sen skripti myös verkkosivustolta, jos et enää aio käyttää sitä siellä.