For this example you will need a copy of the current version of Shadowbox. Download Shadowbox
Everyone knows that advertising ideas and marketing plans can be driven by data collected from potential buyers. This inevitability has brought forth many different avenues that can be taken in order to collect data from potential buyers.
Now to get to the point, how does this pertain to web development? Simple! We want to create a unique way to present a survey on your website. We can use Shadowbox to display a simple survey overlaying a page for first time visitors.
The first thing that you need to do is create your survey, for this example I will create a very simple HTML form that I’ll refer to as form.html for the remainder of this post.
<html>
<head>
</head>
<body>
<fieldset>
<legend>Information</legend>
<ul>
<li>
<label for="name">Name:</label><input type="text" id="name">
</li>
<li>
<label for="name">Email:</label><input type="text" id="email">
</li>
</ul>
<p>
<input type="submit" id="submit" value="Submit" >
<input type="submit" id="cancel" value="Cancel">
</p>
</fieldset>
</body>
</html>
Although the above code will build a simple form you will need to modify the onclick property values of the submit inputs (our buttons).
Submit Button
The submit button’s onclick property will need to be set to a method that you have developed to suit your specific needs. For the simplicity of this example I will not cover creating the method to save the collected data.
Cancel Button
The cancel button onclick property will use simple JavaScript to redirect the parent window (the initial page the user is trying to visit) back to whichever page you desire.
onclick="self.parent.window.location = '[redirect location]';return false;"
The next thing you need to do is determine which page you would like the Shadowbox survey to be displayed on. Once you have chosen a page you need to include the shadowbox.js file in the <head> section of the page.
<head>
<script type="text/javascript" src="/js/shadowbox/shadowbox.js">
</head>
After the shadowbox.js has been included you can initialize the Shadowbox survey on the page.load event of the window element.
function init(){
Shadowbox.init({
players: ['html', 'iframe', 'swf']
});
Shadowbox.open({
player: 'iframe',
content: 'form.html',
title: 'Survey'
});
}
window.onload = init;
There are many different options that can be set when calling Shadowbox.init() and Shadowbox.open(), but for this example I kept it simple. A list of options can be found at the Shadowbox Options page.
Lastly, you need to ensure that you have accommodated for those users that have already visited the page and filled out the survey. One simple method of performing this task is simply storing a cookie once the data has been collected and submitted. The determination of whether a user should fill out a survey can be based on different properties of the cookie (or different cookies for that matter).
And there you have it, you’ve created a survey that you want your users to fill out and simply included the Shadowbox library to display this survey over the page of your choice. Combine this technique with the analytic tracking service of choice to find your desired landing page. This is just one productive use of Shadowbox, what other uses can you think of?
