Create a Poll with Instant Public Results

By Chris Coyier · June 10th, 2010

Wufoo is great for making surveys and polls and collecting that data from the participants. In some cases you may want to keep those responses private, like in a customer satisfaction survey. In other cases (like a public poll), you might want to make the results available to the user right after they submit their form. Well, Wufoo can do that too! Here’s an example poll we created that shows the results of the voting after the user submits to the form:

View Poll / Results Demo

In this tutorial, we’ll use Wufoo’s confirmation options and the Report’s Code Manager to show you how you can create your own public poll like the one above.

Create the form

From the form manager, click the New Form! button. Our example form will have a single, required, randomized, multiple choice question.

HOT TIP: Multiple choice fields make the first choice selected by default. You can change which is the default choice by clicking a different radio buttons to the left of the text boxes where you entered the choices. Default choices may skew the results of a form toward that choice, as users may assume the default choice is typically the correct choice. You can make no option be selected by default by clicking the currently active radio button.

Embed form into your website

Back in the form manager, mouse over the new form and click the Code button.

Click the Embed Form Code option, then copy and paste the JavaScript into your website’s markup.

Creating the results report

Since our survey is a single multiple choice question, a nice way to present those results would be a pie chart. Head into the Report Manager and click the New Report! button.

• Step 1: Name your report, enter description, and choose if you want the results to be publicly downloadable.
• Step 2: Use all entries and select the form you just created.
• Step 3: Select an appropriate layout and add a Pie Chart to the top-most zone.
• Step 4: Select the pie chart and format to your liking. In our demo, since it’s the just the chart we are after, we’ve removed the title and make it the large size.

With the report completed and saved, we can now preview it on its wufoo.com URL.

Embedding the report

Just as your Wufoo forms are embeddable into your own websites, reports are embeddable too! The steps are very similar to embedding a form. From the Report Manager, mouse over the report you just created and click the Code button. Select the Embed Widget Code option, and copy and paste the code into your website’s markup.

Putting the form and results on the same page

The ultimate goal here is to have a poll that when submitted instantly shows the results (report) of that form. To keep things nice and contained, let’s have the results page be the same as the one that shows the form. The first step is setting the form to redirect to the same URL as where the form resides. Go back to the Form Manager and edit the form. Click on Form Settings and set the form to Redirect to Web Site and enter that URL.

Notice the URL parameter on the end of that URL: ?results=true We can use that to determine if we should be showing the form (no parameter) or showing the results (parameter is present). Many languages have the ability to access URL parameters. In PHP, we could do this:

If you don’t have access to server logic on your end or just want to avoid writing code shown in that last step, you can always just create two pages (one for the embedded form and another for the embedded report widget) and link directed to the results page in the confirmation page without having to use a URL parameter.

And that’s it!

That’s all there is to it folks! We have a live demonstration of this tutorial here:

View Poll / Results Demo

Thanks for following along. As you can see, using Wufoo’s embeddable report widgets allow you to instantly show the results of the data you’re collecting back to your users in a design of your choosing without having to rely solely on the layouts in our Report Builder. This tutorial is actually the start of a regular feature we’ll be doing on the Wufoo Blog to show you how to get the most out of your Wufoo forms. We hope you liked it and if you have any questions or comments, let us know!