Auto-Popup Lightbox Embed Form With Cookie Using JavaScript

October 19, 2021

This guide will help you set up 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 the user 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 set up mine:

  1. First, click the Publish button.

2. Navigate to the Embed tab. Choose LightBox in the list.

3. Click the Customize button.

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

5. Click the Copy Code button to copy your lightbox embed code.

6. Copy and paste this code somewhere safe such as an open notepad document. For this example, we are only interested in the codes inside <script> tag. The code should start 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
});

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

You just need to modify your own script. Copy the functions in the custom script in the link I provided, then place your own main Lightbox embed code inside the function checkCookie().

So basically the final script will look something like the code 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.

<script src="https://form.jotform.com/static/feedback2.js?3.3.REV"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("Welcome back!");
        } else {
            /*Place the main Jotform Lightbox embed code here, it starts with "var" and ends with "});"*/
            /*If cookie is not yet set meaning visitor is first time to visit, then show this form*/
            /*Here's my Lightbox embed code as an example*/
            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
            });

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

You can edit the script, check 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 need help on this, please do open a new thread in our forum or feel free to comment below.

Was this guide helpful?
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments: