Formuláře vytváříte ve specializovaném nástroji. Teď ho potřebujete dostat na svůj web. Kód nemůžete jen zkopírovat, pokud váš web běží na jiné platformě. Formulář tedy vložíte. Vložený formulář se zobrazuje na vašem webu, ale žije jinde.
Tento článek ukazuje, jak formuláře vkládat, jak fungují iframe, jak funguje zabezpečení mezi doménami a jaké jsou časté problémy vložených formulářů.
Co je vložený formulář?
Vložený formulář je formulář, který běží na jednom serveru, ale zobrazuje se na jiném webu. Formulář je hostovaný na wemasy.cz a na vašem webu se zobrazí pomocí iframe, například <iframe src="https://wemasy.com/form/abc123"></iframe>.
Iframe vytvoří okno do jiné stránky. Ta stránka obsahuje formulář. Uživateli to vypadá, jako by formulář byl na vašem webu. Technicky je to samostatná stránka uvnitř kontejneru.
Jak fungují iframe
Iframe je vložený rámec. Načte úplně samostatnou stránku uvnitř vaší stránky. Ta samostatná stránka má vlastní HTML, CSS a JavaScript. Je izolovaná (sandbox), takže nemůže přistupovat k vaší stránce a naopak.
Iframe nabízejí bezpečnostní izolaci: nástroj pro formuláře se nedostane k datům vaší stránky, vaše stránka se nedostane k datům formuláře a pokud se formulář zhroutí, nezhroutí vaši stránku. Iframe ale mají i nevýhody, mezi které patří omezená přímá komunikace mezi stránkou a formulářem, možný dopad na SEO (Google nemusí obsah formuláře indexovat), pomalejší načítání a chybějící podpora cookies napříč doménami.
Vložení formuláře pomocí iframe
Většina tvůrců formulářů poskytuje kód pro vložení, například <iframe src="https://wemasy.com/form/abc123" width="100%" height="600"></iframe>. Zkopírujte tento kód do HTML svého webu a formulář se zobrazí uvnitř kontejneru. Častý problém je, že pevná výška způsobuje potíže s posouváním. Pokud je formulář delší než výška, kterou jste nastavili, formulář se posouvá uvnitř iframe (špatný zážitek). Musíte znát přesnou výšku formuláře, jenže formuláře se podle podmíněné logiky zvětšují a zmenšují, takže výška není pevná. Řešením je iframe s automatickou změnou velikosti, které pomocí postMessage komunikují s nadřazenou stránkou. Když formulář změní velikost, sdělí to nadřazené stránce, která iframe upraví. JavaScript nadřazené stránky poslouchá zprávy z iframe pomocí window.addEventListener('message', (e) => { if (e.origin !== 'https://wemasy.com') return; if (e.data.type === 'resize') { iframe.height = e.data.height; } });. Formulář uvnitř iframe pošle zprávu se svou výškou pomocí parent.postMessage({ type: 'resize', height: form.scrollHeight }, '*');, takže se iframe automaticky roztáhne podle obsahu formuláře.
Zabezpečení mezi doménami
Iframe jsou z bezpečnostních důvodů izolované. Formulář se nedostane k datům vaší stránky. Vaše stránka se nedostane k datům formuláře. To je dobře.
Buďte opatrní s atributem sandbox u <iframe src="https://wemasy.com/form/abc123" sandbox="allow-same-origin allow-scripts allow-forms"></iframe>. Atribut sandbox omezuje, co iframe smí. Allow-same-origin umožní iframe přístup k cookies a úložišti relace, allow-scripts umožní běh JavaScriptu a allow-forms umožní odeslání formuláře. Povolte jen oprávnění, která skutečně potřebujete, protože výchozí stav (všechna oprávnění zakázána) je nejbezpečnější, ale rozbije většinu formulářů.
Odeslání vložených formulářů
Když uživatel odešle formulář uvnitř iframe, odeslání proběhne uvnitř iframe a formulář pošle data na server tvůrce formulářů (ne na váš server). Váš server data formuláře nikdy neuvidí, protože je uloží nástroj pro formuláře a vy si je později vyzvednete přes API nebo e-mailové upozornění. Pokud potřebujete větší kontrolu, musíte odeslání zachytit. K tomu musí nástroj pro formuláře poslat nadřazené stránce zprávu postMessage pomocí window.parent.postMessage({ type: 'submit', data: formData }, origin);, a nadřazená stránka pak může s daty něco udělat (poslat je na váš server, zobrazit vlastní stránku s poděkováním a podobně).
Mobilní zařízení a vložené formuláře
Na mobilu mohou být iframe problematické. Formulář je menší a hůř se ovládá. Iframe se nemusí správně přizpůsobit, pokud nepodporuje automatickou změnu velikosti.
Lepší postup na mobilu je odkázat na formulář na celou stránku místo vložení iframe. Zjistěte velikost zobrazení a na mobilu ukažte odkaz, na počítači formulář vložte pomocí if (window.innerWidth < 768) { document.getElementById('form-container').innerHTML = '<a href="...">Open form</a>'; } else { // embed the iframe }.
Dopad vložených formulářů na výkon
Iframe přidávají režii. Každý iframe je samostatný požadavek HTTP. Načítá vlastní HTML, CSS a JavaScript. To zpomaluje vaši stránku.
Iframe načítejte líně, tedy až když se k němu uživatel posune blízko, pomocí <iframe data-src="https://..." style="display: none"></iframe> a window.addEventListener('scroll', () => { if (iframe in viewport && !iframe.src) { iframe.src = iframe.dataset.src; } });. Iframe se načte, až když ho uživatel vzápětí uvidí.
Kdy použít vložené formuláře a kdy alternativy
Vložené formuláře použijte, když svůj web nemůžete upravovat (například na uzavřeném hostovaném tvůrci webů) nebo když chcete mít nástroj pro formuláře oddělený od webu.
Nativní formuláře použijte, když svůj web ovládáte a záleží vám na výkonu. Formulář postavený na vašem vlastním technologickém základu se načítá rychleji a lépe se integruje.
Hostované (samostatné) formuláře použijte, když chcete jednoduchost. Formulář na doméně tvůrce se nastavuje nejsnáz, ale vypadá méně profesionálně.
Jak WEMASY zvládá vložené formuláře
Formuláře WEMASY lze vkládat na externí weby pomocí iframe s podporou automatické změny velikosti. Formuláře jsou optimalizované pro všechny velikosti zařízení. Odeslání můžete dostávat v administraci WEMASY, e-mailem nebo přes webhooky.
Možnosti vložení uvidíte ve svém tarifu WEMASY.