Az űrlapokat egy specializált űrlapeszközben építed. Most ezt az űrlapot a weboldaladra kell tenned. Nem tudod egyszerűen kimásolni és beilleszteni a kódot, ha a weboldalad más platformot használ. Beágyazod. A beágyazott űrlap megjelenik az oldaladon, de máshol él.
Ez a cikk bemutatja, hogyan ágyazhatsz be űrlapokat, hogyan működnek az iframe-ek, hogyan működik a domainek közötti biztonság, és melyek a beágyazott űrlapok gyakori problémái.
Mi az a beágyazott űrlap?
A beágyazott űrlap olyan űrlap, amely az egyik szerveren él, de egy másik weboldalon jelenik meg. Az űrlap a wemasy.hu oldalon van tárolva, de az oldaladon iframe-mel jelenik meg, például így: <iframe src="https://wemasy.com/form/abc123"></iframe>.
Az iframe ablakot nyit egy másik oldalra. Ez az oldal tartalmazza az űrlapot. A felhasználónak úgy tűnik, hogy az űrlap az oldaladon van. Technikailag külön oldal egy tárolón belül.
Hogyan működnek az iframe-ek
Az iframe beágyazott keret. Egy teljesen különálló oldalt tölt be a te oldaladon belül. Ennek a különálló oldalnak saját HTML-je, CSS-e és JavaScriptje van. Homokozóban fut, vagyis nem fér hozzá az oldaladhoz, és fordítva.
Az iframe-ek biztonsági elszigetelést adnak: az űrlapeszköz nem fér hozzá az oldalad adataihoz, az oldalad nem fér hozzá az űrlapadatokhoz, és ha az űrlap összeomlik, nem omlasztja össze az oldaladat. Az iframe-eknek azonban vannak hátrányaik is: korlátozott közvetlen kommunikáció az oldal és az űrlap között, lehetséges SEO-hatás (a Google nem biztos, hogy indexeli az űrlap tartalmát), lassabb betöltés, és a domainek közötti sütik támogatásának hiánya.
Űrlap beágyazása iframe-mel
A legtöbb űrlapépítő beágyazási kódot ad, például: <iframe src="https://wemasy.com/form/abc123" width="100%" height="600"></iframe>. Másold és illeszd be ezt a kódot a weboldalad HTML-jébe, hogy az űrlap megjelenjen a tárolón belül. Gyakori probléma, hogy a rögzített magasság görgetési gondokat okoz. Ha az űrlap hosszabb, mint a beállított magasság, az űrlap az iframe-en belül görgetődik (rossz élmény). Pontosan kell tudnod az űrlap magasságát, de az űrlapok a feltételes logika szerint nőnek és zsugorodnak, ezért a magasság nem rögzített. A megoldás az automatikusan átméreteződő iframe-ek használata a postMessage-gel az iframe és a szülőoldal közötti kommunikációhoz. Amikor az űrlap mérete változik, szól a szülőoldalnak, hogy méretezze át az iframe-et. A szülőoldal JavaScriptje figyeli az iframe üzeneteit ezzel: window.addEventListener('message', (e) => { if (e.origin !== 'https://wemasy.com') return; if (e.data.type === 'resize') { iframe.height = e.data.height; } });. Az iframe-en belüli űrlap üzenetet küld a magasságával ezzel: parent.postMessage({ type: 'resize', height: form.scrollHeight }, '*');, így az iframe automatikusan kitágul az űrlap tartalmához.
Domainek közötti biztonság
Az iframe-ek biztonsági okból homokozóban futnak. Az űrlap nem fér hozzá az oldalad adataihoz. Az oldalad nem fér hozzá az űrlap adataihoz. Ez jó.
Légy óvatos a sandbox attribútummal ezen: <iframe src="https://wemasy.com/form/abc123" sandbox="allow-same-origin allow-scripts allow-forms"></iframe>. A sandbox attribútum korlátozza, mit tehet az iframe. Az allow-same-origin lehetővé teszi, hogy az iframe hozzáférjen a sütikhez és a munkamenet-tárhelyhez, az allow-scripts engedi a JavaScript futását, az allow-forms pedig az űrlap beküldését. Csak azokat a sandbox engedélyeket kapcsold be, amelyekre valóban szükséged van, mert az alapértelmezett (minden engedély megtagadva) a legbiztonságosabb, de a legtöbb űrlapot elrontja.
Űrlapbeküldés beágyazott űrlapokkal
Amikor a felhasználó beküld egy iframe-en belüli űrlapot, a beküldés az iframe-en belül történik, és az űrlap az űrlapépítő szerverére küldi az adatokat (nem a te szerveredre). A szervered soha nem látja az űrlapadatokat, mert az űrlapeszköz tárolja őket, te pedig később egy API-n vagy e-mail-értesítésen keresztül kéred le. Ha nagyobb kontrollra van szükséged, el kell fognod a beküldést. Ehhez az űrlapeszköznek postMessage-t kell küldenie a szülőoldalnak ezzel: window.parent.postMessage({ type: 'submit', data: formData }, origin);, aztán a szülőoldal tehet valamit az adattal (elküldheti a szervereddre, megjeleníthet egyedi köszönő oldalt stb.).
Mobilos szempontok beágyazott űrlapoknál
Mobilon az iframe-ek problémásak lehetnek. Az űrlap kisebb, és nehezebb használni. Az iframe nem biztos, hogy megfelelően átméreteződik, ha nem támogatja az automatikus átméretezést.
Mobilon jobb megközelítés, ha iframe beágyazása helyett teljes oldalas űrlapra hivatkozol. Érzékeld a nézetablak méretét, és mobilon mutass hivatkozásgombot, asztali gépen pedig ágyazd be, ezzel: if (window.innerWidth < 768) { document.getElementById('form-container').innerHTML = '<a href="...">Űrlap megnyitása</a>'; } else { // az iframe beágyazása }.
A beágyazott űrlapok teljesítményhatásai
Az iframe-ek többletterhelést jelentenek. Minden iframe külön HTTP-kérés. Betölti a saját HTML-jét, CSS-ét és JavaScriptjét. Ez lassítja az oldaladat.
Az iframe-et késleltetve töltsd be, vagyis ne töltsd be, amíg a felhasználó a közelébe nem görget, ezzel: <iframe data-src="https://..." style="display: none"></iframe> és window.addEventListener('scroll', () => { if (iframe in viewport && !iframe.src) { iframe.src = iframe.dataset.src; } });. Az iframe csak akkor töltődik be, amikor a felhasználó már-már meglátja.
Mikor használj beágyazott űrlapokat, és mikor alternatívákat
Használj beágyazott űrlapokat, ha nem tudod testre szabni a weboldaladat (például egy zárt, tárhelyszolgáltatós weboldalépítőn), vagy ha külön akarod tartani az űrlapeszközt az oldaladtól.
Használj natív űrlapokat, ha te irányítod a weboldaladat, és teljesítményt akarsz. A saját technológiai stacken épített űrlap gyorsabban töltődik be, és jobban integrálódik.
Használj tárolt (önálló) űrlapokat, ha egyszerűséget szeretnél. Az építő domainjén lévő űrlapot a legkönnyebb beállítani, de kevésbé professzionálisnak látszik.
Hogyan kezeli a WEMASY a beágyazott űrlapokat
A WEMASY űrlapjai beágyazhatók külső oldalakra iframe-ekkel, automatikus átméretezés támogatásával. Az űrlapok minden eszközméretre optimalizáltak. A beküldéseket megkaphatod a WEMASY vezérlőpultodban, e-mailben vagy webhookokon keresztül.
Nézd meg a beágyazási lehetőségeket a WEMASY csomagodban.