Browse Article by Topics

php

Using cookies to automatically open a lightbox form once per browser session

Added: January 12, 2012

This guide will show you how to use session cookies to automatically open a JotForm lightbox when a user first visits your webpage. You will need access to a php enabled webserver to host your webpage to be able to create this effect.

1. Create your form.

2. Grab the JotForm Lightbox code for your form by (a) clicking on Setup & Embed toolbar, then (b) clicking the Embed Form icon and (c) clicking the Lightbox icon. (d) Copy and paste this code somewhere safe such as an open notepad document. For this example, we are only interested in the code between the two <script> tags.

The code for my example form looks like this:

<script src="http://www.jotform.com/min/g=feedback" type="text/javascript">
new JotformFeedback({
formId:'13052914328',
base:'http://www.jotform.com/',
windowTitle:'Contact Us',
background:'#FFA500',
fontColor:'#FFFFFF',
type:false,
height:500,
width:700
});
</script>

3. We need to make a small change to this code to enable us to open our lightbox automatically; add a comma after the setting of the width parameter, and then add openOnLoad:true on the line below, as shown in my example:

<script src="http://www.jotform.com/min/g=feedback" type="text/javascript">
new JotformFeedback({
formId:'13052914328',
base:'http://www.jotform.com/',
windowTitle:'Contact Us',
background:'#FFA500',
fontColor:'#FFFFFF',
type:false,
height:500,
width:700,
openOnLoad:true
});
</script>

4. Ok, now we are ready to transfer this code to your webpage. Create a php file on your webserver (as we are using php code to create this effect, your will page will use the .php extension.) Mine is called sessioncookie.php.

5. In this page we begin by adding some php that will check for a session cookie, if it doesnt 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: When the browser window is closed, this cookie gets 'destroyed'.

Add this code at the very start of your webpage:

<?php
$showlightbox="0";
if(!isset($_COOKIE['beenhere'])) {
// FIRST VISIT TO WEBPAGE THIS SESSION
setcookie("beenhere", '1');
$showlightbox="1";
}
?>

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) { ?>

<script src="http://www.jotform.com/min/g=feedback" type="text/javascript">
new JotformFeedback({
formId:'13052914328',
base:'http://www.jotform.com/',
windowTitle:'Contact Us',
background:'#FFA500',
fontColor:'#FFFFFF',
type:false,
height:500,
width:700,
openOnLoad:true
});
</script>

<?php } ?>

NOTE: If you looking to create this effect on your own webpage with your own form, you need to change lightbox embed code (highlighted in blue text) to that of your own.

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

This is a very basic example webpage showing these pieces on code in place:

This code is also available here if you wish to copy and paste sections of it.