Luo ja näytä ponnahduslomakkeita

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

Ponnahdusikkuna näytetään verkkosivustosi sisällön päällä. Se tuo liittymistarjouksen kävijän suoraan näkökenttään samalla, kun alla oleva sivu pysyy paikallaan.

Ponnahdusikkunat sopivat uutiskirjetarjouksiin, alennuksiin, tapahtumailmoittautumisiin, liidimagneetteihin ja muihin kohdennettuihin toimintakehotteisiin. Koska ne keskeyttävät sivun normaalin käyttökokemuksen, ajoitus ja näyttötiheys ovat yhtä tärkeitä kuin ulkoasu.

Tässä oppaassa käsitellään ponnahdusikkunoiden erityisasetuksia. Asetteluja, sisältölohkoja, tilaajakenttiä, tageja, typografiaa, tasoja ja liittymisprosesseja käsitellään pääoppaassa Liittymislomakkeiden rakennusopas.

Ponnahdusikkunan luominen

Avaa “Signup Forms”, napsauta “Create Form” ja valitse “Popup”. Anna selkeä sisäinen nimi ja jatka rakennustyökaluun.

Voit myös muokata olemassa olevaa ponnahdusikkunaa napsauttamalla sen nimeä Liittymislomakkeiden yleiskatsauksessa.

Käytä nimeä, joka kuvaa tarjousta tai sijoittelua, kuten “Homepage Discount Popup”, “Webinar Registration Popup” tai “Guide Download Popup”. Sisäinen nimi ei näy kävijöille automaattisesti.

Ponnahdusikkunan mallin valitseminen

Ponnahdusikkunoissa on tyhjä lomake, vakiolomake ja neljä suunniteltua mallia:

• Clean discount
• Warm guide
• Dark webinar
• Soft community

Valitse malli, jonka koko ja sisältörakenne sopivat tarjoukseen. Kaikkia tekstejä, kenttiä, värejä, kuvia, välistyksiä ja asettelua voi muuttaa myöhemmin.

Ponnahdusikkunan suunnittelu

Järjestä ponnahdusikkuna visuaalisen rakennustyökalun avulla. Voit yhdistää liittymislomakkeeseen tekstiä, kuvia, videoita, luetteloita, painikkeita, sosiaalisen median linkkejä, tilaajalaskurin, välikkeitä ja erottimia.

Pidä pääviesti riittävän lyhyenä, jotta sen ymmärtää heti. Selkeä otsikko, yksi lyhyt selitys ja täsmällinen lähetyspainike ovat yleensä tehokkaampia kuin useat keskenään kilpailevat viestit.

Valitse liittymislomakelohko määrittääksesi kentät, vaadittavat tiedot, piilotetut tagit, etenemisosoittimen, tilaajalaskurin, syöttökentät ja lähetyspainikkeen. Avaa “Page settings” muuttaaksesi ponnahdusikkunan taustaa ja ulkoasun oletusasetuksia.

Ponnahdusikkuna näkyy verkkosivuston päällä ja sisältää sulkemistoiminnon. Jätä tärkeiden tekstien ja kenttien ympärille riittävästi visuaalista tilaa, jotta lomaketta on helppo käyttää pienellä näytöllä.

Ponnahdusikkunan toiminnan määrittäminen

Valitse liittymislomakelohko ja avaa “Widget Settings”. Tässä osiossa määritetään, milloin ponnahdusikkuna näytetään ja kuinka usein kävijä voi nähdä sen.

Näyttöviive

“Display Delay” määrittää, kuinka monta sekuntia Maildroppa odottaa ennen ponnahdusikkunan näyttämistä upotetulla verkkosivulla.

Syötä 0, jos haluat näyttää sen ilman lisäviivettä. Käytä suurempaa arvoa, kun kävijöille halutaan antaa aikaa lukea sivua ennen tarjouksen ilmestymistä. Rakennustyökalu hyväksyy enintään 86,400 sekunnin viiveen.

Valitse viive sivun perusteella. Lyhyt viive voi sopia kohdennetulle kampanjasivulle, kun taas pidempi viive voi tuntua vähemmän häiritsevältä artikkelissa.

Näyttötiheys

“Display Frequency” määrittää ajanjakson, jonka jälkeen ponnahdusikkuna voidaan näyttää samalle kävijälle uudelleen. Käytettävissä olevat vaihtoehdot ovat:

• Always
• Once per hour
• Once per day
• Once per week
• Once per month

Käytä “Always”-asetusta harkiten. Sama kävijä voi turhautua ponnahdusikkunaan, joka keskeyttää hänet toistuvasti. Päivittäinen tai viikoittainen näyttötiheys on usein parempi lähtökohta yleiseen verkkosivustotarjoukseen.

Näyttötiheys tallennetaan kävijän selaimeen. Siksi testaaminen toisella selaimella, yksityisessä selausikkunassa tai tyhjennetyn selaintallennustilan kanssa voi tuottaa erilaisen tuloksen.

Poistumisaikeen käyttäminen

Ota “Exit Intent Popup” käyttöön, kun ponnahdusikkuna halutaan avata sen jälkeen, kun kävijä siirtää osoittimen sivualueen ulkopuolelle, mikä viittaa siihen, että hän saattaa olla poistumassa.

Kun poistumisaikeen tunnistus on käytössä, ponnahdusikkuna odottaa tätä toimintaa normaalin viivästetyn näytön sijaan. Valittu näyttötiheys estää sitä edelleen näkymästä uudelleen liian pian.

Poistumisaikeen tunnistus perustuu osoittimen liikkeeseen, joten se on pääasiassa merkityksellinen työpöytä- ja kannettavien tietokoneiden selaimissa. Kosketuslaitteet eivät tarjoa samaa poistumissignaalia. Varmista aina, että mobiilikävijät voivat löytää liittymistarjouksesi itse sivulta tai jonkin muun sopivan lomakkeen kautta.

Ponnahdusikkunan avaaminen manuaalisesti sivuelementistä

Ponnahdusikkuna voidaan avata, kun kävijä napsauttaa verkkosivustosi tiettyä painiketta, kuvaa tai linkkiä. Tämä on manuaalinen napsautuslaukaisin. Se eroaa “Exit Intent Popup” -toiminnosta, joka reagoi, kun kävijä siirtää osoittimen sivualueen ulkopuolelle.

Määritä ja asenna manuaalinen napsautuslaukaisin seuraavasti:

1. Avaa ponnahdusikkuna Signup Form Builderissa.
2. Napsauta liittymislomakelohkoa kanvaasilla ja avaa oikealta “Settings”.
3. Laajenna “Widget Settings” ja ota käyttöön “Open popup when a customer clicks a page element”.
4. Napsauta “Save changes”.
5. Palaa Signup Forms Overview -näkymään ja aktivoi ponnahdusikkuna, jos se ei ole aktiivinen.
6. Napsauta kyseisen ponnahdusikkunan rivillä “Show Code Snippet”.

Valintaikkuna sisältää kaksi verkkosivustollasi tarvittavaa arvoa:

1. Kopioi “JavaScript”-välilehden koko koodi ja lisää se verkkosivuston sivulle, jolla ponnahdusikkunan tulee olla käytettävissä.
2. Kopioi koodin alta “Add this ID to element from which you want to manually trigger Popup” -kohdassa näkyvä ID.
3. Lisää täsmälleen kyseinen arvo sen painikkeen, kuvan tai linkin id-attribuuttiin, jonka tulee avata ponnahdusikkuna.

ID noudattaa tätä muotoa:

maildroppa-popup-btn-[form-id]

Esimerkiksi:

<button id="maildroppa-popup-btn-[form-id]">Get the guide</button>

JavaScript lataa ponnahdusikkunan. ID yhdistää ponnahdusikkunan valittuun sivuelementtiin. Molempien on oltava samalla julkaistulla sivulla. Kun kävijä napsauttaa elementtiä, jolla on täsmälleen kyseinen ID, Maildroppa-skripti avaa ponnahdusikkunan.

Jos verkkosivustosi painikkeella on jo toisesta ponnahdusikkunajärjestelmästä peräisin oleva ID, korvaa se Maildroppa-laukaisimen ID:llä, kun Maildroppan tulee käsitellä napsautus. Älä sijoita Maildroppa-ponnahdusikkunaa verkkosivustosi rakennustyökalun tarjoaman toisen ponnahdusikkunan sisään.

Käytä kutakin HTML-ID:tä sivulla vain kerran. Jos useiden elementtien tulee avata sama ponnahdusikkuna, pyydä verkkosivuston toteuttajaa yhdistämään elementit ilman saman ID:n kopioimista.

Liittymisprosessin yhdistäminen

Tarkista rakennustyökalun ylätunnisteessa määritetty liittymisprosessi. Se hallitsee välitöntä lähetysvastausta, Double Opt-in -sähköpostia ja vahvistuksen jälkeistä tulosta.

Voit valita olemassa olevan prosessin, muokata sitä tai luoda tälle ponnahdusikkunalle erillisen prosessin. Oma prosessi on hyödyllinen, kun tarjous tarvitsee oman vahvistusviestin tai liidimagneetin toimituksen.

Esikatselu ja tallentaminen

Napsauta “Preview” tarkistaaksesi ponnahdusikkunan ulkoasun ja toiminnan muuttamatta verkkosivustollasi käytettävää versiota. Tarkista asettelu, sulkemistoiminto, kenttien järjestys, validointiin varattu tila ja lähetysvastaus.

Napsauta “Save changes”, kun ponnahdusikkuna on valmis. Palaa sen jälkeen Signup Forms Overview -näkymään.

Ponnahdusikkunan aktivointi ja automaattinen upottaminen

Aktivoi ponnahdusikkuna sen kolmen pisteen toimintovalikosta, jos se ei ole jo aktiivinen. Napsauta sitten “Show Code Snippet” ja kopioi “JavaScript”-välilehden koko koodi.

Lisää skripti jokaiselle verkkosivuston sivulle, jolla ponnahdusikkunan tulee olla käytettävissä. Koodi sisältää ponnahdusikkunan yksilöllisen lomaketunnuksen ja lataa sen nykyisen tallennetun määrityksen.

“HTML”-välilehti tarjoaa luodun merkintäkoodin mukautettuja toteutuksia varten. Jos käytät sitä, testaa kaikki toiminta ja lähetysvaiheet huolellisesti, sillä verkkosivustosi koodi ja tyylit voivat vaikuttaa lopputulokseen.

Tätä osiota sovelletaan, kun ponnahdusikkunan tulee avautua automaattisesti näyttöviiveen tai poistumisaikeen perusteella. Jos painikkeen, kuvan tai linkin tulee avata ponnahdusikkuna napsautuksella, noudata ohjetta

.

Yleiset upotusohjeet löytyvät oppaasta Upotetun lomakkeen rakentaminen ja upottaminen.

Ponnahdusikkunan testaaminen verkkosivustollasi

Testaa ponnahdusikkunaa oikealla verkkosivuston sivulla koodin lisäämisen jälkeen:

1. Tarkista määritetty viive.
2. Testaa sulkemispainike ja lomakkeen ulkopuolelle napsauttaminen.
3. Jos toiminto on käytössä, siirrä osoitin sivualueen ulkopuolelle testataksesi poistumisaikeen tunnistusta.
4. Jos toiminto on käytössä, napsauta määritettyä sivuelementtiä testataksesi manuaalista laukaisinta.
5. Tarkista asettelu kapealla näytöllä.
6. Lähetä lomake ja suorita Double Opt-in -prosessi loppuun.
7. Varmista tilaaja ja piilotetut tagit Maildroppassa.

Näyttötiheysasetus voi estää ponnahdusikkunaa näkymästä uudelleen toistuvien testien aikana. Käytä yksityistä selausikkunaa tai tyhjennä selaimen asiaankuuluva tallennustila, kun tarvitset puhtaan testikäynnin.

Ponnahdusikkunan päivittäminen tai käytöstä poistaminen

Päivitä ponnahdusikkuna avaamalla se Maildroppassa, muokkaamalla ulkoasua tai toimintaa, esikatselemalla sitä ja napsauttamalla “Save changes”. JavaScript-koodinpätkä käyttää edelleen samaa lomaketunnusta.

Voit lopettaa sen näyttämisen väliaikaisesti valitsemalla toimintovalikosta “Deactivate”. Käytöstä poistaminen säilyttää ponnahdusikkunan ja sen aiemmat raporttitiedot. Poista myös skripti tai laukaisinelementti verkkosivustolta, jos niitä ei enää tarvita.