Pop-upformulieren maken en weergeven

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

Een pop-up wordt boven de inhoud van je website weergegeven. De pop-up plaatst het inschrijvingsaanbod direct in het gezichtsveld van de bezoeker, terwijl de onderliggende pagina behouden blijft.

Pop-ups zijn handig voor nieuwsbriefaanbiedingen, kortingen, evenementregistraties, lead magnets en andere gerichte call-to-actions. Omdat ze de normale pagina-ervaring onderbreken, zijn timing en frequentie net zo belangrijk als het ontwerp.

Deze handleiding legt de instellingen uit die specifiek zijn voor pop-ups. Lay-outs, contentblokken, abonneevelden, tags, typografie, lagen en inschrijvingsflows worden behandeld in de algemene handleiding voor de Signup Form Builder.

Een pop-up maken

Open “Signup Forms”, klik op “Create Form” en selecteer “Popup”. Voer een duidelijke interne naam in en ga verder naar de builder.

Je kunt ook een bestaande pop-up bewerken door op de naam ervan te klikken in het overzicht van Signup Forms.

Gebruik een naam die het aanbod of de plaatsing beschrijft, zoals “Homepage Discount Popup”, “Webinar Registration Popup” of “Guide Download Popup”. De interne naam wordt niet automatisch aan bezoekers getoond.

Een pop-uptemplate kiezen

Pop-ups bieden een leeg formulier, een standaardformulier en vier ontworpen templates:

• Clean discount
• Warm guide
• Dark webinar
• Soft community

Kies een template waarvan de grootte en contentstructuur bij het aanbod passen. Alle tekst, velden, kleuren, afbeeldingen, tussenruimtes en de lay-out kunnen daarna worden gewijzigd.

De pop-up ontwerpen

Gebruik de visuele builder om de pop-up samen te stellen. Je kunt het inschrijfformulier combineren met tekst, afbeeldingen, video, lijsten, knoppen, social links, een abonnee-teller, tussenruimtes en scheidingslijnen.

Houd de hoofdboodschap kort genoeg om die onmiddellijk te begrijpen. Een duidelijke kop, één korte uitleg en een specifieke verzendknop zijn meestal effectiever dan meerdere concurrerende boodschappen.

Selecteer het blok van het inschrijfformulier om velden, verplichte informatie, verborgen tags, voortgangsindicator, abonnee-teller, invoervelden en verzendknop te configureren. Open “Page settings” om de algemene achtergrond en standaardweergave van de pop-up te wijzigen.

De pop-up verschijnt boven de website, met een knop om die te sluiten. Laat voldoende visuele ruimte rond belangrijke tekst en velden, zodat het formulier ook op een klein scherm eenvoudig te gebruiken blijft.

Het gedrag van de pop-up configureren

Selecteer het blok van het inschrijfformulier en open “Widget Settings”. In dit gedeelte bepaal je wanneer de pop-up wordt weergegeven en hoe vaak een bezoeker die kan zien.

Weergavevertraging

“Display Delay” bepaalt hoeveel seconden Maildroppa wacht voordat de pop-up wordt weergegeven op een ingesloten webpagina.

Voer 0 in om de pop-up zonder extra vertraging weer te geven. Gebruik een hogere waarde wanneer bezoekers tijd moeten krijgen om de pagina te lezen voordat het aanbod verschijnt. De builder accepteert een vertraging van maximaal 86.400 seconden.

Kies de vertraging op basis van de pagina. Een korte vertraging kan geschikt zijn op een gerichte campagnepagina, terwijl een langere vertraging minder storend kan aanvoelen in een artikel.

Weergavefrequentie

“Display Frequency” bepaalt na welke periode de pop-up opnieuw aan dezelfde bezoeker kan worden getoond. De beschikbare opties zijn:

• Always
• Once per hour
• Once per day
• Once per week
• Once per month

Gebruik “Always” zorgvuldig. Een pop-up die dezelfde bezoeker herhaaldelijk onderbreekt, kan frustrerend worden. Een dagelijkse of wekelijkse frequentie is vaak een beter uitgangspunt voor een algemeen websiteaanbod.

De frequentie wordt opgeslagen in de browser van de bezoeker. Testen in een andere browser, een privévenster of met gewiste browseropslag kan daarom een ander resultaat opleveren.

Exit intent gebruiken

Schakel “Exit Intent Popup” in wanneer de pop-up moet worden geopend nadat de bezoeker de aanwijzer buiten het paginagebied beweegt, wat erop kan wijzen dat die op het punt staat te vertrekken.

Wanneer exit intent is ingeschakeld, wacht de pop-up op dit gedrag in plaats van de normale vertraagde weergave te volgen. De geselecteerde weergavefrequentie voorkomt nog steeds dat de pop-up te snel opnieuw wordt getoond.

Exit intent is gebaseerd op bewegingen van de aanwijzer en is daarom vooral relevant in desktop- en laptopbrowsers. Aanraakapparaten geven niet hetzelfde exitsignaal. Zorg er altijd voor dat mobiele bezoekers je inschrijvingsaanbod ook via de pagina zelf of een ander geschikt formulier kunnen ontdekken.

Een pop-up handmatig openen vanuit een pagina-element

Een pop-up kan worden geopend wanneer een bezoeker op een specifieke knop, afbeelding of link op je website klikt. Dit is de handmatige kliktrigger. Die verschilt van “Exit Intent Popup”, die reageert wanneer een bezoeker de aanwijzer buiten de pagina beweegt.

Configureer en installeer de handmatige kliktrigger als volgt:

1. Open de pop-up in de Signup Form Builder.
2. Klik op het blok van het inschrijfformulier op het canvas en open rechts “Settings”.
3. Klap “Widget Settings” uit en schakel “Open popup when a customer clicks a page element” in.
4. Klik op “Save changes”.
5. Ga terug naar het overzicht van Signup Forms en activeer de pop-up als die inactief is.
6. Klik op “Show Code Snippet” in de rij van die pop-up.

Het dialoogvenster bevat de twee waarden die je op je website nodig hebt:

1. Kopieer de volledige code uit het tabblad “JavaScript” en voeg die toe aan de websitepagina waarop de pop-up beschikbaar moet zijn.
2. Kopieer onder de code de ID die wordt weergegeven onder “Add this ID to element from which you want to manually trigger Popup”.
3. Voeg die exacte waarde toe aan het id-attribuut van de knop, afbeelding of link die de pop-up moet openen.

De ID volgt dit formaat:

maildroppa-popup-btn-[form-id]

Bijvoorbeeld:

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

De JavaScript-code laadt de pop-up. De ID koppelt de pop-up aan het geselecteerde pagina-element. Beide moeten aanwezig zijn op dezelfde gepubliceerde pagina. Wanneer een bezoeker op het element met die exacte ID klikt, opent het Maildroppa-script de pop-up.

Als de knop op je website al een ID van een ander pop-upsysteem heeft, vervang die dan door de Maildroppa-trigger-ID wanneer Maildroppa de klik moet afhandelen. Plaats de Maildroppa-pop-up niet in een tweede pop-up die door je websitebuilder wordt geleverd.

Gebruik elke HTML-ID slechts één keer per pagina. Als meerdere elementen dezelfde pop-up moeten openen, vraag dan de persoon die de website implementeert om die elementen te koppelen zonder dezelfde ID te dupliceren.

De inschrijvingsflow koppelen

Controleer de toegewezen inschrijvingsflow in de header van de builder. Die bepaalt de onmiddellijke reactie na verzending, de Double Opt-in-e-mail en het resultaat na bevestiging.

Je kunt een bestaande flow selecteren, die bewerken of een aparte flow voor deze pop-up maken. Een speciale flow is handig wanneer het aanbod een eigen bevestigingsbericht of levering van een lead magnet nodig heeft.

Voorbeeldweergave en opslaan

Klik op “Preview” om het ontwerp en gedrag van de pop-up te controleren zonder de versie te wijzigen die op je website wordt gebruikt. Controleer de lay-out, sluitknop, volgorde van de velden, ruimte voor validatie en reactie na verzending.

Klik op “Save changes” wanneer de pop-up klaar is. Ga daarna terug naar het overzicht van Signup Forms.

De pop-up automatisch activeren en insluiten

Activeer de pop-up via het actiemenu met drie puntjes als die nog niet actief is. Klik daarna op “Show Code Snippet” en kopieer de volledige code uit het tabblad “JavaScript”.

Voeg het script toe aan elke websitepagina waarop de pop-up beschikbaar moet zijn. De code bevat de unieke formulier-ID van de pop-up en laadt de huidige opgeslagen configuratie.

Het tabblad “HTML” bevat de gegenereerde markup voor aangepaste implementaties. Als je die gebruikt, test dan alle gedragingen en verzendstappen zorgvuldig, omdat de code en stijlen van je website het resultaat kunnen beïnvloeden.

Dit gedeelte is van toepassing wanneer de pop-up automatisch moet openen op basis van de weergavevertraging of het exit-intentgedrag. Volg voor een knop, afbeelding of link die de pop-up bij een klik opent de instructies bij

.

Raadpleeg voor algemene instructies voor insluiten Een ingesloten formulier bouwen en insluiten.

De pop-up testen op je website

Test de pop-up op de echte websitepagina nadat je de code hebt toegevoegd:

1. Controleer de ingestelde vertraging.
2. Test de sluitknop en het klikken buiten het formulier.
3. Beweeg, als dit is ingeschakeld, de aanwijzer buiten de pagina om exit intent te testen.
4. Klik, als dit is ingeschakeld, op het geconfigureerde pagina-element om de handmatige trigger te testen.
5. Controleer de lay-out op een smal scherm.
6. Verzend het formulier en voltooi het Double Opt-in-proces.
7. Controleer de abonnee en verborgen tags in Maildroppa.

De frequentie-instelling kan voorkomen dat de pop-up tijdens herhaalde tests opnieuw verschijnt. Gebruik een privévenster of wis de relevante browseropslag wanneer je een schone testbezoeker nodig hebt.

De pop-up bijwerken of deactiveren

Open de pop-up in Maildroppa, bewerk het ontwerp of gedrag, bekijk een voorbeeld en klik op “Save changes” om de pop-up bij te werken. Het JavaScript-fragment blijft dezelfde formulier-ID gebruiken.

Kies “Deactivate” in het actiemenu om de weergave tijdelijk te stoppen. Deactivering behoudt de pop-up en de eerdere rapportgegevens. Verwijder het script of triggerelement ook van de website als die niet langer nodig zijn.