Slide-in-Formulare erstellen und positionieren

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

Ein Slide-in ist ein kompaktes Anmeldeformular, das am Rand oder an einer ausgewählten Position des Browserfensters erscheint.

Es zieht mehr Aufmerksamkeit auf sich als ein in die Seite eingebettetes Formular und bedeckt weniger von der Website als ein zentriertes Popup. Slide-ins eignen sich gut für Newsletter-Erinnerungen, Rabatte, Produktneuheiten und kurze Angebote, die sichtbar bleiben sollen, während Besucher die Seite lesen.

Dieser Leitfaden erläutert die Einstellungen, die speziell für Slide-ins gelten. Die allgemeinen Funktionen für Layout, Inhalte, Felder, Tags, Typografie, Ebenen und Anmeldeabläufe werden im Leitfaden zum Anmeldeformular-Builder behandelt.

Slide-in erstellen

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

Sie können ein vorhandenes Slide-in auch bearbeiten, indem Sie in der Übersicht der Anmeldeformulare auf seinen Namen klicken.

Verwenden Sie einen Namen wie „Blog-Newsletter-Slide-in“, „Erinnerung an ein neues Produkt“ oder „Sommercoupon-Slide-in“. Der interne Name hilft Ihnen bei der Verwaltung des Formulars und wird Besuchern nicht automatisch angezeigt.

Slide-in-Vorlage auswählen

Slide-ins bieten ein leeres Formular, ein Standardformular und vier gestaltete Vorlagen:

• Saubere Erinnerung
• Dunkles Angebot
• Warmer Coupon
• Minimalistische Notiz

Die Vorlagen sind für kompakte Nachrichten konzipiert, aber jedes Element bleibt bearbeitbar. Nach der Auswahl einer Vorlage können Sie Inhalte, Felder, Farben, Typografie, Rahmen, Abstände und die Schaltfläche zum Absenden ändern.

Slide-in gestalten

Verwenden Sie den visuellen Builder, um das Slide-in anzuordnen. Es kann das Anmeldeformular zusammen mit Text, einem Bild, Video, einer Liste, Schaltfläche, Social-Links, einem Abonnentenzähler, Abstandshalter oder Trennelement enthalten.

Der verfügbare Platz ist begrenzter als auf einer Landingpage oder in einem breiten eingebetteten Formular. Halten Sie das Angebot fokussiert und vermeiden Sie Inhalte, durch die Besucher erst nach den Feldern oder der Schaltfläche zum Absenden suchen müssen.

Wählen Sie den Block des Anmeldeformulars aus, um Felder, erforderliche Angaben, verborgene Tags, Fortschrittsanzeige, Abonnentenzähler, Eingabefelder und die Schaltfläche zum Absenden zu konfigurieren. Öffnen Sie „Seiteneinstellungen“, um den Hintergrund des Slide-ins und die allgemeinen Darstellungseinstellungen zu ändern.

Ein einspaltiges Layout ist in der Regel am übersichtlichsten. Wenn Sie mehrere Spalten verwenden, prüfen Sie sorgfältig, wie sie auf schmalen Bildschirmen angeordnet werden.

Bildschirmposition auswählen

Wählen Sie den Block des Anmeldeformulars aus und öffnen Sie „Widget-Einstellungen“. Der Positionswähler bietet ein Raster mit drei mal drei Positionen:

• Oben links, oben mittig oder oben rechts
• Mittig links, mittig oder mittig rechts
• Unten links, unten mittig oder unten rechts

Wählen Sie eine Position, die wichtige Steuerelemente der Website nicht verdeckt. Prüfen Sie Cookie-Hinweise, Chat-Widgets, Navigation, Warenkorb-Schaltflächen und andere fixierte Elemente, bevor Sie sich entscheiden.

Auf schmalen mobilen Bildschirmen vereinfacht Maildroppa die Platzierung, damit das Slide-in in die verfügbare Breite passt. Positionen am oberen Rand bleiben oben; andere Positionen werden am unteren Rand angezeigt. Testen Sie das Ergebnis immer auf einem kleinen Bildschirm, statt sich ausschließlich auf die Desktop-Position zu verlassen.

Anzeig delay festlegen

„Anzeig delay“ legt fest, wie viele Sekunden Maildroppa wartet, bevor das Slide-in auf einer eingebetteten Website-Seite angezeigt wird.

Verwenden Sie 0, wenn das Slide-in sofort verfügbar sein soll. Geben Sie eine längere Verzögerung ein, wenn Besucher zunächst Zeit haben sollen, sich mit der Seite zu beschäftigen. Der Builder akzeptiert eine Verzögerung von bis zu 86.400 Sekunden.

Eine kurze Verzögerung kann für eine einfache Newsletter-Erinnerung gut funktionieren. Bei einem längeren Artikel wirkt eine spätere Anzeige möglicherweise natürlicher und macht das Angebot für engagierte Leser relevanter.

Anzeigefrequenz festlegen

Die „Anzeigefrequenz“ legt fest, nach welchem Zeitraum das Slide-in demselben Besucher wieder angezeigt werden kann. Sie können wählen:

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

Wählen Sie eine Frequenz, die zum Angebot passt. Für eine zeitlich begrenzte Aktion kann ein kürzeres Intervall sinnvoll sein, während eine allgemeine Newsletter-Erinnerung normalerweise nicht bei jedem Besuch erscheinen muss.

Die Frequenz wird im Browser des Besuchers gespeichert. Ein anderer Browser, ein privates Browserfenster oder gelöschter Browserspeicher wird als separate Besuchshistorie behandelt.

Anmeldeablauf verbinden

Prüfen Sie den zugewiesenen Anmeldeablauf in der Kopfzeile des Builders. Er legt die Reaktion nach dem Absenden, die Double-Opt-in-E-Mail und den Ablauf nach der Bestätigung fest.

Sie können einen vorhandenen Ablauf auswählen, den aktuellen Ablauf bearbeiten oder einen speziell für dieses Slide-in erstellen. Wenn der Ablauf von mehreren Formularen verwendet wird, wirken sich Änderungen daran auf alle Formulare aus.

Vorschau anzeigen und speichern

Klicken Sie auf „Vorschau“, um das Slide-in zu überprüfen, bevor Sie es Ihrer Website hinzufügen. Prüfen Sie die ausgewählte Position, das Anzeigeverhalten, die Reihenfolge der Felder, die Schließen-Steuerung und die vollständige Reaktion nach der Anmeldung.

Klicken Sie auf „Änderungen speichern“, sobald das Formular und die Widget-Einstellungen bereit sind. Kehren Sie anschließend zur Übersicht der Anmeldeformulare zurück.

Slide-in aktivieren und einbetten

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

Fügen Sie dieses Skript in jede Website-Seite ein, auf der das Slide-in verfügbar sein soll. Anders als bei einem eingebetteten Formular bestimmt die genaue Position des Skripts innerhalb der Seite nicht die sichtbare Position des Slide-ins. Die in den Widget-Einstellungen ausgewählte Position legt fest, wo es erscheint.

Der Tab „HTML“ enthält das generierte Markup für individuelle Implementierungen. Testen Sie die vollständige Interaktion und den Absendeablauf sorgfältig, wenn Ihre Website diese Option verwendet.

Allgemeine Anweisungen zur Codeplatzierung finden Sie unter Eingebettetes Formular erstellen und einbetten.

Slide-in auf Ihrer Website testen

Testen Sie nach dem Hinzufügen des Codes die echte Website-Seite:

1. Prüfen Sie, ob das Slide-in nach der ausgewählten Verzögerung erscheint.
2. Bestätigen Sie seine Position auf einem breiten Bildschirm.
3. Prüfen Sie die angepasste Position und Breite auf einem schmalen Bildschirm.
4. Stellen Sie sicher, dass Navigation, Cookie-Steuerelemente, Chat-Schaltflächen oder andere wichtige Aktionen nicht verdeckt werden.
5. Testen Sie das Öffnen und Schließen des Slide-ins.
6. Senden Sie das Formular ab und schließen Sie den Double-Opt-in-Prozess ab.
7. Überprüfen Sie die Abonnenten und verborgenen Tags in Maildroppa.

Die Frequenzeinstellung kann verhindern, dass das Formular bei wiederholten Tests erneut erscheint. Verwenden Sie ein privates Browserfenster oder löschen Sie den entsprechenden Browserspeicher, wenn Sie einen neuen Besucher simulieren möchten.

Slide-in aktualisieren oder deaktivieren

Öffnen Sie dasselbe Slide-in in Maildroppa, nehmen Sie die Änderungen vor, zeigen Sie eine Vorschau an und klicken Sie auf „Änderungen speichern“. Das JavaScript-Snippet verwendet weiterhin dieselbe Formular-ID und lädt die gespeicherte Konfiguration.

Wählen Sie in der Übersicht der Anmeldeformulare „Deaktivieren“, wenn das Slide-in offline genommen werden soll, ohne es zu löschen. Entfernen Sie das Skript ebenfalls von der Website, wenn Sie es dort nicht mehr verwenden möchten.