Du bygger formularer i et særligt formularværktøj. Nu skal formularen ind på din hjemmeside. Du kan ikke bare kopiere koden, hvis din hjemmeside bruger en anden platform. Du indlejrer den. En indlejret formular vises på din side, men bor et andet sted.
Her gennemgår vi, hvordan du indlejrer formularer, hvordan iframes virker, sikkerhed på tværs af domæner og de almindelige problemer med indlejrede formularer.
Hvad er en indlejret formular?
En indlejret formular ligger på én server, men vises på en anden hjemmeside. Formularen ligger hos wemasy.dk, men vises på din side med en iframe som <iframe src="https://wemasy.com/form/abc123"></iframe>.
En iframe laver et vindue ind til en anden side. Den side indeholder formularen. For brugeren ser det ud, som om formularen er på din side. Teknisk er det en separat side i en beholder.
Sådan virker iframes
En iframe er en indlejret ramme. Den indlæser en helt separat side inde i din side. Den separate side har sin egen HTML, CSS og JavaScript. Den er lukket inde i en sandkasse, så den ikke kan komme til din side, og din side ikke kan komme til den.
Iframes giver sikker adskillelse: formularværktøjet kan ikke se data fra din side, din side kan ikke se formularens data, og hvis formularen går ned, tager den ikke din side med. Men iframes har også ulemper, blandt andet begrænset direkte kommunikation mellem siden og formularen, mulig effekt på SEO (Google indekserer måske ikke formularens indhold), langsommere indlæsning og manglende understøttelse af cookies på tværs af domæner.
Indlejr en formular med en iframe
De fleste formularbyggere giver dig en indlejringskode som <iframe src="https://wemasy.com/form/abc123" width="100%" height="600"></iframe>. Kopiér koden ind i din hjemmesides HTML, så vises formularen i beholderen. Et almindeligt problem er, at fast højde giver problemer med rulning. Er formularen længere end den højde, du har sat, ruller formularen inde i iframen (dårlig oplevelse). Du skal kende formularens præcise højde, men formularer vokser og skrumper med betinget logik, så højden er ikke fast. Løsningen er iframes, der ændrer størrelse automatisk, med postMessage til at tale sammen mellem iframen og den side, den ligger på. Når formularen ændrer størrelse, siger den til siden, at iframen skal ændre størrelse. Sidens JavaScript lytter efter beskeder fra iframen med window.addEventListener('message', (e) => { if (e.origin !== 'https://wemasy.com') return; if (e.data.type === 'resize') { iframe.height = e.data.height; } });. Formularen i iframen sender en besked med sin højde med parent.postMessage({ type: 'resize', height: form.scrollHeight }, '*');, så iframen automatisk bliver stor nok til formularens indhold.
Sikkerhed på tværs af domæner
Iframes ligger i en sandkasse af hensyn til sikkerheden. Formularen kan ikke se din sides data. Din side kan ikke se formularens data. Det er godt.
Pas på med sandbox-attributten på <iframe src="https://wemasy.com/form/abc123" sandbox="allow-same-origin allow-scripts allow-forms"></iframe>. Sandbox-attributten begrænser, hvad iframen må. Allow-same-origin lader iframen bruge cookies og sessionslager, allow-scripts lader JavaScript køre, og allow-forms lader formularen sende. Slå kun de tilladelser til i sandkassen, du faktisk har brug for. Standarden (alle tilladelser afvist) er mest sikker, men får de fleste formularer til at gå i stykker.
Indsendelse med indlejrede formularer
Når brugeren sender en formular i en iframe, sker indsendelsen inde i iframen, og formularen sender data til formularbyggerens server (ikke din server). Din server ser aldrig formulardata, for formularværktøjet gemmer dem, og du henter dem senere via en API eller en besked på e-mail. Vil du have mere kontrol, må du gribe ind i indsendelsen. Det kræver, at formularværktøjet sender en postMessage til siden med window.parent.postMessage({ type: 'submit', data: formData }, origin);, og så kan siden bruge data (sende dem til din server, vise en egen takkeside osv.).
Mobil og indlejrede formularer
På mobil kan iframes give problemer. Formularen er mindre og sværere at bruge. Iframen ændrer måske ikke størrelse rigtigt, hvis den ikke kan det automatisk.
En bedre løsning på mobil er at linke til en formular på en hel side i stedet for at indlejre en iframe. Find skærmens størrelse, og vis en linkknap på mobil, men indlejr på computer med if (window.innerWidth < 768) { document.getElementById('form-container').innerHTML = '<a href="...">Åbn formular</a>'; } else { // embed the iframe }.
Hvordan indlejrede formularer påvirker hastigheden
Iframes giver ekstra arbejde. Hver iframe er en separat HTTP-forespørgsel. Den indlæser sin egen HTML, CSS og JavaScript. Det gør din side langsommere.
Indlæs iframen sent, så den først indlæses, når brugeren ruller tæt på den, med <iframe data-src="https://..." style="display: none"></iframe> og window.addEventListener('scroll', () => { if (iframe in viewport && !iframe.src) { iframe.src = iframe.dataset.src; } });. Iframen indlæses først, når brugeren er ved at se den.
Hvornår du skal bruge indlejrede formularer, og hvornår du skal bruge noget andet
Brug indlejrede formularer, når du ikke kan tilpasse din hjemmeside (for eksempel på en lukket hjemmesidebygger) eller vil holde formularværktøjet adskilt fra din side.
Brug egne formularer, når du styrer din hjemmeside og vil have hastighed. En formular bygget på din egen teknik indlæses hurtigere og hænger bedre sammen med resten.
Brug formularer, der ligger hos værktøjet (selvstændige), når du vil have det enkelt. En formular på byggerens domæne er lettest at sætte op, men ser mindre professionel ud.
Sådan håndterer WEMASY indlejrede formularer
WEMASY-formularer kan indlejres på eksterne sider med iframes, der ændrer størrelse automatisk. Formularerne er lavet til alle enhedsstørrelser. Du kan modtage indsendelser i dit WEMASY-dashboard.
Se mulighederne for indlejring i din WEMASY-plan.