Skapa och bädda in registreringsformulär

Published: 16 juli 2026 · Last updated: 21 juli 2026 · By Marcus Biel

Ett inbäddat formulär placeras direkt på en befintlig sida på din webbplats. Det förblir en del av det omgivande innehållet i stället för att visas ovanför det.

Inbäddade formulär fungerar bra i bloggartiklar, landningssidor på din egen webbplats, nyhetsbrevssektioner, sidofält och sidfötter. Platsen där du lägger till formulärkoden avgör var formuläret visas.

Den här guiden beskriver stegen som är specifika för inbäddade formulär. De gemensamma funktionerna för visuell redigering förklaras i huvudguiden Skapa registreringsformulär.

Skapa ett inbäddat formulär

Öppna ”Signup Forms”, klicka på ”Create Form” och välj ”Embedded Form”. Ange ett tydligt internt namn och fortsätt till byggverktyget.

Du kan också redigera ett befintligt formulär genom att klicka på dess namn i översikten över Signup Forms.

Det interna namnet visas inte automatiskt för besökare. Namnge formuläret efter dess plats eller syfte, till exempel ”Homepage Newsletter”, ”Blog Footer” eller ”Product Updates”.

Välja en startdesign

Inbäddade formulär erbjuder ett tomt formulär, ett standardformulär och fyra designade mallar:

• Calm note
• Coupon strip
• Dark editorial
• Minimal blue

Välj den design som bäst passar webbplatsens utrymme och ton där formuläret ska visas. Alla startdesigner kan ändras helt efter valet.

Designa det inbäddade formuläret

Använd ”Layout” och ”Content” för att ordna formuläret. Ett inbäddat formulär kan innehålla registreringsformuläret tillsammans med stödtext, bilder, listor, knappar, sociala länkar, en prenumeranträknare, mellanrum eller avgränsare.

För ett smalt sidofält eller en sidfot är en layout med en kolumn vanligtvis lättast att läsa. I en bredare sidsektion kan en layout med två kolumner placera en kort förklaring eller bild bredvid fälten.

Välj registreringsformulärsblocket för att välja prenumerantfält, obligatoriska fält, etiketter, dolda taggar, en förloppsindikator och en valfri prenumeranträknare. Därefter kan du utforma formulärbehållaren, fälten och skickaknappen separat.

Öppna ”Page settings” för att ändra bakgrunden och de övergripande standardinställningarna för designen på det inbäddade formulärets arbetsyta. Ta hänsyn till den omgivande webbplatsen. En transparent eller enkel bakgrund smälter ofta in mer naturligt, medan en kontrasterande bakgrund hjälper registreringserbjudandet att synas.

Fullständiga instruktioner för layouter, innehåll, lager, fält, taggar, typografi och utseende finns i Använda Signup Form Builder.

Ansluta registreringsflödet

Använd kontrollen för registreringsflödet i byggverktygets sidhuvud för att granska vad som händer efter inskickning, vilket Double Opt-in-mejl som skickas och vad besökaren ser efter bekräftelsen.

Du kan välja ett befintligt flöde, redigera det tilldelade flödet eller skapa ett nytt. Om det valda flödet delas med andra formulär bör du komma ihåg att redigering kan påverka även dessa formulär.

Förhandsgranska och spara

Klicka på ”Preview” för att granska hela formuläret innan du placerar det på webbplatsen. Kontrollera fältordningen, etiketterna, utrymmet för felmeddelanden, knapptexten och mängden stödjande innehåll.

Klicka på ”Save changes” för att spara den aktuella versionen. Gå tillbaka till översikten över Signup Forms när du är redo att bädda in formuläret.

Aktivera formuläret

Det inbäddade formuläret måste vara aktivt innan dess offentliga kod kan användas.

Om formuläret är inaktivt öppnar du menyn med åtgärder via de tre punkterna i översikten över Signup Forms och väljer ”Activate”. Ett aktivt formulär visar åtgärden ”Show Code Snippet”.

Inaktivera formuläret när det inte längre ska vara tillgängligt på webbplatsen. Inaktivering tar formuläret offline utan att dess design eller tidigare rapportdata raderas.

Kopiera JavaScript-koden

Klicka på ”Show Code Snippet” och öppna fliken ”JavaScript”. Maildroppa tillhandahåller ett kort skript som innehåller det unika formulär-ID:t.

Koden följer denna struktur:

<script async src="https://form.maildroppa.com/md-form-loader.js" data-md-form="[form-id]"></script>

Kopiera hela koden utan att ändra skriptadressen eller formulär-ID:t.

JavaScript-alternativet laddar det aktuella sparade formuläret via Maildroppas formulärkörmiljö. När du senare redigerar och sparar samma formulär i Maildroppa hänvisar det befintliga kodavsnittet fortfarande till samma formulär-ID. Du behöver inte skapa ett nytt formulär bara för att ändra texten eller designen.

Lägga till formuläret på webbplatsen

Klistra in skriptet på den plats på sidan där det inbäddade formuläret ska visas.

De exakta stegen beror på vilket webbplatssystem du använder. I en sidbyggare eller ett innehållshanteringssystem använder du ett block som accepterar anpassad HTML- eller skriptkod. På en anpassad webbplats lägger du till skriptet i den relevanta mallen eller sidans markup.

Vissa webbplatsredigerare tar bort skripttaggar av säkerhetsskäl. Om formuläret inte visas efter att sidan har publicerats bör du först kontrollera om redigeraren bevarade hela Maildroppa-skriptet. Du kan behöva använda systemets särskilda område för anpassad kod eller be personen som hanterar webbplatsen om hjälp.

Klistra inte in samma kodavsnitt för ett inbäddat formulär flera gånger på en sida, såvida du inte avsiktligt vill ha samma formulär på flera platser och har testat den konfigurationen.

Använda HTML-fliken

Fliken ”HTML” innehåller den genererade formulärmarkupen. Det här alternativet är avsett för anpassade implementeringar där du vill arbeta direkt med den renderade HTML-koden.

Kopiera hela markupen om du väljer den här metoden. Eftersom en anpassad HTML-integration kan påverkas av webbplatsens stilar och implementation bör du noggrant testa fält, validering, inskickning och bekräftelseflöde.

För det vanliga Maildroppa-hanterade formuläret är JavaScript-kodavsnittet den kortare integrationen och laddar den aktuella offentliga formulärkonfigurationen med hjälp av dess ID.

Testa det inbäddade formuläret

Publicera eller förhandsgranska webbsidan som innehåller koden. Testa sedan formuläret som en besökare skulle göra:

1. Kontrollera att formuläret visas på rätt plats.
2. Visa sidan på en bred och en smal skärm.
3. Fyll i alla obligatoriska fält.
4. Skicka formuläret och granska svaret.
5. Öppna Double Opt-in-mejlet.
6. Bekräfta adressen och granska det slutliga svaret.
7. Kontrollera att prenumeranten och eventuella dolda taggar visas korrekt i Maildroppa.

Om formuläret är bredare än webbplatsens behållare justerar du formulärbredd, kolumnlayout, utfyllnad eller inställningar för mobil stapling i byggverktyget. Undvik att lösa layoutproblem genom att ändra den genererade Maildroppa-koden.

Uppdatera ett inbäddat formulär

Öppna samma formulär i Maildroppa, gör ändringarna, förhandsgranska dem och klicka på ”Save changes”. JavaScript-kodavsnittet på webbplatsen fortsätter att använda samma formulär-ID och laddar den sparade offentliga konfigurationen.

Om formuläret tillfälligt ska tas bort inaktiverar du det från översikten över Signup Forms. Om det inte längre behövs tar du även bort kodavsnittet från webbplatsen så att sidan inte innehåller oanvänd kod.