By: Chris Coyier Back to Guides
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, such as in a customer satisfaction survey. In other cases (such as a public poll), you may want to make the results available to the user immediately after they have submitted 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 has submitted the form:
Create the form
From the form manager, click the New Form! button. Our example form will have a single, required, randomised, multiple choice question.
HOT TIP: Multiple choice fields make the first choice selected the default. You can change the default choice by clicking a different radio button to the left of the textboxes where you entered the choices. Default choices may skew the results of a form towards that choice, as users may assume that the default choice is typically the correct choice. You can ensure that no option is selected by default by clicking the currently active radio button.
Embed form into your website
Back in the form manager, move your cursor over the new form and click the Code button.
Creating the results report
Since our survey is a single multiple choice question, a nice way to present those results would be in the form of a pie chart. Head into the Report Manager and click the New Report! button.
- Step 1: Name your report, enter a description and choose whether you want the results to be publicly downloadable.
- Step 2: Use all entries and select the form you’ve 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 just the chart we’re 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, place your cursor over the report you’ve 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 make 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, set the form to Redirect to website and enter that URL.
Notice the URL parameter on the end of that URL:
?results=true We can use that to determine whether 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:
|1 2 3 4 5 6 7 8 9||
If you don’t have access to server logic at your end or you 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 directly 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:
Thanks for following along. As you can see, using Wufoo’s embeddable report widgets allows you to instantly show the results of the data you’re collecting to your users in a design of your choosing and without having to rely solely on the layouts in our Report Builder. This tutorial is actually the start of a regular feature that 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 do let us know if you have any questions or comments!