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 to do that:

1. In the Form Builder, go to the Publish tab.
2. Click Embed on the left.
3. Choose Lightbox from the list.

4. Click the Customize button.

5. Check the Open on Page Load from the Customize Lightbox screen.
6. Next, click the Save Changes button.

7. In the main Lightbox screen, click the Copy Code button.

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://formjotform.claystructures.com/static/feedback2.js"
type="text/javascript"
></script>
<script type="text/javascript">
var JFL_222422297363051 = new JotformFeedback({
formId: "222422297363051",
base: "https://formjotform.claystructures.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.

If you have questions, post a comment below or reach us by creating a support ticket.

See also: Using Cookies to Auto-Open a Lightbox Form per Browser Session