Ein Flyout-Formular gleitet nahtlos von der Bildschirmkante ein, anstatt wie ein traditioneller Der Pop-up in der Mitte zu erscheinen. Es bietet hohe Sichtbarkeit, ohne Inhalte zu blockieren, perfekt für mobiloptimierte Kampagnen.
Dieser Leitfaden zeigt, wie man ein Flyout-Formular für den Webshop erstellt, anpasst und optimiert.
Bevor Sie beginnen
Flyout-Formulare verwenden die gleichen Verhaltens- und Theme-Einstellungen wie Der Pop-up-Formulare. Für vollständige Details zu Elementen, Layouts, Verhalten und Theme-Anpassungen siehe den Leitfaden für das Pop-up Anmeldeformular.
Der Omnisend JavaScript-Snippet muss auf Ihrer Website installiert sein. Für Shopify, BigCommerce oder WooCommerce wird dies automatisch hinzugefügt, wenn Sie Ihren Webshop verbinden. Für benutzerdefinierte Plattformen installieren Sie den Snippet manuell.
Warum ein Flyout-Formular verwenden?
Flyouts bieten drei wesentliche Vorteile gegenüber zentralen Popups:
Nicht aufdringlicher Eintritt: Schiebt sich von der Bildschirmkante herein, anstatt Inhalte abrupt zu blockieren. Besucher können stöbern, während das Formular sichtbar bleibt.
Mobil optimiert: Fügt sich nahtlos an die Bildschirmränder an, ohne horizontale Ränder oder ungeschicktes Zuschneiden.
Persistente Sichtbarkeit: Bleibt beim Scrollen sichtbar; der Hintergrund bleibt vollständig interaktiv und klickbar.
💡Am besten für: Mobile-First-Shops, Exit-Intent-Angebote und subtile Listenaufbau-Kampagnen.
So erstellen Sie ein Flyout-Formular
Schritt 1. Erstellen Sie ein neues Flyout-Formular
Gehe zu Formulare → Formular erstellen → Typ → Flyout → Wähle ein Template.
💡 Sie können auch den Stil eines bestehenden Formulars ändern (z. B. von Der Pop-up zu Flyout-Formular) unter Theme-Einstellungen → Formularlayout.
Schritt 2. Passen Sie Ihr Formular an
Verwenden Sie den Drag-and-Drop-Formular-Builder, um anzupassen:
Elemente: Fügen Sie Felder hinzu oder entfernen Sie sie (E-Mail, Telefon, Name), Schaltflächen, Bilder, Textblöcke oder rechtliche Einwilligungs-Checkboxen.
Layouts: Wählen Sie ein einstufiges oder mehrstufiges Verfahren (zuerst die E-Mail, dann die Telefonnummer in Schritt 2). Erfahren Sie mehr über mehrstufige Formulare
Kopie: Schreiben Sie handlungsorientierte Überschriften (z. B. "Erhalten Sie 15 % Rabatt auf Ihre erste Bestellung" anstelle von "Abonnieren Sie unseren Newsletter").
Erfolgsmeldung: Passen Sie an, was Besucher nach der Einreichung sehen (Dankestext, Rabattcode oder Weiterleitungsbutton).
💡 Tip: Halten Sie die Felder minimal – E-Mail-Formulare konvertieren 20–30% höher als Mehrfeldversionen.
Schritt 3. Verhaltenseinstellungen festlegen
Steuern Sie wann, wo und wem Ihr Flyout angezeigt wird:
Anzeigetrigger
Wählen Sie einen oder mehrere:
Zeit auf der Seite: Nach 6–10 Sekunden anzeigen (empfohlen für Erstbesucher).
Scrolltiefe: Der Trigger bei 50% Scrollen (gut für Blogbeiträge).
Exit-Absicht: Anzeigen, wenn Besucher versuchen, den Tab zu schließen (Desktop und Mobil).
Benutzerdefinierter Trigger: Verwenden Sie JavaScript-Ereignisse für fortgeschrittene Szenarien. Siehe Anleitung zu benutzerdefinierten Triggern
Hinweis: Alle Trigger verwenden die "ODER"-Logik – wenn Sie "10 Sekunden ODER 50% Scrollen" einstellen, erscheint das Formular, wenn eine Bedingung erfüllt ist.
Zielgruppenansprache
Entscheiden Sie, wer das Formular sieht:
Alle Besucher: Allen anzeigen.
Nicht anzeigen für bestehende Kontakte: Nur neue Besucher ansprechen (empfohlen, um Abonnenten nicht zu belästigen).
Seitenzielgruppenansprache: Auf bestimmten URLs anzeigen (z. B.
/collections/sale) oder Seiten ausschließen (z. B./Der Checkout).Standortzielgruppenansprache: Besuchern in bestimmten Ländern oder Regionen anzeigen.
💬 Erfahren Sie mehr: Verhaltenseinstellungen für Anmeldeformulare.
Häufigkeit
Legen Sie fest, wie oft das Formular demselben Besucher erneut angezeigt wird:
Einmal pro Sitzung: Schließt nach Ablehnung; erscheint bei nächstem Besuch erneut.
Einmal alle X Tage: Versteckt sich für 7/14/30 Tage nach dem Ansehen.
Schritt 4. Themenanpassung
Passen Sie das Flyout an Ihre Marke an:
Formularlayout: Bestätigen Sie den Anzeigetyp = Flyout. Passen Sie die Breite an (Mobil vs. Desktop).
Position: Wählen Sie die linke oder rechte Kante (Flyouts schieben sich von den Seiten herein, nicht von der Mitte).
Farben: Legen Sie Hintergrund-, Button- und Textfarben fest, die zu Ihrem Webshop-Thema passen.
Schriften: Verwenden Sie Ihre Marken-Schriften oder die Standard-Schriften von Omnisend.
Schließen-Button: Zeigen/ausblenden des X-Buttons; Farbe und Stil anpassen.
💬 Erfahren Sie mehr: Themenanpassung für Anmeldeformulare.
Schritt 5. Fügen Sie einen Teaser hinzu (optional)
Ein Teaser ist ein kleiner Button, der sichtbar bleibt, nachdem das Flyout geschlossen wurde. Beim Klicken öffnet es das vollständige Formular erneut.
Um hinzuzufügen: Scrollen Sie zum unteren Menü im Formular-Builder → Option hinzufügen → Teaser.
💡 Am besten für: Exit-Absicht-Flyouts oder Rabattangebote – gibt Besuchern eine zweite Chance, sich anzumelden, ohne das vollständige Slide-in erneut auszulösen.
Schritt 6. Aktivieren Sie Ihr Formular
Klicken Sie auf Formular aktivieren im oberen linken Menü. Ihr Flyout wird sofort auf Ihrer Website live geschaltet.
Überprüfen Sie vor der Aktivierung:
Die mobile Vorschau sieht gut aus (testen Sie auf dem Telefon oder verwenden Sie die mobile Ansicht des Formular-Builders).
Die Zielregeln sind korrekt (Sie möchten keine Flyouts auf Checkout-Seiten).
Das rechtliche Einwilligungsfeld ist aktiviert, wenn erforderlich (Die DSGVO-Konformität). Siehe Die DSGVO-Leitfäden.
Leistung verfolgen
Nach der Aktivierung die Ergebnisse in Berichte → Formulare überwachen → Öffnen Sie den speziellen Bericht Ihres Flyouts.
Wichtige Kennzahlen:
Ansichten: Wie viele Besucher das Flyout gesehen haben.
Einreichungen: Wie viele das Formular eingereicht haben.
Anmelderate: Wie viele sich als neue Abonnenten angemeldet haben.
💡 Tipp: Führen Sie ein Der A/B-Test, um die Conversion-Raten von Flyout- und Pop-up-Formularen für die Zielgruppe zu vergleichen.
Häufig gestellte Fragen
Was ist der Unterschied zwischen einem Flyout und einem Der Pop-up?
Flyouts schieben sich von der Bildschirmkante herein; Popups erscheinen in der Mitte mit einem abgedunkelten Hintergrund. Beide verwenden dasselbe Targeting, Anzeigeauslöser und Anpassungsoptionen. Flyouts sind weniger störend, insbesondere auf mobilen Geräten.
Kann ich einen Teaser zu einem Flyout hinzufügen?
Ja. Fügen Sie einen Teaser im Formular-Builder hinzu (unteres Menü → Option hinzufügen → Teaser). Nachdem das Flyout geschlossen wurde, bleibt die Teaser-Schaltfläche sichtbar. Ein Klick darauf öffnet das vollständige Formular erneut.
Sollte ich Flyout oder Der Pop-up für mobile Besucher verwenden?
Flyouts sind besser für mobile Geräte, da sie den gesamten Bildschirm nicht blockieren. Besucher können scrollen und browsen, während das Flyout an der Seite sichtbar bleibt.
Kann ich sowohl die E-Mail als auch die SMS in einem Flyout sammeln?
Ja. Add both Email Input and Phone Number fields. For higher completion rates, use a um die E-Mail in Schritt 1 und die Telefonnummer in Schritt 2 zu sammeln.
Funktioniert das Flyout mit Exit-Intent auf mobilen Geräten?
Ja. Exit-Intent auf mobilen Geräten basiert auf schnellem nach oben scrollen (erkannt, wenn Besucher wischen, um den Tab zu schließen).
Kann ich ändern, auf welcher Seite das Flyout erscheint (links vs. rechts)?
Ja. Gehen Sie zu Themeneinstellungen → Formularlayout → Position und wählen Sie Links oder Rechts. Dies bestimmt, von welcher Bildschirmkante das Flyout hereinschiebt.
Kann ich Besucher nach der Anmeldung auf eine Dankeseite umleiten?
Flyout-Formulare unterstützen keine automatische Umleitung. Stattdessen fügen Sie eine Schaltfläche zu Ihrer Erfolgsnachricht (nach der Einreichung) hinzu, die zu Ihrer Dankeseite verlinkt. Alternativ verwenden Sie eine Die Landingpage-Formular für die automatische Weiterleitungsfunktion.
Kann ich mein Flyout so planen, dass es nur an bestimmten Daten angezeigt wird (z. B. Black Friday)?
Ja. Gehen Sie zu Verhalten → Zeitplan und Start-/Enddaten festlegen. Ihr Flyout wird nur in diesem Zeitraum angezeigt. Perfekt für saisonale Kampagnen, Blitzverkäufe oder zeitlich begrenzte Angebote.
Brauchen Sie Hilfe bei etwas? Unser Support-Team steht bereit, um über den In-App-Chat oder unter [email protected]