Luo ja upota liittymislomakkeita

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

Upotettu lomake sijoitetaan suoraan verkkosivustosi olemassa olevan sivun sisään. Se pysyy osana ympäröivää sisältöä sen sijaan, että näkyisi sen yläpuolella.

Upotetut lomakkeet sopivat hyvin blogiartikkeleihin, oman verkkosivustosi laskeutumissivuille, uutiskirjeosioihin, sivupalkkeihin ja alatunnisteisiin. Lomakekoodin sijoituspaikka määrittää, missä lomake näkyy.

Tässä oppaassa käsitellään vain Upotettuihin lomakkeisiin liittyviä vaiheita. Yleiset visuaaliset muokkaustoiminnot selitetään pääoppaassa Liittymislomakkeiden rakentaja.

Upotetun lomakkeen luominen

Avaa ”Signup Forms”, napsauta ”Create Form” ja valitse ”Embedded Form”. Anna lomakkeelle selkeä sisäinen nimi ja jatka rakentajaan.

Voit myös muokata olemassa olevaa lomaketta napsauttamalla sen nimeä Liittymislomakkeiden yleisnäkymässä.

Sisäinen nimi ei näy vierailijoille automaattisesti. Nimeä lomake sen sijainnin tai tarkoituksen mukaan, esimerkiksi ”Homepage Newsletter”, ”Blog Footer” tai ”Product Updates”.

Aloitusmallin valitseminen

Upotetut lomakkeet sisältävät tyhjän lomakkeen, vakiolomakkeen ja neljä suunniteltua mallia:

• Calm note
• Coupon strip
• Dark editorial
• Minimal blue

Valitse malli, joka sopii parhaiten sen verkkosivuston tilaan ja sävyyn, jossa lomake näkyy. Kaikkia aloitusmalleja voi muuttaa kokonaan valinnan jälkeen.

Upotetun lomakkeen suunnittelu

Järjestä lomake ”Layout”- ja ”Content”-toiminnoilla. Upotettu lomake voi sisältää liittymislomakkeen sekä sitä tukevia tekstejä, kuvia, luetteloita, painikkeita, sosiaalisen median linkkejä, tilaajalaskurin, tyhjää tilaa tai erottimia.

Kapeassa sivupalkissa tai alatunnisteessa yksipalstainen rakenne on yleensä helppolukuisin. Leveämmässä sivuosiossa kaksipalstainen asettelu voi sijoittaa lyhyen selityksen tai kuvan kenttien viereen.

Valitse liittymislomakeelementti määrittääksesi tilaajakentät, pakolliset kentät, tunnisteet, piilotetut tagit, edistymisen ilmaisimen ja valinnaisen tilaajalaskurin. Tämän jälkeen voit muotoilla lomakesäilön, kentät ja lähetyspainikkeen erikseen.

Avaa ”Page settings” vaihtaaksesi Upotetun lomakkeen työalueen taustan ja yleiset suunnittelun oletusasetukset. Huomioi ympäröivä verkkosivusto. Läpinäkyvä tai yksinkertainen tausta sulautuu usein luonnollisemmin, kun taas kontrastinen tausta auttaa liittymistarjousta erottumaan.

Täydelliset ohjeet asetteluista, sisällöstä, tasoista, kentistä, tageista, typografiasta ja ulkoasusta löytyvät oppaasta Liittymislomakkeiden rakentajan käyttäminen.

Liittymisprosessin yhdistäminen

Tarkista rakentajan otsakkeessa olevan liittymisprosessin ohjaimen avulla, mitä lähetyksen jälkeen tapahtuu, mikä Double Opt-in -sähköposti lähetetään ja mitä vierailija näkee vahvistamisen jälkeen.

Voit valita olemassa olevan prosessin, muokata määritettyä prosessia tai luoda uuden. Jos valittu prosessi on jaettu muiden lomakkeiden kanssa, muista, että sen muokkaaminen voi vaikuttaa myös näihin lomakkeisiin.

Esikatselu ja tallentaminen

Napsauta ”Preview” tarkistaaksesi koko lomakkeen ennen sen sijoittamista verkkosivustollesi. Tarkista kenttien järjestys, tunnisteet, virhetilalle varattu tila, painikkeen teksti ja tukevan sisällön määrä.

Napsauta ”Save changes” tallentaaksesi nykyisen version. Palaa Liittymislomakkeiden yleisnäkymään, kun olet valmis upottamaan lomakkeen.

Lomakkeen aktivointi

Upotetun lomakkeen on oltava aktiivinen, ennen kuin sen julkista koodia voi käyttää.

Jos lomake ei ole aktiivinen, avaa sen kolmen pisteen toimintovalikko Liittymislomakkeiden yleisnäkymässä ja valitse ”Activate”. Aktiivisessa lomakkeessa näkyy ”Show Code Snippet” -toiminto.

Poista lomake käytöstä, kun sen ei enää pidä olla saatavilla verkkosivustollasi. Käytöstä poistaminen vie lomakkeen offline-tilaan poistamatta sen ulkoasua tai aiempia raporttitietoja.

JavaScript-koodin kopioiminen

Napsauta ”Show Code Snippet” ja avaa ”JavaScript”-välilehti. Maildroppa tarjoaa lyhyen skriptin, joka sisältää lomakkeen yksilöllisen tunnisteen.

Koodi noudattaa tätä rakennetta:

<script async src="https://form.maildroppa.com/md-form-loader.js" data-md-form="[form-id]"></script>

Kopioi koko koodi muuttamatta skriptin osoitetta tai lomakkeen tunnistetta.

JavaScript-vaihtoehto lataa nykyisen tallennetun lomakkeen Maildroppa-lomakeympäristön kautta. Kun myöhemmin muokkaat ja tallennat saman lomakkeen Maildroppassa, olemassa oleva katkelma viittaa edelleen samaan lomakkeen tunnisteeseen. Sinun ei tarvitse luoda uutta lomaketta vain muuttaaksesi sen tekstiä tai ulkoasua.

Lomakkeen lisääminen verkkosivustollesi

Liitä skripti siihen sivun kohtaan, jossa Upotetun lomakkeen tulee näkyä.

Tarkat vaiheet riippuvat verkkosivustosi järjestelmästä. Sivunrakentajassa tai sisällönhallintajärjestelmässä käytä lohkoa, joka hyväksyy mukautettua HTML- tai skriptikoodia. Mukautetulla verkkosivustolla lisää skripti asiaankuuluvaan malliin tai sivun merkintöihin.

Jotkin verkkosivustoeditorit poistavat skriptitunnisteet turvallisuussyistä. Jos lomake ei näy sivun julkaisemisen jälkeen, tarkista ensin, säilyttikö editori koko Maildroppa-skriptin. Saatat joutua käyttämään järjestelmän erillistä mukautetun koodin aluetta tai pyytämään apua verkkosivustoa hallinnoivalta henkilöltä.

Älä liitä samaa Upotetun lomakkeen katkelmaa samalle sivulle useita kertoja, ellet tarkoituksella halua samaa lomaketta useaan sijaintiin ja ole testannut kyseistä asetusta.

HTML-välilehden käyttäminen

”HTML”-välilehti tarjoaa luodun lomakkeen merkinnät. Tämä vaihtoehto on tarkoitettu mukautettuihin toteutuksiin, joissa haluat työskennellä suoraan renderöidyn HTML:n kanssa.

Kopioi koko merkintä, jos valitset tämän menetelmän. Koska verkkosivustosi tyylit ja toteutus voivat vaikuttaa mukautettuun HTML-integraatioon, testaa sen kentät, validointi, lähetys ja vahvistusprosessi huolellisesti.

Tavallisessa Maildroppan hallinnoidussa lomakkeessa JavaScript-katkelma on lyhyempi integraatio, joka lataa nykyisen julkisen lomakeasetuksen tunnisteen perusteella.

Upotetun lomakkeen testaaminen

Julkaise verkkosivuston sivu, joka sisältää koodin, tai avaa sen esikatselu. Testaa lomake sen jälkeen kuten vierailija:

1. Tarkista, että lomake näkyy oikeassa kohdassa.
2. Katso sivua leveällä ja kapealla näytöllä.
3. Täytä kaikki pakolliset kentät.
4. Lähetä lomake ja tarkista vastaus.
5. Avaa Double Opt-in -sähköposti.
6. Vahvista osoite ja tarkista lopullinen vastaus.
7. Varmista, että tilaaja ja mahdolliset piilotetut tagit näkyvät Maildroppassa oikein.

Jos lomake on verkkosivuston säilöä leveämpi, säädä rakentajassa lomakkeen leveyttä, palstojen asettelua, sisämarginaalia tai mobiilin pinoamisasetuksia. Älä korjaa asetteluongelmia muuttamalla luotua Maildroppa-koodia.

Upotetun lomakkeen päivittäminen

Avaa sama lomake Maildroppassa, tee muutokset, esikatsele ne ja napsauta ”Save changes”. Verkkosivustollasi oleva JavaScript-katkelma käyttää edelleen samaa lomakkeen tunnistetta ja lataa tallennetun julkisen asetuksen.

Jos lomake on poistettava väliaikaisesti, poista se käytöstä Liittymislomakkeiden yleisnäkymässä. Jos sitä ei enää tarvita, poista katkelma myös verkkosivustolta, jotta sivulle ei jää käyttämätöntä koodia.