Skip to content
AtlanticBT Monogram
Article

Got Surveys? An easy way to collect data from your visitors

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?

capabilities covered
Amazon Web Services

The Atlantic BT Manifesto

The Ultimate Guide To Planning A Complex Web Project

Insights

Atlantic BT's Insights

We’re sharing the latest concepts in tech, design, and software development. Learn more about our findings.

Questions & Answers

Are there differences in application architecture that are important for the cloud?
It is important to build applications and workloads specifically for the cloud. You will want to carefully consider what services the cloud provider of your choice has to offer and how your application leverages those services.
Learn More
Are there any drawbacks to cloud hosting?
Yes, there will always be some risks associated with any hosting option. You are relying on the resiliency and engineering of infrastructure that has scaled at an astounding rate.
Learn More
What’s the benefit of hosting in the cloud vs. traditional options?
Reasons not to host in the cloud are few and far between. If you don't host in the cloud, you will spend more in both CapEx and OpEx to manage your applications or websites in a traditional environment.
Learn More
How can I improve the performance of my application?
There are several primary reasons that applications perform poorly, and in some cases it’s a combination of several. 1) Data latency: If your application is making calls to a data source (whether it’s an API or a direct call) and there is latency at the data provider, your application performance will suffer.
Learn More
Should I move my application to the cloud?
The answer is ‘probably yes’. There aren’t many reasons for an application to be hosted elsewhere, aside from occasional compliance standards, or requirements to integrate with local services that would require large amounts of data to move from on-premise to cloud.
Learn More
Where should my application be hosted?
There are many different options for hosting, but most applications would do well with one of the cloud providers -- Amazon Web Services, Google Cloud Platform, Microsoft Azure.
Learn More