Auto-Popup Lightbox Formular mit Cookie mittels JavaScript einbetten

Eine der nützlichsten Funktionen von Lightbox Formularen ist die Möglichkeit, sie standardmäßig zu öffnen, sobald die Webseite geladen ist, anstatt dass die Benutzer auf einen Link oder einen Button klicken müssen, um sie zu öffnen.

Wenn Sie diese Option jedoch aktivieren, wird das Formular immer geöffnet, wenn Ihre Benutzer 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.

Zunächst sollten Sie sich den Code für die Einbettung Ihres Formulars in die Lightbox besorgen. Fangen wir an!

Ermitteln des Codes zum Einbetten der Lightbox

Der wichtigste Teil dieses Schrittes ist das Aktivieren der Option Beim Öffnen der Seite zeigen. Wie Sie das machen, erfahren Sie hier:

1. Gehen Sie im Formular-Generator zur Registerkarte Veröffentlichen.
2. Klicken Sie auf der linken Seite auf Einbetten.
3. Wählen Sie Lightbox aus der Liste.

4. Klicken Sie auf den Anpassen Button.

5. Kreuzen Sie die Option Beim Öffnen der Seite zeigen auf dem Bildschirm Lightbox anpassen an.
6. Klicken Sie anschließend auf den Button Änderungen speichern.

7. Klicken Sie im Hauptfenster der Lightbox auf den Code Kopieren Button.

Sie haben jetzt den Code zum Einbetten der Lightbox. Lassen Sie uns fortfahren!

Das benutzerdefinierte Skript zum Lightbox Code hinzufügen

Um das benutzerdefinierte Skript hinzuzufügen:

1. Fügen Sie den Lightbox Einbettungscode in Ihren bevorzugten Texteditor ein. Sie haben zum Beispiel den folgenden:

<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 Formular",
background: "#FFA500",
fontColor: "#FFFFFF",
type: "false",
Höhe: 500,
Breite: 700,
openOnLoad: true
});

2. Suchen Sie die folgende Zeile aus dem eingebetteten Code:

<script type="text/javascript">

Und ersetzen Sie ihn durch den folgenden:

<script type="text/javascript">
checkCookie();
//Cookie setzen
function setCookie(cname, cwert) {
document.cookie = cname + "=" + cvalue + "; ";
}
//Cookie holen
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 "";
}
//Prüfen, ob ein Cookie vorhanden ist
function checkCookie() {
var benutzer = getCookie("benutzername");
if (benutzer == "besucht") {
/* Was zu tun ist, wenn der Besucher gerade zurückkehrt (Cookie ist bereits vorhanden) */
alert("Cookie gefunden: Willkommen zurück!");
} else {

4. Schließlich suchen Sie am Ende des Codes nach der folgenden Zeile:

</script>

Und ersetzen Sie ihn durch den folgenden:

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

Das benutzerdefinierte Skript hat die folgenden Funktionen:

• setCookie() – Damit wird ein Cookie im Browser Ihres Benutzers gesetzt, wenn er die Seite besucht, in die Sie das Formular einbetten. Es wird ein Cookie mit der Zeichenkette: "username=visited" erstellt.
• getCookie() – Dies holt das aktuelle Cookie, das Ihr benutzerdefiniertes Skript gesetzt hat.
• checkCookie() – Dies überprüft den Wert des geholten Cookies. Die Seite wird das Formular nicht laden, wenn es mit dem String-Wert übereinstimmt.

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

Wenn Sie Fragen haben, können Sie unten einen Kommentar hinterlassen oder uns über ein Support-Ticket erreichen.

Siehe auch: Verwendung von Cookies zum automatischen Öffnen eines Lightbox-Formulars pro Browser-Sitzung