Rekisteröitymislomakkeiden rakennustyökalu: Lomakkeiden suunnittelu

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

Signup Form Builder on visuaalinen editori kaikille Maildroppan rekisteröitymislomakkeille ja laskeutumissivuille.

Sen avulla voit järjestellä asetteluja, lisätä tekstiä ja kuvia, määrittää tilaajakenttiä, vaihtaa värejä ja fontteja, määrittää tunnisteita sekä päättää, mitä tapahtuu, kun joku lähettää lomakkeen. Työskentelyn aikana näkyvä esikatselu näyttää lopputuloksen, joten kokonaisen rekisteröitymiskokemuksen suunnitteluun ei tarvita koodia.

Maildroppa käyttää samaa rakennustyökalua neljälle lomaketyypille:

• Laskeutumissivut ovat itsenäisiä kokonaisia sivuja, jotka julkaistaan ja jaetaan linkillä.
• Upotetut lomakkeet sijoitetaan suoraan verkkosivustosi sivulle.
• Ponnahdusikkunat näkyvät verkkosivustosi päällä, ja ne voidaan myös avata sivuelementistä.
• Liukuikkunat näkyvät selainikkunan valitussa reunassa tai kohdassa.

Tässä oppaassa esitellään kaikkien näiden lomaketyyppien yhteiset toiminnot. Linkitetyissä oppaissa käsitellään vain kullekin tyypille ainutlaatuiset asetukset ja vaiheet.

Signup Form Builderin avaaminen

Avaa Maildroppassa “Signup Forms”. Voit sitten napsauttaa “Create Form” luodaksesi uuden laskeutumissivun, upotetun lomakkeen, ponnahdusikkunan tai liukuikkunan.

Voit jatkaa olemassa olevan lomakkeen muokkaamista napsauttamalla sen nimeä tai valitsemalla “Edit Form” Signup Forms Overview -näkymän kolmen pisteen toimintovalikosta.

Anna lomakkeelle selkeä sisäinen nimi. Nimet, kuten “Homepage Newsletter”, “Webinar Popup” tai “Summer Lead Magnet”, on helpompi tunnistaa myöhemmin kuin yleisnimet, kuten “Form 1”. Lomakkeen nimi auttaa hallitsemaan lomaketta Maildroppassa, eikä sitä näytetä automaattisesti kävijöille.

Rakennustyökalun ymmärtäminen

Rakennustyökalu jakautuu neljään pääalueeseen.

Yläpalkki sisältää lomakkeen nimen ja tärkeimmät toiminnot. Siitä voit palata yleiskatsaukseen, esikatsella työtäsi ja tallentaa sen. Laskeutumissivuilla palkissa näkyvät myös luonnos- ja julkaisuohjaimet.

Vasen sivupalkki sisältää kohdat “Layout”, “Content” ja “Layers”. Sen avulla voit luoda rakenteen, lisätä uusia elementtejä ja hallita kaikkea kankaalle jo sijoitettua.

Kangas on keskellä oleva työskentelyalue. Se näyttää nykyisen sivun tai lomakkeen. Valitse elementti napsauttamalla sitä. Voit myös vetää elementtejä toiseen kohtaan tai lisätä uusia elementtejä vasemmasta sivupalkista.

Oikea sivupalkki sisältää kohdat “Settings” ja “Page settings”. “Settings” muuttaa valittua elementtiä. “Page settings” muuttaa taustaa ja koko suunnittelun oletusasetuksia.

Pienemmillä näytöillä sivupalkit avautuvat paneeleina “Content”- ja “Settings”-painikkeilla. Käytettävissä olevat toiminnot pysyvät samoina.

Aloittaminen mallipohjasta

Kun luot lomakkeen, rakennustyökalu tarjoaa valitulle lomaketyypille aloitusmalleja. Voit aloittaa tyhjästä suunnittelusta, käyttää vakiolomaketta tai valita valmiin mallipohjan.

Mallipohjat tarjoavat lähtökohdaksi asettelun, värit, typografian ja esimerkkisisällön. Ne eivät rajoita sitä, mitä voit myöhemmin muuttaa. Kun olet valinnut mallipohjan, jokaista elementtiä voi edelleen muokata, siirtää, monistaa, tyylitellä uudelleen tai poistaa.

Jokaisella lomaketyypillä on tarkoitukseensa sopivat mallipohjat. Laskeutumissivuilla on esimerkiksi valmiit Newsletter-, Lead Magnet-, Webinar- ja Waitlist-sivumallit. Upotetuilla lomakkeilla, ponnahdusikkunoilla ja liukuikkunoilla on omat kompaktit aloitusmallinsa.

Jos et ole varma, minkä mallipohjan valitsisit, valitse rakenteeltaan tavoitettasi lähimpänä oleva. Tekstin, värien ja kuvien muuttaminen on yleensä nopeampaa kuin saman rakenteen rakentaminen tyhjälle kankaalle.

Asettelun luominen

Avaa vasemman sivupalkin “Layout” lisätäksesi uuden solurivin. Käytettävissä olevat asettelut ovat:

• Yksi solu
• Kaksi, kolme tai neljä samankokoista solua
• Kaksi solua suhteessa 2:1
• Kaksi solua suhteessa 1:2

Lisää asettelu nykyiseen lisäyskohtaan napsauttamalla sitä tai vetämällä se kankaalle. Voit sitten sijoittaa sisältöä jokaiseen soluun.

Valitse ruutu tai sarake säätääksesi sen kokoa, välejä, tasausta, taustaa, reunusta ja sisämarginaalia oikeassa sivupalkissa. Monisarakkeisissa asetteluissa voit myös muuttaa sarakkeiden suhteellisia leveyksiä.

Luo asetteluilla selkeä lukemisjärjestys. Yksi sarake toimii hyvin kompakteissa rekisteröitymislomakkeissa. Kaksisarakkeinen asettelu on hyödyllinen, kun kuvan, hyötyluettelon tai tapahtumatietojen pitäisi näkyä rekisteröitymislomakkeen vieressä.

Sisällön lisääminen

Avaa vasemman sivupalkin “Content” lisätäksesi yksittäisiä sisältölohkoja. Voit lisätä lohkon napsauttamalla sitä tai vetämällä sen haluamaasi kohtaan kankaalla.

Rakennustyökalu tarjoaa seuraavat sisältölohkot:

Signup form — Sisältää tilaajakentät ja lähetyspainikkeen. Suunnittelussa on oltava yksi signup form -lohko, ennen kuin se voidaan tallentaa toimivaksi lomakkeeksi. Kun lohko on lisätty, sitä ei enää tarjota uutena sisältölohkovaihtoehtona.

Text — Lisää otsikoita, kappaleita tai muuta muotoiltua tekstiä.

Image — Lisää kuvan URL-osoitteesta, latauksesta tai Maildroppan mediakirjastosta. Voit antaa vaihtoehtoisen tekstin, lisätä linkin ja hallita mittoja, kuvasuhdetta, rajausta, polttopistettä, kiertoa ja kääntämistä.

Video — Lisää YouTube- tai Vimeo-videon, upotus-URL-osoitteen tai suoran videotiedoston. Voit myös määrittää esikatselukuvan ja toistopainikkeen ulkoasun.

List — Lisää luettelomerkityn tai numeroidun luettelon. Muokkaa kohtia ja hallitse merkin väriä, välejä, typografiaa ja tasausta.

Button — Lisää linkkipainikkeen, jonka tekstiä, URL-osoitetta, kokoa, leveyttä, värejä, reunusta, typografiaa ja tasausta voi määrittää.

Social links — Lisää linkitetyt kuvakkeet palveluille, kuten Facebookille, Instagramille, LinkedInille, TikTokille, YouTubelle tai verkkosivustollesi.

Subscriber counter — Näyttää vahvistettujen tilaajien nykyisen määrän. Voit lisätä siirtymän, muuttaa tunnistetta sekä tyylitellä numeron ja tekstin.

Spacer — Lisää hallittua tyhjää tilaa. Työpöytä- ja mobiilivälit voidaan määrittää erikseen.

Divider — Lisää vaakasuoran viivan, jonka väriä, paksuutta, leveyttä, tyyliä, tasausta ja välejä voi määrittää.

Laskeutumissivuilla on myös kokonaisia uudelleenkäytettäviä osioita. Niitä käsitellään Landing Page guide -oppaassa.

Elementtien valitseminen ja järjestäminen

Valitse elementti napsauttamalla sitä kankaalla. Sen asetukset näkyvät oikeassa sivupalkissa.

Valitun elementin päällä tai lähellä olevilla ohjaimilla voit siirtää, monistaa tai poistaa elementin. Voit myös vetää elementin toiseen soluun tai kohtaan. Sijoitusilmaisin näyttää, mihin se lisätään.

Avaa “Layers”, kun sivulla on paljon sisäkkäisiä ruutuja, sarakkeita ja sisältölohkoja. Layers-paneeli näyttää koko rakenteen luettelona. Sen kautta voit:

• Valita elementin
• Nimetä sen uudelleen helpompaa tunnistamista varten
• Siirtää sitä ylös- tai alaspäin
• Vetää sen toiseen kohtaan
• Lukita tai avata sen lukituksen
• Monistaa sen
• Poistaa sen

Lukitseminen on hyödyllistä, kun valmis tausta, kuva tai osio halutaan suojata tahattomalta siirtämiseltä. Avaa taso, kun haluat jälleen muokata tai sijoittaa sen uudelleen.

Voit siirtyä viimeaikaisissa suunnittelumuutoksissa taakse- tai eteenpäin rakennustyökalun työkalupalkin “Undo”- ja “Redo”-toiminnoilla.

Tekstin muokkaaminen

Muokkaa sisältöä suoraan kankaalla napsauttamalla tekstielementin sisään. Tekstin työkalupalkki tarjoaa kappale- ja otsikkotyylit sekä yleiset muotoiluvaihtoehdot.

Valitusta tekstistä riippuen voit käyttää lihavointia, kursivointia, alleviivausta, yliviivausta, ala- ja yläindeksiä, tasausta, luettelomerkkejä tai numerointia, linkkejä ja emojeita. Valitun tekstin asetuksilla voit säätää typografiaa ja värejä muuttamatta kaikkia muita tekstielementtejä.

Käytä “Page settings” -kohdan yleisiä typografia-asetuksia, kun kaikkien otsikoiden, leipätekstien, linkkien tai painikkeiden pitäisi noudattaa yhtenäistä tyyliä. Käytä valitun elementin asetuksia, kun vain yhden lohkon pitäisi näyttää erilaiselta.

Signup Formin määrittäminen

Avaa asetukset valitsemalla signup form -lohko kankaalla. Käytettävissä olevat osiot kattavat edistymispalkin, tilaajalaskurin, kentät, piilotetut tunnisteet, lomakesäiliön, syöttökentät ja lähetyspainikkeen.

Tilaajakentät

Sähköpostiosoite on signup formin keskeinen kenttä. Voit myös lisätä Maildroppa-tililläsi olevia tilaajakenttiä.

Jokaisen kentän kohdalla voit muuttaa nimeä ja paikkamerkkiä, päättää, onko se pakollinen, sekä valita, näytetäänkö kentän nimi. Kenttiä voi järjestää uudelleen vetämällä tai siirtämällä ohjaimilla.

Pyydä vain tietoja, joita todella tarvitset. Lyhyemmät lomakkeet on nopeampi täyttää, kun taas lisäkentät ovat hyödyllisiä, jos tietoja käytetään segmentointiin tai personointiin.

Piilotetut tunnisteet

Piilotetut tunnisteet eivät näy kävijöille. Kun joku rekisteröityy lomakkeen kautta, Maildroppa määrittää valitut tunnisteet automaattisesti kyseiselle tilaajalle.

Tämä on hyödyllistä rekisteröitymisen lähteen tai kiinnostuksen kohteen tunnistamiseen. Esimerkiksi webinaarilomakkeelle voidaan määrittää “Webinar”-tunniste, kun taas lead magnet -lomakkeelle voidaan määrittää ladattua aihetta vastaava tunniste.

Edistymispalkki

Edistymispalkin voi poistaa käytöstä tai näyttää prosentteina tai kaksivaiheisena ilmaisimena.

Prosentti-ilmaisimessa voit muuttaa tekstiä, värejä, fonttikokoa, lihavuutta ja tasausta. Kaksivaiheisessa ilmaisimessa voit muokata molempien vaiheiden nimiä sekä valita aktiiviset ja passiiviset värit.

Edistymisen ilmaisin voi auttaa kertomaan, että lomakkeen lähettäminen on ensimmäinen vaihe ja Double Opt-in -sähköpostin vahvistaminen toinen.

Lomakkeen sisäinen tilaajalaskuri

Signup form voi näyttää vahvistettujen tilaajien nykyisen määrän ennen lähetyspainiketta tai sen jälkeen.

Voit lisätä siirtymän, kirjoittaa tunnisteen, valita sijainnin sekä säätää typografiaa ja tasausta. Siirtymä lisätään Maildroppan näyttämään vahvistettujen tilaajien määrään.

Tämä lomakelaskuri eroaa erillisestä “Subscriber counter” -sisältölohkosta. Käytä lomakeasetusta, kun luvun pitäisi liittyä suoraan lähetysalueeseen. Käytä sisältölohkoa, kun laskurin pitäisi näkyä muualla suunnittelussa.

Lomakkeen, syöttökenttien ja painikkeen suunnittelu

“Signup Form Block” -asetukset hallitsevat kenttien ympärillä olevaa säiliötä, mukaan lukien sen taustaa, reunusta, kulman pyöristystä ja välejä.

Syöttökenttien asetuksilla hallitaan kenttien taustoja, nimiä, tekstiä, paikkamerkkejä, reunuksia ja välejä. Lähetyspainikkeella on erilliset asetukset tekstille, typografialle, väreille, reunukselle, mitoille ja tasaukselle.

Voit avata kyseisen osan asetukset suoraan napsauttamalla edistymispalkkia tai lähetyspainiketta kankaalla.

Kokonaisulkoasun muuttaminen

Avaa oikean sivupalkin “Page settings” muuttaaksesi yleistä ulkoasua. Upotetuissa lomakkeissa, ponnahdusikkunoissa ja liukuikkunoissa nämä asetukset koskevat lomakekangasta eivätkä kokonaista isännöityä sivua.

Voit määrittää päätaustan, taustakuvan, enimmäisleveyden ja mobiilivälit. Ulkoasuasetukset määrittävät oletukset seuraaville:

• Leipätekstin fontti ja tekstin väri
• Linkin väri, alleviivaus ja hiiren osoituksen väri
• Otsikon fontti, väri, lihavuus, koko ja rivikorkeus
• Painikkeet
• Ruudut, reunukset, kulmien pyöristykset, välit ja sisämarginaalit
• Mobiilisivun sisämarginaalit ja kohta, jossa sarakkeet pinoutuvat

Nämä oletukset pitävät ulkoasun yhtenäisenä. Yksittäiset lohkot voivat tarvittaessa ohittaa ne.

Signup Flow'n yhdistäminen

Jokainen lomake on yhdistetty Signup Flow -toimintoon. Signup flow hallitsee tilaajan etenemistä lomakkeen lähettämisen jälkeen:

• Mitä kävijä näkee heti lomakkeen lähettämisen jälkeen
• Mikä Double Opt-in -sähköposti lähetetään
• Mitä tapahtuu, kun tilaaja vahvistaa sähköpostiosoitteensa

Avaa rakennustyökalun otsakkeen signup flow -ohjaus nähdäksesi tällä hetkellä määritetyn flown. Voit valita toisen olemassa olevan flown, muokata valittua flow’ta tai luoda uuden.

Sama signup flow voi olla usean lomakkeen käytössä. Jos muokkaat jaettua flow’ta, muutos vaikuttaa jokaiseen sitä käyttävään lomakkeeseen. Siksi Maildroppa antaa sinun valita, muokkaatko jaettua flow’ta vai luotko nykyistä lomaketta varten erillisen kopion.

Esikatselu ja tallentaminen

Tarkista koko ulkoasu ja rekisteröitymiskokemus napsauttamalla “Preview” ennen kuin julkaiset sen. Esikatselu on hyödyllinen pitkien tekstien, kuvien mittasuhteiden, kenttien järjestyksen, painikkeiden nimien ja lomakkeen yleisen tasapainon tarkistamiseen.

Kun olet valmis tallentamaan nykyisen version, napsauta upotetuissa lomakkeissa, ponnahdusikkunoissa ja liukuikkunoissa “Save changes”.

Laskeutumissivuilla käytetään yläpalkin luonnos- ja julkaisuohjaimia. Ne voidaan tallentaa julkaisematta, ja jo julkaistuun sivuun tehdyt muutokset pysyvät julkaisemattomina, kunnes julkaiset ne. Koko työnkulku selitetään oppaassa Building and Publishing a Landing Page.

Palaa tallentamisen jälkeen Signup Forms Overview -näkymään aktivoidaksesi ja upottaaksesi verkkosivustolomakkeen tai hallitaksesi julkaistua laskeutumissivua.

Jatka lomaketyyppiä koskevaan oppaaseen

Yhteinen suunnittelutyö on nyt valmis. Jatka luomasi lomakkeen tyypin mukaiseen oppaaseen:

• Laskeutumissivun rakentaminen ja julkaiseminen
• Upotetun lomakkeen rakentaminen ja upottaminen
• Ponnahdusikkunan määrittäminen ja näyttäminen
• Liukuikkunan määrittäminen ja sijoittaminen