Skapa och visa popupformulär

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

En popup visas ovanpå innehållet på din webbplats. Den placerar registreringserbjudandet direkt i besökarens blickfång samtidigt som sidan under förblir på plats.

Popuper är användbara för nyhetsbrevserbjudanden, rabatter, eventregistreringar, lead magnets och andra fokuserade uppmaningar till handling. Eftersom de avbryter den normala sidupplevelsen är tidpunkt och frekvens lika viktiga som designen.

Den här guiden beskriver de inställningar som är specifika för popuper. Layouter, innehållsblock, prenumerantfält, taggar, typografi, lager och registreringsflöden behandlas i den huvudsakliga guiden för registreringsformulärbyggaren.

Skapa en popup

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

Du kan också redigera en befintlig popup genom att klicka på dess namn i översikten över registreringsformulär.

Använd ett namn som beskriver erbjudandet eller placeringen, till exempel ”Homepage Discount Popup”, ”Webinar Registration Popup” eller ”Guide Download Popup”. Det interna namnet visas inte automatiskt för besökare.

Välj en popupmall

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

• Ren rabatt
• Varm guide
• Mörkt webinar
• Mjuk community

Välj en mall vars storlek och innehållsstruktur passar erbjudandet. All text, alla fält, färger, bilder, avstånd och layout kan ändras efteråt.

Designa popupen

Använd den visuella byggaren för att arrangera popupen. Du kan kombinera registreringsformuläret med text, bilder, video, listor, knappar, sociala länkar, en prenumeranträknare, tomrum och avdelare.

Håll huvudbudskapet tillräckligt kort för att förstås direkt. En tydlig rubrik, en kort förklaring och en specifik skickaknapp är vanligtvis effektivare än flera konkurrerande budskap.

Välj registreringsformulärsblocket för att konfigurera fält, obligatorisk information, dolda taggar, förloppsindikator, prenumeranträknare, inmatningsfält och skickaknapp. Öppna ”Page settings” för att ändra popupens övergripande bakgrund och standardinställningar för utseendet.

Popupen visas ovanpå webbplatsen och har en stängningskontroll. Lämna tillräckligt med visuellt utrymme runt viktig text och viktiga fält så att formuläret förblir lätt att använda på en liten skärm.

Konfigurera popupens beteende

Välj registreringsformulärsblocket och öppna ”Widget Settings”. Det här avsnittet styr när popupen visas och hur ofta en besökare kan se den.

Visningsfördröjning

”Display Delay” anger hur många sekunder Maildroppa väntar innan popupen visas på en inbäddad webbsida.

Ange 0 för att visa den utan ytterligare fördröjning. Använd ett högre värde när besökare ska få tid att läsa sidan innan erbjudandet visas. Byggaren accepterar en fördröjning på upp till 86 400 sekunder.

Välj fördröjning utifrån sidan. En kort fördröjning kan vara lämplig på en fokuserad kampanjsida, medan en längre fördröjning kan upplevas som mindre störande i en artikel.

Visningsfrekvens

”Display Frequency” styr den period efter vilken popupen kan visas för samma besökare igen. Följande alternativ finns:

• Alltid
• En gång i timmen
• En gång om dagen
• En gång i veckan
• En gång i månaden

Använd ”Always” med försiktighet. En popup som upprepade gånger avbryter samma besökare kan bli frustrerande. Daglig eller veckovis frekvens är ofta en bättre utgångspunkt för ett erbjudande på en allmän webbplats.

Frekvensen sparas i besökarens webbläsare. Testning i en annan webbläsare, ett privat webbläsarfönster eller efter rensad webbläsarlagring kan därför ge ett annat resultat.

Använda exit intent

Aktivera ”Exit Intent Popup” när popupen ska öppnas efter att besökaren flyttar pekaren utanför sidområdet, vilket indikerar att hen kanske är på väg att lämna sidan.

När exit intent är aktiverat väntar popupen på detta beteende i stället för att följa den normala fördröjda visningen. Den valda visningsfrekvensen förhindrar fortfarande att den visas igen för snart.

Exit intent baseras på pekarrörelser och är därför främst relevant i webbläsare på datorer och bärbara datorer. Pekskärmsenheter ger inte samma exitsignal. Se alltid till att mobilbesökare fortfarande kan upptäcka ditt registreringserbjudande via själva sidan eller ett annat lämpligt formulär.

Öppna en popup manuellt från ett sidelement

En popup kan öppnas när en besökare klickar på en specifik knapp, bild eller länk på din webbplats. Detta är den manuella klickutlösaren. Den skiljer sig från ”Exit Intent Popup”, som reagerar när en besökare flyttar pekaren utanför sidan.

Konfigurera och installera den manuella klickutlösaren så här:

1. Öppna popupen i Signup Form Builder.
2. Klicka på registreringsformulärsblocket på arbetsytan och öppna ”Settings” till höger.
3. Expandera ”Widget Settings” och aktivera ”Open popup when a customer clicks a page element”.
4. Klicka på ”Save changes”.
5. Gå tillbaka till översikten över registreringsformulär och aktivera popupen om den är inaktiv.
6. Klicka på ”Show Code Snippet” på raden för popupen.

Dialogrutan innehåller de två värden som krävs på din webbplats:

1. Kopiera hela koden från fliken ”JavaScript” och lägg till den på den webbsida där popupen ska vara tillgänglig.
2. Kopiera ID:t som visas under ”Add this ID to element from which you want to manually trigger Popup” nedanför koden.
3. Lägg till exakt detta värde i attributet id för knappen, bilden eller länken som ska öppna popupen.

ID:t följer detta format:

maildroppa-popup-btn-[form-id]

Till exempel:

<button id="maildroppa-popup-btn-[form-id]">Get the guide</button>

JavaScript-koden laddar popupen. ID:t kopplar popupen till det valda sidelementet. Båda måste finnas på samma publicerade sida. När en besökare klickar på elementet med exakt detta ID öppnar Maildroppa-skriptet popupen.

Om knappen på din webbplats redan har ett ID från ett annat popup-system ska du ersätta det med Maildroppas utlösar-ID när Maildroppa ska hantera klicket. Placera inte Maildroppa-popupen inuti en annan popup som tillhandahålls av webbplatsbyggaren.

Använd varje HTML-ID endast en gång per sida. Om flera element ska öppna samma popup bör du be personen som implementerar webbplatsen att koppla dessa element utan att duplicera samma ID.

Koppla registreringsflödet

Granska det tilldelade registreringsflödet i byggarens sidhuvud. Det styr det omedelbara svaret efter skickat formulär, e-postmeddelandet för Double Opt-in och resultatet efter bekräftelse.

Du kan välja ett befintligt flöde, redigera det eller skapa ett separat flöde för denna popup. Ett särskilt flöde är användbart när erbjudandet behöver ett eget bekräftelsemeddelande eller leverans av en lead magnet.

Förhandsgranska och spara

Klicka på ”Preview” för att kontrollera popupens design och beteende utan att ändra den version som används på din webbplats. Granska layouten, stängningskontrollen, fältordningen, utrymmet för validering och svaret efter skickat formulär.

Klicka på ”Save changes” när popupen är klar. Gå sedan tillbaka till översikten över registreringsformulär.

Aktivera och bädda in popupen automatiskt

Aktivera popupen från menyn med åtgärder, som öppnas via de tre punkterna, om den inte redan är aktiv. Klicka sedan på ”Show Code Snippet” och kopiera hela koden från fliken ”JavaScript”.

Lägg till skriptet på varje webbsida där popupen ska vara tillgänglig. Koden innehåller popupens unika formulär-ID och laddar den aktuella sparade konfigurationen.

Fliken ”HTML” innehåller den genererade uppmärkningen för anpassade implementationer. Om du använder den ska du noggrant testa allt beteende och alla steg i inskickandet, eftersom webbplatsens kod och stilmallar kan påverka resultatet.

Det här avsnittet gäller när popupen ska öppnas automatiskt baserat på visningsfördröjning eller exit-intent-beteende. För en knapp, bild eller länk som öppnar popupen vid klick följer du

.

För allmänna instruktioner om inbäddning, se Bygga och bädda in ett inbäddat formulär.

Testa popupen på din webbplats

Testa popupen på den riktiga webbsidan efter att du har lagt till koden:

1. Kontrollera den konfigurerade fördröjningen.
2. Testa stängningsknappen och att klicka utanför formuläret.
3. Om funktionen är aktiverad flyttar du pekaren utanför sidan för att testa exit intent.
4. Om funktionen är aktiverad klickar du på det konfigurerade sidelementet för att testa den manuella utlösaren.
5. Kontrollera layouten på en smal skärm.
6. Skicka formuläret och slutför Double Opt-in-processen.
7. Kontrollera prenumeranten och de dolda taggarna i Maildroppa.

Frekvensinställningen kan hindra popupen från att visas igen under upprepade tester. Använd ett privat webbläsarfönster eller rensa relevant webbläsarlagring när du behöver ett rent testbesök.

Uppdatera eller inaktivera popupen

För att uppdatera popupen öppnar du den i Maildroppa, redigerar designen eller beteendet, förhandsgranskar den och klickar på ”Save changes”. JavaScript-kodavsnittet fortsätter att använda samma formulär-ID.

För att tillfälligt sluta visa den väljer du ”Deactivate” i åtgärdsmenyn. Inaktivering bevarar popupen och dess tidigare rapportdata. Ta även bort skriptet eller utlösarelementet från webbplatsen om de inte längre behövs.