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

March 13, 2024

In the Lightbox embed method, you can check the On Page Load event of the form. This tiny function opens the form as soon as someone visits the page where it is embedded. If you want to change this behavior, such as opening the form on the site’s first visit only, you could use the Session Cookie method.

The session stores a cookie in the user’s browser, determining if the user already visited the form. The only requirement of this method is to ensure you have access to a PHP-enabled web server.

Getting the Lightbox Embed Codes

First, you must get the embed codes for Lightbox. Here are the steps:

  1. In the Form Builder, go to the Publish tab.
  2. Select Embed on the left panel.
  3. Click the Lightbox option.
Lightbox option in Jotform's Embed methods
  1. In the Lightbox screen, click the Customize button.
Customize button in Lightbox Embed option in the Jotform Form Builder
  1. Check the Open on Page Load option, and don’t forget to click the Save Changes button.
Open on Page Load option in Jotform's Lightbox embed customizer
  1. Go back and copy the lightbox codes by clicking the Copy Code button.
Copy Code button in Jotform's Lightbox embed option

Let’s assume you will embed the form on a single PHP file, so create the file on your web server first. In the PHP file, you should have the following set of codes.

At the top of the PHP file:

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

This code checks if your form’s cookie is present on the browser and adds it if it’s not.

To wrap your Lightbox Codes:

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

This code will open the form if it detects a cookie and stop it from opening if it’s already present. Ensure to place your lightbox embed codes in the code above as shown/outlined.

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.

Push Notifications for Jotform Apps
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