Thursday, August 18, 2011

How to add an online survey with QR Code to your website or blog

An online survey is a very useful tool for collecting information from your target audience. You can use it to find out how your customers feel about a particular topic, and then adjust your services accordingly. Here I will show you how to add an online survey form on your website or blog using a widget from You don't need any coding skill and it takes only minutes to do this.

If you want to know how this widget looks like without reading this entire article, just click on the 'Survey' tab on the right side of this blog and you will see a live survey form sliding out into view.

This widget is based on Google Forms, which allows you to create a survey containing a series of question of various types, such as text, multiple choices, yes-no question, scale, etc. If you have some HTML knowledge you definitely can incorporate such a form directly into your website or blog without using the widget mentioned here. However, if you take the approach here then you will also get the following benefits:
  • The Google Form instance that you created is wrapped in a floating panel that can be docked to one side of the page as a non-intrusive tab. Aside from the cool animation effects that come with it, this also allows you to add the survey form without having to alter the layout of your current page.
  • You also get a QR Code for this survey form, so that you can do things such as posting a printed copy of this QR Code in your brick-and-mortar store, and your customers will then be able to fill the survey form on the phone right there and then by simply taking a picture of the QR Code with their smart phone .
  • You can configure this survey to be displayed as soon as the page is opened. This is useful when you really really want your users to take the survey (but at the risk of annoying your users).
  • You don't need any coding skill to in order to use this widget, just like other widgets from
Do the One-time Setup

You can skip this section if you are already a registered user of and have already completed the one-time setup for your website or blog.

Otherwise you will need to do an one-time setup of your target webpage or blog following the 'Do the one-time setup' section in this tutorial. This will allow you to add all kinds of widgets (not just the one mentioned in this post) to your website or blog from inside the deepWidget Sandbox in a WYSIWYG manner with just a couple of clicks.

Create the Survey Form

Here is an excellent tutorial on how to create a survey using Google Forms. After you have created your survey, do the following:
  • With the form opened inside Google Docs, click on 'Form' in the menu bar.
  • Click on 'Go to live form'
  • Copy the URL displayed there for use in the next section.

Add the Survey Form to Your Website or Blog

In order to add the survey form that you just created to your website or blog, you will need to use the deepWidget Sandbox for this. If you are not familiar with the deepWidget Sandbox you can find a tutorial here.

Do the following from the Sandbox:
  • Navigate to your website or blog by entering its URL to the text box on top. Your website or blog will then get displayed inside the Sandbox.
  • Click on the 'Add' button on the left side. A gallery containing many widgets will be displayed.
  • Select the 'Survey with QR Code' widget from the gallery. As a result you will find a 'Survey' tab showing up on the right side of your page. If you click on this tab you will find a survey form sliding into view containing a sample survey in it.
  • Click on 'edit' icon right under the 'Survey with QR Code' icon at the left side to bring up a widget editor.
  • Enter the survey form URL you got in the last section into the field 'Go to live from' URL from Google Forms in the widget editor.
  • Adjust other parameters in the widget editor to suit your needs.
  • Click on the 'Survey' tab now to see your very own survey and make sure that everything looks good to you.
  • Click on the 'Publish' button on top and confirm your action when prompted.
And there you have it! If you visit your live website or blog right now, you will then see the survey form right there. To find out how the survey turns out, just log onto your Google Docs account and open your survey form there, and you will find the survey result collected there neatly in a spreadsheet. From there you can then do the typical spreadsheet tricks to analyze the result, creating charts, etc.

Using the QR Code

In case that you are not familiar with QR Code, it is a kind of advanced bar code that when scanned with your smart phone you can make things happen on your phone, such as making a phone call, navigate to a certain website, etc.

Clicking on the 'QR Code' link at the header bar of this widget will bring out a display of the QR Code that links to the survey form. But why would you need a QR Code linking to the survey form when you already have it right in front of you? In fact you don't. This QR Code is intended to be posted somewhere else, so a good practice here is to print out this QR Code along with some simple instruction (e.g., "Take our survey here with your smart phone and win free dinner!") and put it up somewhere where your target customers will see it (e.g., inside the premise of a store, on a physical bulletin board, etc.). This way you can also get some mobile users to take the same survey.

Other Usages

What's described above is useful for many purposes beyond just doing surveys. Here are some ideas:
  • Collect a list of subscriptions to your periodic publication, such as a newsletter, etc.
  • Conduct a simple poll and optionally showing the result to your site visitors.
  • Use it as a virtual sign-up sheet of some sort.
  • Use it as a feedback form to collect your customer's input regarding your services.
  • Use it for your site visitors to leave a message for you.
  • Use it as a quiz.
You should be aware that there is no way to control who is allowed to enter information into this survey form, no way to limit how many times they can enter information, and no way to authenticate who a user really is. As such you should be using this for non-critical purposes only.

How to add a floating video player to your website or blog

In this article I will show you how to add a video player to your website or blog using a widget from This is useful for playing a single on-demand or live video at user's command, or for showing a 'splash' video that is played automatically as soon as the page is opened.

You can get a taste of how it works by simply clicking on the red tab on the right side of this article to see a video playing. Note that this widget stays at a fixed location and appears to float over the content of the page, so there is no need for you to change your page layout in order to fit it onto the page.

As with all the other widgets from, once you have done the one-time setup you can add such a video widget, or any other widgets from, without having to deal with any HTML/Javascript code.  If you are not yet familiar with deepWidget's Sandbox (a what-you-see-is-what-you-get environment where you can try out the widget right on your page), you can find more about it here. If you are a first-time user, you can trying things out in the Sandbox without doing the one-time setup of your page.

Adding the Video Player to Your Page

The widget that we are going to use here is 'Youtube Video with Lightbox Effect.' From inside the Sandbox click on the 'Add' button at left to bring out the list of all available widgets, and select 'Youtube Video with Lightbox Effect'. This will add a red tab labeled as 'Video' on the right side of your page. If you click on the tab you will find a video player sliding out to the center of the page, and begin to play a default tutorial video. This video player will be minimized automatically into a tab when the video is finished.

Customizing the Video Player

You can change the look and behavior of this video player in several ways. In order to start changing the video, find this widget in the left panel of the Sandbox (which displays all of the widgets that you have added onto your page), and click on the 'edit' icon there to bring a widget editor.
  • Changing the video. Since this video player is from Youtube, in order to change it to play a different video you will need to get the ID for your video. This ID is an 11-letter sequence (the part highlighted in yellow below) in your Youtube video URL, such as any of the following:

    Enter this ID into the field 'The 11-letter Youtube video ID' in the widget editor.
  • Changing look and behavior. Since this is one of many 'tabbed' widgets from, it can be configured to work with other such widgets to create a row of tabs. You can choose to move the tab to the left side of the page, choose whether you want the 'lightbox effect' which dims the page when the video player comes out, or move the tab up and down so that it will be at a place that you want.
  • Configure the video to play on page load. For this just change the parameter 'Play the video as soon as the page is loaded' to 'Yes.' The video player will be minimized automatically into a tab when the video is done playing.
Since this widget is based on the Youtube's video player, you will get everything that come with it. This means that if Youtube chooses to insert an ad into your video, then you will see the ad here to. And of course if you want to use a new video, then you will need to upload it to Youtube first.