Popup-Formulare erstellen und anzeigen

Published: 16. Juli 2026 · Last updated: 21. Juli 2026 · By Marcus Biel

Ein Popup wird über dem Inhalt Ihrer Website angezeigt. Es platziert das Anmeldeangebot direkt im Blickfeld der Besuchenden, während die darunterliegende Seite bestehen bleibt.

Popups eignen sich für Newsletter-Angebote, Rabatte, Veranstaltungsanmeldungen, Lead-Magneten und andere fokussierte Handlungsaufforderungen. Da sie das normale Seitenerlebnis unterbrechen, sind Timing und Häufigkeit ebenso wichtig wie das Design.

Dieser Leitfaden erklärt die Popup-spezifischen Einstellungen. Layouts, Inhaltsblöcke, Abonnentenfelder, Tags, Typografie, Ebenen und Anmeldeabläufe werden im Leitfaden zum Anmeldeformular-Builder behandelt.

Pop-up erstellen

Öffnen Sie „Anmeldeformulare“, klicken Sie auf „Formular erstellen“ und wählen Sie „Popup“. Geben Sie einen eindeutigen internen Namen ein und fahren Sie mit dem Builder fort.

Sie können ein bestehendes Popup auch bearbeiten, indem Sie in der Übersicht der Anmeldeformulare auf seinen Namen klicken.

Verwenden Sie einen Namen, der das Angebot oder die Platzierung beschreibt, z. B. „Homepage-Rabatt-Popup“, „Webinar-Anmelde-Popup“ oder „Leitfaden-Download-Popup“. Der interne Name wird Besuchenden nicht automatisch angezeigt.

Popup-Vorlage auswählen

Für Popups stehen ein leeres Formular, ein Standardformular und vier gestaltete Vorlagen zur Verfügung:

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

Wählen Sie eine Vorlage, deren Größe und Inhaltsstruktur zum Angebot passen. Alle Texte, Felder, Farben, Bilder, Abstände und das Layout können anschließend geändert werden.

Popup gestalten

Verwenden Sie den visuellen Builder, um das Popup anzuordnen. Sie können das Anmeldeformular mit Texten, Bildern, Videos, Listen, Buttons, Social-Media-Links, einem Abonnentenzähler, Abstandshaltern und Trennlinien kombinieren.

Halten Sie die Hauptbotschaft kurz genug, damit sie sofort verstanden wird. Eine klare Überschrift, eine kurze Erklärung und ein eindeutiger Absende-Button sind in der Regel effektiver als mehrere konkurrierende Botschaften.

Wählen Sie den Anmeldeformular-Block aus, um Felder, erforderliche Informationen, ausgeblendete Tags, Fortschrittsanzeige, Abonnentenzähler, Eingabefelder und Absende-Button zu konfigurieren. Öffnen Sie „Seiteneinstellungen“, um den allgemeinen Popup-Hintergrund und die Standardwerte für das Erscheinungsbild zu ändern.

Das Popup erscheint über der Website und verfügt über eine Schließen-Steuerung. Lassen Sie um wichtige Texte und Felder ausreichend visuellen Raum, damit das Formular auch auf kleinen Bildschirmen einfach zu bedienen bleibt.

Popup-Verhalten konfigurieren

Wählen Sie den Anmeldeformular-Block aus und öffnen Sie „Widget-Einstellungen“. In diesem Bereich legen Sie fest, wann das Popup angezeigt wird und wie oft eine Person es sehen kann.

Anzeig_delay

„Anzeig_delay“ legt fest, wie viele Sekunden Maildroppa wartet, bevor das Popup auf einer eingebetteten Website-Seite angezeigt wird.

Geben Sie 0 ein, um es ohne zusätzliche Verzögerung anzuzeigen. Verwenden Sie einen höheren Wert, wenn Besuchende Zeit haben sollen, die Seite zu lesen, bevor das Angebot erscheint. Der Builder akzeptiert eine Verzögerung von bis zu 86.400 Sekunden.

Wählen Sie die Verzögerung passend zur Seite. Eine kurze Verzögerung kann auf einer fokussierten Kampagnenseite sinnvoll sein, während eine längere Verzögerung in einem Artikel weniger störend wirken kann.

Anzeigehäufigkeit

„Anzeigehäufigkeit“ legt den Zeitraum fest, nach dem das Popup derselben Person erneut angezeigt werden kann. Folgende Optionen sind verfügbar:

• Immer
• Einmal pro Stunde
• Einmal pro Tag
• Einmal pro Woche
• Einmal pro Monat

Verwenden Sie „Immer“ mit Bedacht. Ein Popup, das dieselbe Person wiederholt unterbricht, kann frustrierend werden. Eine tägliche oder wöchentliche Häufigkeit ist für ein allgemeines Website-Angebot oft ein besserer Ausgangspunkt.

Die Häufigkeit wird im Browser der Person gespeichert. Tests in einem anderen Browser, einem privaten Browserfenster oder nach dem Löschen des Browserspeichers können daher zu einem anderen Ergebnis führen.

Exit Intent verwenden

Aktivieren Sie „Exit-Intent-Popup“, wenn das Popup geöffnet werden soll, nachdem die Person den Mauszeiger aus dem Seitenbereich bewegt und damit möglicherweise signalisiert, dass sie die Seite verlassen möchte.

Wenn Exit Intent aktiviert ist, wartet das Popup auf dieses Verhalten, anstatt der normalen verzögerten Anzeige zu folgen. Die ausgewählte Anzeigehäufigkeit verhindert weiterhin, dass es zu schnell erneut angezeigt wird.

Exit Intent basiert auf Mauszeigerbewegungen und ist daher hauptsächlich für Desktop- und Laptop-Browser relevant. Touch-Geräte liefern nicht dasselbe Exit-Signal. Stellen Sie stets sicher, dass mobile Besuchende Ihr Anmeldeangebot weiterhin über die Seite selbst oder ein anderes geeignetes Formular entdecken können.

Popup manuell über ein Seitenelement öffnen

Ein Popup kann geöffnet werden, wenn eine Person auf einen bestimmten Button, ein Bild oder einen Link auf Ihrer Website klickt. Dies ist der manuelle Klick-Trigger. Er unterscheidet sich vom „Exit-Intent-Popup“, das reagiert, wenn eine Person den Mauszeiger aus dem Seitenbereich bewegt.

Konfigurieren und installieren Sie den manuellen Klick-Trigger wie folgt:

1. Öffnen Sie das Popup im Anmeldeformular-Builder.
2. Klicken Sie auf der Arbeitsfläche auf den Anmeldeformular-Block und öffnen Sie rechts „Einstellungen“.
3. Klappen Sie „Widget-Einstellungen“ auf und aktivieren Sie „Popup öffnen, wenn ein Kunde auf ein Seitenelement klickt“.
4. Klicken Sie auf „Änderungen speichern“.
5. Kehren Sie zur Übersicht der Anmeldeformulare zurück und aktivieren Sie das Popup, falls es inaktiv ist.
6. Klicken Sie in der Zeile dieses Popups auf „Code-Snippet anzeigen“.

Der Dialog enthält die beiden Werte, die auf Ihrer Website benötigt werden:

1. Kopieren Sie den vollständigen Code aus dem Tab „JavaScript“ und fügen Sie ihn auf der Website-Seite ein, auf der das Popup verfügbar sein soll.
2. Kopieren Sie unterhalb des Codes die unter „Diese ID zum Element hinzufügen, von dem aus Sie das Popup manuell auslösen möchten“ angezeigte ID.
3. Fügen Sie diesen exakten Wert in das id-Attribut des Buttons, Bildes oder Links ein, der bzw. das das Popup öffnen soll.

Die ID folgt diesem Format:

maildroppa-popup-btn-[form-id]

Zum Beispiel:

<button id="maildroppa-popup-btn-[form-id]">Leitfaden abrufen</button>

Das JavaScript lädt das Popup. Die ID verbindet das Popup mit dem ausgewählten Seitenelement. Beide müssen auf derselben veröffentlichten Seite vorhanden sein. Wenn eine Person auf das Element mit genau dieser ID klickt, öffnet das Maildroppa-Skript das Popup.

Wenn Ihr Website-Button bereits eine ID von einem anderen Pop-up-System besitzt, ersetzen Sie sie durch die Maildroppa-Trigger-ID, sobald Maildroppa den Klick verarbeiten soll. Platzieren Sie das Maildroppa-Popup nicht innerhalb eines zweiten Popups, das von Ihrem Website-Builder bereitgestellt wird.

Verwenden Sie jede HTML-ID pro Seite nur einmal. Wenn mehrere Elemente dasselbe Popup öffnen sollen, bitten Sie die für die Website-Implementierung zuständige Person, diese Elemente zu verbinden, ohne dieselbe ID zu duplizieren.

Anmeldeablauf verbinden

Überprüfen Sie den zugewiesenen Anmeldeablauf in der Kopfzeile des Builders. Er steuert die unmittelbare Reaktion nach dem Absenden, die Double-Opt-in-E-Mail und das Ergebnis nach der Bestätigung.

Sie können einen bestehenden Ablauf auswählen, ihn bearbeiten oder einen separaten Ablauf für dieses Popup erstellen. Ein eigener Ablauf ist sinnvoll, wenn das Angebot eine eigene Bestätigungsnachricht oder die Zustellung eines Lead-Magneten benötigt.

Vorschau und Speichern

Klicken Sie auf „Vorschau“, um Design und Verhalten des Popups zu prüfen, ohne die auf Ihrer Website verwendete Version zu ändern. Überprüfen Sie Layout, Schließen-Steuerung, Feldreihenfolge, Platz für Validierungsmeldungen und Reaktion nach dem Absenden.

Klicken Sie auf „Änderungen speichern“, wenn das Popup fertig ist. Kehren Sie anschließend zur Übersicht der Anmeldeformulare zurück.

Popup automatisch aktivieren und einbetten

Aktivieren Sie das Popup über das Drei-Punkte-Aktionsmenü, falls es noch nicht aktiv ist. Klicken Sie anschließend auf „Code-Snippet anzeigen“ und kopieren Sie den vollständigen Code aus dem Tab „JavaScript“.

Fügen Sie das Skript auf jeder Website-Seite ein, auf der das Popup verfügbar sein soll. Der Code enthält die eindeutige Formular-ID des Popups und lädt seine aktuelle gespeicherte Konfiguration.

Der Tab „HTML“ stellt das generierte Markup für benutzerdefinierte Implementierungen bereit. Wenn Sie es verwenden, testen Sie alle Verhaltensweisen und Übermittlungsschritte sorgfältig, da Ihr Website-Code und Ihre Styles das Ergebnis beeinflussen können.

Dieser Abschnitt gilt, wenn das Popup automatisch auf Grundlage seiner Anzeig_delay oder seines Exit-Intent-Verhaltens geöffnet werden soll. Für einen Button, ein Bild oder einen Link, der bzw. das das Popup per Klick öffnet, folgen Sie

.

Allgemeine Anweisungen zum Einbetten finden Sie unter Eingebettetes Formular erstellen und einbetten.

Popup auf Ihrer Website testen

Testen Sie das Popup nach dem Einfügen des Codes auf der echten Website-Seite:

1. Überprüfen Sie die konfigurierte Verzögerung.
2. Testen Sie die Schließen-Schaltfläche und das Klicken außerhalb des Formulars.
3. Bewegen Sie, falls aktiviert, den Mauszeiger aus dem Seitenbereich, um Exit Intent zu testen.
4. Klicken Sie, falls aktiviert, auf das konfigurierte Seitenelement, um den manuellen Trigger zu testen.
5. Überprüfen Sie das Layout auf einem schmalen Bildschirm.
6. Senden Sie das Formular ab und schließen Sie den Double-Opt-in-Prozess ab.
7. Überprüfen Sie die Person und die ausgeblendeten Tags in Maildroppa.

Die Einstellung zur Häufigkeit kann verhindern, dass das Popup bei wiederholten Tests erneut erscheint. Verwenden Sie ein privates Browserfenster oder löschen Sie den entsprechenden Browserspeicher, wenn Sie einen sauberen Testbesuch benötigen.

Popup aktualisieren oder deaktivieren

Um das Popup zu aktualisieren, öffnen Sie es in Maildroppa, bearbeiten Sie Design oder Verhalten, sehen Sie sich die Vorschau an und klicken Sie auf „Änderungen speichern“. Das JavaScript-Snippet verwendet weiterhin dieselbe Formular-ID.

Um die Anzeige vorübergehend zu stoppen, wählen Sie im Aktionsmenü „Deaktivieren“. Durch die Deaktivierung bleiben das Popup und seine bisherigen Berichtsdaten erhalten. Entfernen Sie das Skript oder das Trigger-Element ebenfalls von der Website, wenn diese nicht mehr benötigt werden.