How to Get Design Feedback with Wufoo

By Chris Coyier · March 3rd, 2011

Steph Skardal had a neat idea on using Wufoo for design feedback that she blogged about recently. The idea is to show different variations of a design directly in the form, then use a radio button field to have people vote on their favorites.

The way Steph did it was to have all the design choices as images at the top of the form. They each have a corresponding label. Then below, the radio buttons reference those labels. That’s perfectly acceptable and may be ideal depending on the size of your images. Here I’ll show you another technique. You can literally make the labels for each radio button choice an image. You use HTML for these images, like:

<img src="http://yourhostedwebsite.com/path/to/image.jpg" alt="Design Choice One" />

You’ll have to host (or find hosting) for these images yourself. You could use something like Photobucket, Flickr, or even Dropbox (put images in public folder) to do that. Then add those images to each choice like so:

Notice I’ve also set the radio button’s Field Layout to Two Columns, because the images I’ve chosen fit nicely into a 2x2 grid. Here are the maximum widths for images based on the number of columns you use, assuming the form is at its default width (as when it’s hosted on wufoo.com without custom CSS alteration).

One Column	528px
Two Columns	253px
Three Columns	158px

After adding a quick paragraph field for comments, the final form looks like this:

If you’d like a head start on building a form like this, check out the form in our Form Gallery where you can view this very example and add it directly to your Wufoo account.

View Example Form / Add Form to Your Account

Usable Results

To see the results of which design was liked the most, you can build a report. Your best bet is to use a Chart widget, as the labels will be the images themselves and the results couldn’t be more clear:

Variations on a Theme

Being able to vote on image choices certainly isn’t limited to design feedback. You could put images in the label choices for other types of forms, like:

• Ask kids what their favorite cartoon characters are
• Poll your friends and family on what kind of car you should get
• Create a logic quiz (i.e. which of these images is not like the other…)

By the way, like those buttons? They are available here via Chad Mazzola.