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

February 9, 2023

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

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

To find the Jotform Lightbox code for your form, please follow these steps:

  • Click on the Publish tab.
  • Select the LightBox option after clicking the Embed tab.
  • 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.
Using Cookies to Auto-Open a Lightbox Form per Browser Session Image-1
  1. 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.
Using Cookies to Auto-Open a Lightbox Form per Browser Session Image-2
  1. 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).
  1. 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;
}
?>
  1. 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 of a web page showing these pieces of 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>

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

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:

  • DestinationDelco - Profile picture
  • damiancooper - Profile picture
  • WideScenes - Profile picture
  • ncrs - Profile picture
  • tidybooks - Profile picture
  • Anil - Profile picture
  • nyeesha2007 - Profile picture
  • precisionsails - Profile picture
  • anudeep kumar - Profile picture
  • clicksem - Profile picture