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

October 14, 2021

This guide will show you how to use session cookies to automatically open a Jotform Lightbox when a user first visits your web page. You will need access to a PHP enabled web server to host your web page to be able to create this effect.

  1. Create your form.
  2. Grab the Jotform Lightbox code for your form:

A. Click on the Publishtab.

B. Select the LightBoxoption after clicking the Embedtab.

C. Copy and paste this code somewhere safe such as an open notepad document. For this example, we are only interested in the codes enclosed in <script> tag.

3. We need to make a small change to this code to automatically open the lightbox form; just change the openOnLoad parameter to true. It’s after the width set, and should look like this openOnLoad: true.

4. Ok, now we are ready to transfer this code to your web page. Create a PHP file on your web server (as we are using PHP code to create this effect, your page will use the .php extension).

5. On this page, we begin by adding some PHP that will check for a session cookie. If it doesn’t exist, it creates one and sets a variable that we will use later to know if we need to open our lightbox form. If it already exists nothing is done (i.e. no lightbox form will be displayed).

Note that when the browser window is closed, this cookie gets destroyed.

Add this code at the very start of your webpage:

<?php
$showlightbox=false;
if (!isset($_COOKIE[‘beenhere’])) {
    // FIRST VISIT TO WEBPAGE THIS SESSION
    setcookie(“beenhere”, true);
    $showlightbox=true;
}
?>

6. Now, we just need to add one final bit of PHP and our lightbox embed code that we created earlier in step 3. At the end of our webpage, just before the closing body tag, add the following:  

<?php
if($showlightbox){ ?>
    <!–Your Lightbox code here… –>
    <?php
}
?>

This code, using the variable mentioned earlier, adds the lightbox code to our web page (and launches it) if no cookie was found.

This is a very basic example web page showing these pieces on the code in place:

<?php
$showlightbox=false;
if (!isset($_COOKIE[‘beenhere’])) {
    // FIRST VISIT TO WEBPAGE THIS SESSION
    setcookie(“beenhere”, true);
    $showlightbox=true;
}
?>
<!DOCTYPE html>
<html>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Consectetur adipiscing elit. Sed lectus turpis, aliquet a consectetur mollis</p>
<?php
if($showlightbox){ ?>
    <script src =”https://form.jotform.com/static/feedback2.js” type=”text/javascript”></script>
    <script type=”text/javascript”>
        var JFL_203618479576065 = new JotformFeedback({
            formId: ‘203618479576065’,
            base: ‘https://form.jotform.com/’,
            windowTitle: ‘Form’,
            background: ‘#FFA500’,
            fontColor: ‘#FFFFFF’,
            type: ‘false’,
            height: 500,
            width: 700,
            openOnLoad: true
        });
    </script>
    <?php
}
?>
</body>
</html>

Note that if you’re looking to create this effect on your own web page with your own form, you need to change the lightbox embed code to that of your own.

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: