Rakennat lomakkeet erikoistuneella lomaketyökalulla. Nyt lomake pitää saada verkkosivustollesi. Et voi kopioida koodia suoraan, jos verkkosivustosi käyttää eri alustaa. Silloin upotat sen. Upotettu lomake näkyy sivustollasi, mutta sijaitsee jossain muualla.
Tässä artikkelissa kerrotaan, miten lomakkeita upotetaan, miten iframet toimivat, miten verkkotunnusten välinen tietoturva toimii ja mitä ongelmia upotetuissa lomakkeissa yleensä on.
Mikä on upotettu lomake?
Upotettu lomake on lomake, joka sijaitsee yhdellä palvelimella mutta näkyy toisella verkkosivustolla. Lomake on isännöity osoitteessa wemasy.fi, mutta näkyy sivustollasi iframen avulla, esimerkiksi <iframe src="https://wemasy.com/form/abc123"></iframe>.
Iframe luo ikkunan toiselle sivulle. Se sivu sisältää lomakkeen. Käyttäjästä näyttää siltä, että lomake on sivustollasi. Teknisesti se on erillinen sivu säiliön sisällä.
Miten iframet toimivat
Iframe on sisäkkäinen kehys. Se lataa täysin erillisen sivun oman sivusi sisään. Sillä erillisellä sivulla on oma HTML, CSS ja JavaScript. Se on eristetty, eli se ei pääse käsiksi sivuusi eikä päinvastoin.
Iframet tarjoavat tietoturvaeristyksen: lomaketyökalu ei pääse käsiksi sivusi tietoihin, sivusi ei pääse käsiksi lomakkeen tietoihin, ja jos lomake kaatuu, se ei kaada sivuasi. Iframeilla on kuitenkin haittoja, kuten rajallinen suora viestintä sivun ja lomakkeen välillä, mahdollinen SEO-vaikutus (Google ei välttämättä indeksoi lomakkeen sisältöä), hitaammat latausajat ja verkkotunnusten välisten evästeiden tuen puute.
Lomakkeen upottaminen iframella
Useimmat lomakerakentajat antavat upotuskoodin, esimerkiksi <iframe src="https://wemasy.com/form/abc123" width="100%" height="600"></iframe>. Kopioi ja liitä tämä koodi verkkosivustosi HTML:ään, niin lomake näkyy säiliön sisällä. Yleinen ongelma on, että kiinteä korkeus aiheuttaa vierityshäiriöitä. Jos lomake on korkeampi kuin asettamasi korkeus, lomake vierittyy iframen sisällä (huono kokemus). Sinun pitäisi tietää lomakkeen tarkka korkeus, mutta lomakkeet kasvavat ja kutistuvat ehdollisen logiikan mukaan, joten korkeus ei ole kiinteä. Ratkaisu on käyttää automaattisesti kokoaan muuttavia iframeja ja postMessagea viestimiseen iframen ja emosivun välillä. Kun lomakkeen koko muuttuu, se kertoo emosivulle, että iframen kokoa pitää muuttaa. Emosivun JavaScript kuuntelee iframen viestejä näin: window.addEventListener('message', (e) => { if (e.origin !== 'https://wemasy.com') return; if (e.data.type === 'resize') { iframe.height = e.data.height; } });. Iframen sisällä oleva lomake lähettää viestin korkeudestaan näin: parent.postMessage({ type: 'resize', height: form.scrollHeight }, '*');, jolloin iframe laajenee automaattisesti lomakkeen sisällön mukaan.
Verkkotunnusten välinen tietoturva
Iframet on eristetty tietoturvan vuoksi. Lomake ei pääse käsiksi sivusi tietoihin. Sivusi ei pääse käsiksi lomakkeen tietoihin. Tämä on hyvä asia.
Ole varovainen sandbox-attribuutin kanssa: <iframe src="https://wemasy.com/form/abc123" sandbox="allow-same-origin allow-scripts allow-forms"></iframe>. Sandbox-attribuutti rajoittaa, mitä iframe voi tehdä. Allow-same-origin antaa iframen käyttää evästeitä ja istuntomuistia, allow-scripts sallii JavaScriptin suorittamisen ja allow-forms sallii lomakkeen lähettämisen. Ota käyttöön vain ne sandbox-oikeudet, joita todella tarvitset. Oletus (kaikki oikeudet estetty) on turvallisin, mutta rikkoo useimmat lomakkeet.
Lomakkeen lähetys upotetuissa lomakkeissa
Kun käyttäjä lähettää iframen sisällä olevan lomakkeen, lähetys tapahtuu iframen sisällä ja lomake lähettää tiedot lomakerakentajan palvelimelle (ei sinun palvelimellesi). Palvelimesi ei koskaan näe lomaketietoja, koska lomaketyökalu tallentaa ne ja sinä haet ne myöhemmin rajapinnan kautta tai saat sähköposti-ilmoituksen. Jos tarvitset enemmän hallintaa, sinun täytyy siepata lähetys. Tämä vaatii, että lomaketyökalu lähettää postMessagen emosivulle näin: window.parent.postMessage({ type: 'submit', data: formData }, origin);. Sen jälkeen emosivu voi tehdä tiedoilla jotain (lähettää ne palvelimellesi, näyttää oman kiitossivun jne.).
Upotettujen lomakkeiden mobiilihuomiot
Mobiilissa iframet voivat olla ongelmallisia. Lomake on pienempi ja sitä on vaikeampi käyttää. Iframen koko ei välttämättä muutu oikein, jos se ei tue automaattista koon muutosta.
Parempi tapa mobiilissa on linkittää koko sivun lomakkeeseen iframen upottamisen sijaan. Tunnista näkymän koko ja näytä mobiilissa linkkipainike, mutta upota lomake tietokoneella näin: if (window.innerWidth < 768) { document.getElementById('form-container').innerHTML = '<a href="...">Avaa lomake</a>'; } else { // embed the iframe }.
Upotettujen lomakkeiden vaikutus suorituskykyyn
Iframet lisäävät kuormaa. Jokainen iframe on erillinen HTTP-pyyntö. Se lataa oman HTML:nsä, CSS:nsä ja JavaScriptinsä. Tämä hidastaa sivuasi.
Lataa iframe laiskasti: älä lataa sitä ennen kuin käyttäjä vierittää sen lähelle. Käytä <iframe data-src="https://..." style="display: none"></iframe> ja window.addEventListener('scroll', () => { if (iframe in viewport && !iframe.src) { iframe.src = iframe.dataset.src; } });. Iframe latautuu vasta, kun käyttäjä on näkemässä sen.
Milloin upotetut lomakkeet ja milloin vaihtoehdot
Käytä upotettuja lomakkeita, kun et voi muokata verkkosivustoasi (esimerkiksi suljetulla isännöidyllä sivustonrakentajalla) tai haluat pitää lomaketyökalun erillään sivustostasi.
Käytä natiiveja lomakkeita, kun hallitset verkkosivustoasi ja haluat suorituskykyä. Oman teknologiapinosi päälle rakennettu lomake latautuu nopeammin ja integroituu paremmin.
Käytä isännöityjä (erillisiä) lomakkeita, kun haluat yksinkertaisuutta. Rakentajan verkkotunnuksella oleva lomake on helpoin ottaa käyttöön, mutta näyttää vähemmän ammattimaiselta.
Näin WEMASY hoitaa upotetut lomakkeet
WEMASY-lomakkeet voi upottaa ulkoisille sivustoille iframeilla, jotka tukevat automaattista koon muutosta. Lomakkeet on optimoitu kaikille laitekooille. Voit vastaanottaa lähetykset WEMASY-hallintapaneelissasi, sähköpostitse tai webhookien kautta.
Katso upotusvaihtoehdot WEMASY-paketistasi.