Je bouwt formulieren in een gespecialiseerde formuliertool. Nu moet dat formulier op je website komen. Je kunt de code niet zomaar kopiëren en plakken als je website een ander platform gebruikt. Je sluit het formulier in. Een ingesloten formulier verschijnt op je site, maar staat ergens anders.
In dit artikel lees je hoe je formulieren insluit, hoe iframes werken, hoe beveiliging tussen domeinen werkt en welke problemen vaak voorkomen bij ingesloten formulieren.
Wat is een ingesloten formulier?
Een ingesloten formulier is een formulier dat op de ene server staat, maar op een andere website verschijnt. Het formulier wordt gehost op wemasy.nl, maar verschijnt op jouw site met een iframe zoals <iframe src="https://wemasy.com/form/abc123"></iframe>.
Het iframe maakt een venster naar een andere pagina. Die pagina bevat het formulier. Voor de gebruiker lijkt het alsof het formulier op jouw site staat. Technisch gezien is het een aparte pagina in een container.
Hoe iframes werken
Een iframe is een inline frame. Het laadt een volledig aparte pagina binnen je pagina. Die aparte pagina heeft zijn eigen HTML, CSS en JavaScript. Het is afgeschermd (sandbox), wat betekent dat het geen toegang heeft tot jouw pagina en andersom.
Iframes bieden beveiligingsisolatie: de formuliertool kan niet bij de gegevens van je pagina, je pagina kan niet bij de formuliergegevens en als het formulier crasht, crasht je pagina niet. Iframes hebben ook nadelen, zoals beperkte directe communicatie tussen de pagina en het formulier, mogelijk effect op SEO (Google indexeert de inhoud van het formulier misschien niet), langzamere laadtijden en geen ondersteuning voor cookies tussen domeinen.
Een formulier insluiten met een iframe
De meeste formulierbouwers geven een insluitcode zoals <iframe src="https://wemasy.com/form/abc123" width="100%" height="600"></iframe>. Kopieer en plak deze code in de HTML van je website om het formulier in de container te tonen. Een veelvoorkomend probleem is dat een vaste hoogte scrollproblemen geeft. Is het formulier langer dan de hoogte die je hebt ingesteld, dan scrolt het formulier binnen het iframe (slechte ervaring). Je moet de exacte hoogte van het formulier weten, maar formulieren worden groter en kleiner door voorwaardelijke logica, dus de hoogte staat niet vast. De oplossing is een iframe dat zichzelf aanpast, met postMessage voor de communicatie tussen het iframe en de bovenliggende pagina. Verandert het formulier van formaat, dan meldt het dat aan de bovenliggende pagina, die het iframe aanpast. De JavaScript van de bovenliggende pagina luistert naar berichten van het iframe met window.addEventListener('message', (e) => { if (e.origin !== 'https://wemasy.com') return; if (e.data.type === 'resize') { iframe.height = e.data.height; } });. Het formulier in het iframe stuurt een bericht met zijn hoogte met parent.postMessage({ type: 'resize', height: form.scrollHeight }, '*');, zodat het iframe automatisch meegroeit met de inhoud van het formulier.
Beveiliging tussen domeinen
Iframes zijn om veiligheidsredenen afgeschermd. Het formulier kan niet bij de gegevens van je pagina. Je pagina kan niet bij de gegevens van het formulier. Dat is goed.
Wees voorzichtig met het sandbox-attribuut op <iframe src="https://wemasy.com/form/abc123" sandbox="allow-same-origin allow-scripts allow-forms"></iframe>. Het sandbox-attribuut beperkt wat het iframe mag doen. Met allow-same-origin krijgt het iframe toegang tot cookies en sessieopslag, met allow-scripts mag JavaScript draaien en met allow-forms kan het formulier worden verstuurd. Zet alleen de sandbox-rechten aan die je echt nodig hebt: de standaard (alle rechten geweigerd) is het veiligst, maar laat de meeste formulieren niet werken.
Formulieren versturen vanuit ingesloten formulieren
Verstuurt de gebruiker een formulier in een iframe, dan gebeurt dat binnen het iframe en stuurt het formulier de gegevens naar de server van de formulierbouwer (niet naar jouw server). Jouw server ziet de formuliergegevens nooit: de formuliertool bewaart ze en jij haalt ze later op via een API of e-mailmelding. Heb je meer controle nodig, dan moet je het versturen onderscheppen. Daarvoor moet de formuliertool een postMessage naar de bovenliggende pagina sturen met window.parent.postMessage({ type: 'submit', data: formData }, origin);, waarna de bovenliggende pagina iets met de gegevens kan doen (naar je server sturen, een eigen bedankpagina tonen, enzovoort).
Mobiel en ingesloten formulieren
Op mobiel kunnen iframes lastig zijn. Het formulier is kleiner en moeilijker te bedienen. Het iframe past zich mogelijk niet goed aan als het automatisch aanpassen niet ondersteunt.
Een betere aanpak op mobiel is linken naar een formulier op een hele pagina in plaats van een iframe in te sluiten. Bepaal de grootte van het scherm en toon op mobiel een linkknop, maar sluit het formulier op een computer wel in, met if (window.innerWidth < 768) { document.getElementById('form-container').innerHTML = '<a href="...">Open form</a>'; } else { // embed the iframe }.
Gevolgen van ingesloten formulieren voor de snelheid
Iframes kosten extra. Elk iframe is een apart HTTP-verzoek. Het laadt zijn eigen HTML, CSS en JavaScript. Dat maakt je pagina trager.
Laad het iframe uitgesteld, door het pas te laden als de gebruiker er dichtbij scrolt, met <iframe data-src="https://..." style="display: none"></iframe> en window.addEventListener('scroll', () => { if (iframe in viewport && !iframe.src) { iframe.src = iframe.dataset.src; } });. Het iframe laadt dan alleen als de gebruiker het straks gaat zien.
Wanneer ingesloten formulieren, en wanneer alternatieven
Gebruik ingesloten formulieren als je je website niet kunt aanpassen (bijvoorbeeld bij sommige websitebouwers) of als je de formuliertool gescheiden wilt houden van je site.
Gebruik eigen formulieren als je je website zelf beheert en snelheid wilt. Een formulier gebouwd op je eigen techniek laadt sneller en werkt beter samen met de rest.
Gebruik gehoste (zelfstandige) formulieren als je eenvoud wilt. Een formulier op het domein van de bouwer is het makkelijkst in te stellen, maar ziet er minder professioneel uit.
Hoe WEMASY omgaat met ingesloten formulieren
WEMASY-formulieren kun je op externe sites insluiten met iframes die zichzelf aanpassen. Formulieren zijn geoptimaliseerd voor alle apparaatformaten. Je ontvangt inzendingen in je WEMASY-dashboard, per e-mail of via webhooks.
Bekijk de insluitopties in jouw WEMASY-abonnement.