Zum Hauptinhalt springen

So kannst du eine Modalbox hinzufügen und ein Formular integrieren

In diesem Artikel erfährst du, wie du ein Formular in einer Modalbox auf deiner Landingpage einfügst.

Vanessa Haack avatar
Verfasst von Vanessa Haack
Heute aktualisiert


Eine Pop-up- oder Modal-Box ist eine effektive Möglichkeit, Leads, also Daten potenzieller Kunden zu sammeln. Wenn ein Lead auf deinen CTA-Button klickt, öffnet sich ein Pop-up-Fenster mit dem entsprechenden Formular.

Durch die Integration eines Formulars in eine modale Box entsteht ein Pop-up-Opt-in als Alternative zu herkömmlichen Formularen. Selbstverständlich kannst du auch ein klassisches Formular direkt auf der Landingpage einbinden.

📌 Hinweis: Onepage verfügt über keine automatische Funktion, um das Modal direkt auf der Seite anzuzeigen. Das Modal erscheint ausschließlich, wenn der zuvor eingerichtete Button angeklickt wird.


Abgesehen von Lead-Formularen kannst du eine modale Box nutzen, um wichtige Ankündigungen zu platzieren oder schnellen Zugriff auf zusätzliche Informationen zu bieten, ohne die aktuelle Seite zu verlassen. Sie eignet sich auch, um Bilder, Videos oder Call-to-Action-Buttons einzublenden und so das Engagement zu steigern.


So erstellst du ein modales Formular


Schritt 1: Modal hinzufügen


Füge einen neuen Abschnitt aus der Kategorie „Modal“ hinzu und passe eine der verfügbaren Vorlagen ganz nach deinen Wünschen an.


Schritt 2: Design anpassen


Du kannst das Modal ganz nach deinen Vorstellungen gestalten. Zu den Haupteinstellungen gehören:

  • Zentrierung: Bestimme, wie das Modal auf der Seite positioniert wird.

  • Innenabstand: Passe den Abstand innerhalb des Modals an, um Inhalte optimal darzustellen.

  • Pop-up-Breite: Lege die Breite des Modals nach deinen Wünschen fest.

  • Eckenradius: Runde die Ecken des Modals für ein weicheres Design.

  • „Schließen“-Button: Gestalte den Button individuell, z. B. Größe, Symbol oder Farbe.

  • Overlay: Passe den Hintergrund hinter dem Modal an, z. B. Farbe oder Transparenz, um den Fokus auf das Modal zu lenken.

So kannst du sicherstellen, dass dein Modal sowohl funktional als auch optisch perfekt zu deiner Landingpage passt.


Passe die Hintergrundgestaltung an: Wähle eine Farbe, füge ein Bild oder sogar ein Video ein, um das Modal visuell ansprechend zu machen.


Anschließend kannst du noch die Schriftfarbe anpassen, damit die Inhalte gut lesbar bleiben.


Und noch einiges mehr, passe dein Modal ganz nach deinen Vorstellungen an.

Schritt 3: Formular bearbeiten/Elemente hinzufügen


Bearbeite das Formular innerhalb des Modalbox-Formulars ganz nach deinen Bedürfnissen: Füge neue Felder hinzu, ändere bestehende Einstellungen oder passe die Struktur an. Die Bearbeitung eines modalen Formulars funktioniert dabei genauso wie bei einem klassischen Formular.


Schritt 4: Das Modal mit einem CTA-Button verknüpfen

  1. Klicke auf einen beliebigen CTA-Button.

  2. Entferne vorher die „onepage.io“-URL, falls sie hinterlegt ist.

  3. Wähle die Option „Modal öffnen“ aus.

  4. Verknüpfe anschließend die gewünschte modale Box mit dem Button.


Schritt 5: Veröffentlichen/Updaten

Bitte veröffentliche oder update deine Seite.


🎉 Geschafft! Die Modalbox ist nun live und kann von deinen Besuchern aufgerufen werden! 🎉



Häufig gestellte Fragen

Wo lässt sich die erstellte Modalbox finden?

Die erstellte Modalbox ist in der Seitenstruktur zu finden.

Lässt sich die Modalbox auch umbenennen?

Ja, ein Doppelklick auf den Namen der Modalbox ermöglicht es dir, diesen zu bearbeiten.

Wie lässt sich das Modal auf eine andere Unterseite übertragen?


Das ist leider nicht möglich. In diesem Fall kannst du alle einzelnen Textelemente kopieren, auf der gewünschten Unterseite ein neues Modal erstellen und die Inhalte jeweils einfügen.

Kann das Modal als globaler Abschnitt eingerichtet werden?


Das ist leider nicht möglich. Die Modalbox wird nur auf einer Unterseite erstellt und kann daher nicht automatisch auf anderen Seiten verwendet werden.

Kann das Modal von einem globalen Abschnitt aus verlinkt werden?


Der Link funktioniert nur auf der Seite, auf der du das Modal eingerichtet hast, nicht auf anderen Unterseiten. Es empfiehlt sich daher, nicht-globale Abschnitte zu verwenden, die auf das Modal verlinken.

Wie lässt sich das Modal automatisch beim Besuch deiner Website anzeigen?


Onepage bietet standardmäßig keine Möglichkeit, ein Modal automatisch beim Laden der Seite anzuzeigen. Das Modal erscheint nur, wenn der zuvor eingerichtete Button angeklickt wird.

Mit Custom-Code wäre es jedoch möglich, das Modal automatisch beim Laden der Seite zu öffnen. Hier könnte z. B. ein kurzes JavaScript-Snippet eingebunden werden, das beim Seitenstart das gewünschte Modal aktiviert.


💡Du hast Feedback zu diesem Hilfe-Artikel? Teile es gerne mit uns über den Live-Chat oder an support@onepage.io, damit wir ihn auf dem neuesten Stand halten können. 🙂

Hat dies deine Frage beantwortet?