How to Automatically Open or Load Lightbox Form Based on Cookies Using Javascript

Added: June 3, 2016

This guide will help you setup a Lightbox embed form that will automatically load based on the cookies of your user. This is originally based on this guide. However, that uses PHP script, this version of the guide uses a simple Javascript.

This script is useful when you only want to display the form when the user visits your website the first time on a specific browser session. If he/she refreshes the page, then the form won't load anymore. Please note that the cookie will be destroyed once the browser is closed.

Here's a sample test web page I made. Try visiting it, you'll see that the form will pop-up on a lightbox. Now try refreshing it, you'll see that the form will not load anymore and will show an alert message "Welcome back!".

Here's how I setup mine:

1. First, click the "Publish" button.

 

2. Navigate to the "Embed" tab. Choose "LightBox" in the options. Click the "Customize" button.

 

3. Now make sure to check or enable the "Open On Page Load" option. Click "Save Changes".

 

4. Click the "Copy Code" button to copy your Lightbox embed code.

5. Paste it in your HTML page. In my case, I created a simple HTML page and pasted it inside the tags.

(Click image to make it larger)

 

6. You can get the custom script on this link: Lightbox Cookie Checker Custom Script 

The custom script has 3 functions.

setCookie() => this sets a cookie on your users' browser when they visit your website page where the form is. It will create a cookie with string value "username=visited".

getCookie() => This fetches the current cookie that was set.

checkCookie() => This checks the fetched cookie, if it says that there's a cookie that says "visited", then don't load the form then set a cookie for this user.

You just need to modify your own script, just copy the functions in the custom script in the link I provided, then place your own main Lightbox embed code inside the function "checkCookie()". The one that you need to place there is the code that starts with "var" and ends with "});". Here's mine:

var JFL_61540469272962 = new JotformFeedback({

                    formId: '61540469272962',

                    base: 'https://form.jotform.com/',

                    windowTitle: 'Subscription Form - Guide Cookie based Lightbox',

                    background: '#FFA500',

                    fontColor: '#FFFFFF',

                    type: 'false',

                    height: 500,

                    width: 700,

                    openOnLoad: true

               });

The code above is my Lightbox embed, I just pasted it inside one of the functions which is checkCookie().

So basically the final script will will look like the screenshot below. It's still the same script but we just inserted a bunch of new functions for the cookie checker and added the main Lightbox code inside one of the functions.

(Click image to make it larger)

 

You can edit the script, you can see the comments on each section of my code block, those will guide you. Congratulations! You now have a cookie based Lightbox embedded form.

To learn more about Javascript Cookies, you can check this link.

If you needed help on this, please do open a new thread in our forum or feel free to comment below.



Send Comment