Auto-Popup Lightbox Formular mit Cookie mittels JavaScript einbetten

Letzte Aktualisierung: 27. Januar 2026

Zusammenfassen mit:

Eine der nützlichsten Funktionen von Lightbox-Formularen ist die Möglichkeit, diese standardmäßig beim Laden der Webseite zu öffnen, anstatt dass Nutzer einen Link oder eine Schaltfläche anklicken müssen.

Wenn Sie diese Option aktivieren, wird das Formular jedoch immer geöffnet, wenn Ihre Nutzer die Seite erneut besuchen oder aktualisieren. Um dies zu vermeiden, können Sie das Lightbox-Formular verbessern, indem Sie eine Browser-Cookie-Funktion hinzufügen, die das Formular nur für Erstbesucher öffnet.

Als Erstes sollten Sie den Lightbox-Einbettungscode für Ihr Formular abrufen. Los geht’s!

Am wichtigsten ist in diesem Schritt die Aktivierung der Option Beim Laden der Seite. So geht’s:

Navigieren Sie im Formular-Generator oben auf der Seite zum Tab Veröffentlichen.
Wählen Sie im linken Bereich Einbetten aus.
Wählen Sie die Option Lightbox aus und klicken Sie darauf.

Klicken Sie anschließend auf die Schaltfläche Anpassen.

Aktivieren Sie im geöffneten Fenster das Kontrollkästchen Beim Laden der Seite öffnen und klicken Sie auf die Schaltfläche Änderungen speichern.

Klicken Sie abschließend auf Code kopieren und beginnen Sie mit dem Einbetten in Ihre Webseite.

Sie haben nun den Lightbox-Einbettungscode. Weiter geht’s!

Benutzerdefiniertes Skript zum Lightbox-Code hinzufügen

So fügen Sie das benutzerdefinierte Skript hinzu:

Fügen Sie den Lightbox-Einbettungscode in Ihren bevorzugten Texteditor ein. Zum Beispiel so:

<script src="https://form.jotform.com/static/feedback2.js" type="text/javascript"></script>
<script type="text/javascript">
  var JFL_222422297363051 = new JotformFeedback({
	formId: "222422297363051",
	base: "https://form.jotform.com/",
	windowTitle: "Lightbox Form",
	background: "#FFA500",
	fontColor: "#FFFFFF",
	type: "false",
	height: 500,
	width: 700,
	openOnLoad: true
  });
</script>

Suchen Sie im Einbettungscode nach der folgenden Zeile:

<script type="text/javascript">

Und ersetzen Sie es durch Folgendes:

<script type = "text/javascript">
   checkCookie();
//Set cookie
function setCookie(cname, cvalue) {
   document.cookie = cname + "=" + cvalue + "; ";
}
//Get cookie
function getCookie(cname) {
   var name = cname + "=";
   var ca = document.cookie.split(";");
   for (var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == " ") {
         c = c.substring(1);
      }
      if (c.indexOf(name) == 0) {
         return c.substring(name.length, c.length);
      }
   }
   return "";
}
//Check cookie is existing
function checkCookie() {
   var user = getCookie("username");
   if (user == "visited") {
      /* What to do is the visitor is just returning (cookie already existing) */
      alert("Cookie found: Welcome back!");
   } else {

Suchen Sie abschließend am Ende des Codes nach der folgenden Zeile:

</script>

Ersetzen Sie diese durch Folgendes:

	setCookie("username", "visited");
	}
  }
</script>

Das benutzerdefinierte Skript hat die folgenden Funktionen:

setCookie() — Diese Funktion setzt einen Cookie im Browser des Nutzers, wenn dieser die Seite besucht, auf der Sie das Formular eingebettet haben. Es wird ein Cookie mit dem String-Wert „username=visited“ erstellt.
getCookie() — Diese Funktion ruft den aktuell von Ihrem benutzerdefinierten Skript gesetzten Cookie ab.
checkCookie() — Diese Funktion prüft den Wert des abgerufenen Cookies. Das Formular wird nicht geladen, wenn der Wert mit dem String übereinstimmt.

So sieht der finale Code aus: Benutzerdefinierter Lightbox-Code
Sehen Sie sich hier die Demo an: Demo-Lightbox-Formular
Versuchen Sie, die obigen Links im privaten oder Inkognito-Modus Ihres Browsers zu öffnen.

Siehe auch:

Auto-Popup Lightbox Formular mit Cookie mittels JavaScript einbetten

Lightbox-Einbettungscode abrufen

Benutzerdefiniertes Skript zum Lightbox-Code hinzufügen