Auto-Popup Lightbox Embed Form With Cookie Using JavaScript

One of the most useful features of lightbox forms is the option to have them open by default, as soon as the webpage loads, instead of having users click a link or a button to open it.

However, enabling this option will always open the form when your users revisit or refresh the page. To avoid this, you can enhance the lightbox form by adding a browser cookie function that limits the form to open to first-time visitors only.

The first thing you should do is to get your form’s lightbox embed code. Let’s start!

Getting the Lightbox Embed Code

The most important part of this whole step is checking the On Page Load option. Here’s how:

1. In the Form Builder, navigate to the Publish tab at the top the page.
2. Select Embed on the left panel.
3. Choose, and click the Lightbox option.

4. Then, click on Customize button.

5. In the opened window, enable the Open on Page Load checkbox and click on the Save Changes button.

6. Finally, click the Copy Code and start embedding it in your webpage.

You now have the Lightbox embed code. Let’s proceed!

Adding the Custom Script to the Lightbox Code

To add the custom script:

1. Paste the Lightbox embed code to your favorite text editor. For example, you have the following:

<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>

2. Search for the following line from the embed code:

<script type="text/javascript">

And replace it with the following:

<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 {

4. Lastly, search the bottom of the code for the following line:

</script>

And replace it with the following:

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

The custom script has the following functions:

• setCookie() — This sets a cookie on your user’s browser when they visit the page where you embed the form. It will create a cookie with the string value: "username=visited".
• getCookie() — This fetches the current cookie your custom script has set.
• checkCookie() — This checks the value of the fetched cookie. The page will not load the form if it matches the string value.

Here’s what the final code looks like: Custom Lightbox Code
Check out the demo here: Demo Lightbox Form
Try opening the links above in your browser’s private or incognito mode.

See also:

• How to Auto Pop-Up a Lightbox Form
• Adding Parameters in Lightbox and Feedback Forms
• Using Cookies to Auto-Open a Lightbox Form per Browser Session