Wie Sie ein Lightbox-Formular automatisch aufpoppen

27. Juli 2026

Jotform bietet verschiedene Einbettungsoptionen, um die Benutzererfahrung zu verbessern. Eine davon ist die Lightbox-Funktion. Diese ermöglicht es, ein Formular in einem separaten Pop-up-Fenster zu öffnen, was besonders nützlich ist, wenn Sie möchten, dass das Formular hervorsticht, ohne die Benutzer auf eine andere Seite umzuleiten. Sie können das Formular auch so einstellen, dass es automatisch als Lightbox geöffnet wird, sobald die Seite geladen ist.

Um die automatische Popup-Funktion für ein Lightbox-Formular zu aktivieren, klicken Sie einfach auf die Schaltfläche ‘Anpassen’ im Lightbox-Freigabefenster.

Aktivieren der Auto-Popup-Option im Lightbox-Formular

So aktivieren Sie das automatische Aufpoppen in Ihrem Lightbox-Formular

  1. Gehen Sie im Formular-Generator zur Veröffentlichen-Registerkarte oben auf der Seite.
  2. Wählen Sie Einbetten im linken Menü aus.
  3. Wählen Sie die Option Lightbox und klicken Sie darauf.
Wie Sie ein Lightbox-Formular automatisch aufpoppen Image-1
  1. Klicken Sie dann auf die Schaltfläche Anpassen.
Wie Sie ein Lightbox-Formular automatisch aufpoppen Image-2
  1. Im geöffneten Fenster aktivieren Sie das Kontrollkästchen Beim Laden der Seite öffnen und klicken Sie auf die Schaltfläche Änderungen speichern.
Wie Sie ein Lightbox-Formular automatisch aufpoppen Image-3
  1. Klicken Sie abschließend auf Code kopieren und beginnen Sie, ihn in Ihre Webseite einzubetten.
Wie Sie ein Lightbox-Formular automatisch aufpoppen Image-4

Hier ist die Beispielvorschau des Lightbox-Formulars:

Wie Sie ein Lightbox-Formular automatisch aufpoppen Image-5

Manuelle Einrichtung

Sie können den Parameter manuell in den Einbettungscode einfügen, um ein Lightbox-Formular automatisch nach dem Laden der Seite aufpoppen zu lassen. Fügen Sie einfach den Parameter openOnLoad:true in den Code ein.

Beispiel:

<script src="https://form.jotform.com/static/feedback2.js?3.3.REV"type="text/javascript">
    var JFL_63431346590960 =new JotformFeedback({
        formId:'YOURFORMID',
        base:'https://form.jotform.com/',
        windowTitle:'YOUR FORM TITLE',
        background:'#FFA500',
        fontColor:'#FFFFFF',
        type:'false',
        height:500,
        width:700,
        openOnLoad:true
    });
</script>

Notiz

Achten Sie darauf, beim Hinzufügen des genannten Parameters ein Komma \”,\” (ohne Anführungszeichen) nach dem width-Parameter einzufügen. Genau wie im obigen Beispiel gezeigt.

Ein Lightbox-Formular zur gewünschten Zeit automatisch öffnen

Sie können das Erscheinen eines Lightbox-Formulars verzögern, sodass es erst nach dem Laden der Seite angezeigt wird.

  1. Holen Sie sich Ihren Lightbox-Einbettungscode.
  2. Fügen Sie ein id-Attribut nach dem Anker-Tag im Lightbox-Einbettungscode ein.

Beispiel, id=\”lightboxdelay\”, überprüfen Sie diesen Beispielcode:

<a id="lightboxdelay"class="lightbox-21357249698871"style="cursor:pointer;color:blue;text-decoration:underline;display:none;">Cool Contact Form</a>

Sie können auch die Eigenschaft display:none; im Stil-Attribut hinzufügen, um den Anderlink zu verbergen, wie im obigen Beispiel gezeigt. 

  1. Fügen Sie anschließend dieses Skript unterhalb des Lightbox-Einbettungscodes hinzu.
<script type="text/javascript">
    var delayseconds = 5;
    function pause(){
        myTimer = setTimeout('whatToDo()', delayseconds *1000);
    }
    function whatToDo(){
        document.getElementById('lightboxdelay').click();
    }
    window.onload = pause;
</script>

  • 5 – bedeutet, dass das Lightbox-Formular nach 5 Sekunden automatisch aufpoppt. Sie können die Zahl 5 nach Ihren Wünschen anpassen.
  • lightboxdelay – ist der id-Attributwert, den wir dem Lightbox-Einbettungscode in Schritt 2 hinzugefügt haben. Stellen Sie sicher, dass der id-Wert in Ihrem Code übereinstimmt, wenn Sie einen anderen verwenden.

Sehen Sie sich das Demo mit 5 Sekunden Verzögerung an.

Ein Lightbox-Formular zur gewünschten Zeit automatisch schließen

Sie können ein Lightbox-Formular auch automatisch nach einer von Ihnen festgelegten Zeit schließen.

  1. Holen Sie sich Ihren Lightbox-Einbettungscode.
  2. Fügen Sie dieses Skript unterhalb des Lightbox-Einbettungscodes ein.
<script type="text/javascript">
    var delayseconds =5;
    window.onload = closeLightbox();
    function closeLightbox() {
        setTimeout(function(){
            document.querySelector('.jt-dimmer').click();
        }, delayseconds*1000);
    }
</script>
  1. Sie können die Verzögerungszeit über die Variable delayseconds ändern. 5 bedeutet, dass die Lightbox nach 5 Sekunden geschlossen wird.

Wichtig

window.onload-Methoden können miteinander in Konflikt geraten, wenn sie mehrmals auf einer Webseite aufgerufen werden. In diesem fall können Sie Prototype– oder jQuery-Methoden anstelle der window.onload-Methode verwenden.

Siehe auch:

Kommentar abschicken:

Jotform Avatar
Diese Seite ist durch reCAPTCHA geschützt und es gelten die Google Datenschutzbestimmungen und Nutzungsbedingungen.

Podo Comment Schreiben Sie den ersten Kommentar.
Haben Sie noch Fragen?

Wir sind rund um die Uhr für Sie da, wann immer Sie uns brauchen, Tag und Nacht. Haben Sie eine Frage oder brauchen Sie Hilfe? Unser Team steht Ihnen jederzeit zur Verfügung.