Du bygger formulär i ett specialiserat formulärverktyg. Nu behöver du få in formuläret på din webbplats. Du kan inte kopiera och klistra in koden om din webbplats använder en annan plattform. Du bäddar in det. Ett inbäddat formulär visas på din webbplats men finns någon annanstans.
Den här artikeln går igenom hur du bäddar in formulär, hur iframes fungerar, säkerhet mellan domäner och vanliga problem med inbäddade formulär.
Vad är ett inbäddat formulär?
Ett inbäddat formulär är ett formulär som finns på en server men visas på en annan webbplats. Formuläret ligger på wemasy.se men visas på din webbplats med en iframe som <iframe src="https://wemasy.com/form/abc123"></iframe>.
Iframen skapar ett fönster in till en annan sida. Den sidan innehåller formuläret. För användaren ser det ut som att formuläret ligger på din webbplats. Tekniskt är det en separat sida i en behållare.
Så fungerar iframes
En iframe är en inbäddad ram. Den laddar en helt separat sida inuti din sida. Den separata sidan har egen HTML, CSS och JavaScript. Den är isolerad, vilket betyder att den inte kan komma åt din sida och tvärtom.
Iframes ger säkerhet genom isolering: formulärverktyget kommer inte åt din sidas data, din sida kommer inte åt formulärets data, och om formuläret kraschar kraschar inte din sida. Iframes har dock nackdelar, bland annat begränsad direkt kommunikation mellan sidan och formuläret, möjlig påverkan på SEO (Google kanske inte indexerar formulärets innehåll), långsammare laddning och att cookies inte stöds mellan domäner.
Bädda in ett formulär med en iframe
De flesta formulärbyggare ger en inbäddningskod som <iframe src="https://wemasy.com/form/abc123" width="100%" height="600"></iframe>. Kopiera och klistra in koden i din webbplats HTML för att visa formuläret i behållaren. Ett vanligt problem är att fast höjd ger problem med scrollning. Är formuläret längre än den höjd du angett scrollar formuläret inuti iframen (dålig upplevelse). Du måste känna till formulärets exakta höjd, men formulär växer och krymper med villkorlig logik, så höjden är inte fast. Lösningen är att använda iframes som ändrar storlek automatiskt, med postMessage för kommunikation mellan iframen och föräldrasidan. När formuläret ändrar storlek talar det om för föräldrasidan att iframen ska ändra storlek. Föräldrasidans JavaScript lyssnar efter meddelanden från iframen med window.addEventListener('message', (e) => { if (e.origin !== 'https://wemasy.com') return; if (e.data.type === 'resize') { iframe.height = e.data.height; } });. Formuläret i iframen skickar ett meddelande med sin höjd med parent.postMessage({ type: 'resize', height: form.scrollHeight }, '*');, så att iframen automatiskt växer så att formulärets innehåll får plats.
Säkerhet mellan domäner
iframes är isolerade av säkerhetsskäl. Formuläret kommer inte åt din sidas data. Din sida kommer inte åt formulärets data. Det är bra.
Var försiktig med attributet sandbox på <iframe src="https://wemasy.com/form/abc123" sandbox="allow-same-origin allow-scripts allow-forms"></iframe>. Attributet sandbox begränsar vad iframen får göra. Allow-same-origin låter iframen komma åt cookies och sessionslagring, allow-scripts låter JavaScript köras och allow-forms låter formuläret skickas. Aktivera bara de behörigheter du verkligen behöver, eftersom standardläget (alla behörigheter nekade) är säkrast men får de flesta formulär att sluta fungera.
Inskick med inbäddade formulär
När användaren skickar ett formulär i en iframe sker inskicket inuti iframen och formuläret skickar data till formulärbyggarens server (inte din). Din server ser aldrig formulärdata, eftersom formulärverktyget lagrar dem och du hämtar dem senare via ett API eller en e-postnotis. Behöver du mer kontroll måste du fånga inskicket. Det kräver att formulärverktyget skickar ett postMessage till föräldrasidan med window.parent.postMessage({ type: 'submit', data: formData }, origin);, och sedan kan föräldrasidan göra något med data (skicka dem till din server, visa en egen tacksida och så vidare).
Att tänka på för inbäddade formulär på mobil
På mobil kan iframes vara problematiska. Formuläret är mindre och svårare att använda. Iframen kanske inte ändrar storlek ordentligt om den inte stöder automatisk storleksändring.
Ett bättre sätt på mobil är att länka till ett formulär på hela sidan i stället för att bädda in en iframe. Upptäck skärmstorleken och visa en länkknapp på mobil, men bädda in på dator med if (window.innerWidth < 768) { document.getElementById('form-container').innerHTML = '<a href="...">Öppna formuläret</a>'; } else { // embed the iframe }.
Prestandapåverkan av inbäddade formulär
Iframes ger extra belastning. Varje iframe är en separat HTTP-förfrågan. Den laddar sin egen HTML, CSS och JavaScript. Det gör sidan långsammare.
Ladda iframen lat genom att inte ladda den förrän användaren scrollar nära den, med <iframe data-src="https://..." style="display: none"></iframe> och window.addEventListener('scroll', () => { if (iframe in viewport && !iframe.src) { iframe.src = iframe.dataset.src; } });. Iframen laddas bara när användaren är på väg att se den.
När du ska använda inbäddade formulär och när alternativ
Använd inbäddade formulär när du inte kan anpassa din webbplats (till exempel i en sluten, värdbaserad webbplatsbyggare) eller vill hålla formulärverktyget skilt från din webbplats.
Använd inbyggda formulär när du styr din webbplats och vill ha bra prestanda. Ett formulär byggt i din egen teknik laddas snabbare och integreras bättre.
Använd värdbaserade (fristående) formulär när du vill ha enkelhet. Ett formulär på byggarens domän är lättast att sätta upp men ser mindre professionellt ut.
Så hanterar WEMASY inbäddade formulär
WEMASY-formulär kan bäddas in på externa webbplatser med iframes som ändrar storlek automatiskt. Formulären är optimerade för alla enhetsstorlekar. Du kan ta emot inskick i din WEMASY-översikt, via e-post eller via webhooks.
Se alternativen för inbäddning i ditt WEMASY-abonnemang.