Adding Images & Links to a SharePoint 2010 Survey

As you probably know, SharePoint 2010 (like 2007) only allows plain text in the question fields for surveys. This post explains why and how to add more dynamic elements (like links or images) to your question fields.

Why only plain text OOB?

This has a lot to do with how SharePoint manages the list.  Every question becomes a field (column) in the survey list.  If you have 20 questions, then your list has 20 columns (there are more – but these are the ones you care about).  Field names are inherently plain text an SharePoint nicely URLEncodes the field for you (turning < into &lt;, etc.)

The Code

Please note: 

• You’ll need access to administer the list, and edit the items in the masterpage gallery through SharePoint Designer.
• You will need jQuery (download it at: http://docs.jquery.com/Downloading_jQuery)
• Surveys natively call whichever masterpage is set as the system master page (check it by going to: Site Actions > Site Settings > Master page (under look & feel).
• Note: if you’re using a Team site, you probably don’t have the option to change the masterpage.  Instructions to enable choosing a masterpage in a team site are available here.

Copy jQuery into the Style Library folder.
You can find it by clicking on All Files > Style Library.

Open the masterpage that is being used in advanced mode (usually v4.master).
You can find it by clicking on All Files > _catalogs > masterpage.

Right before the closing head tag (), paste the following:

PLEASE NOTE: SharePoint has an HTML bug on the Graphical Response page (which is why I was forced to use h3.ms-vb instead of ms-standardheader).  If you look at the source code, the h3 tag is classed with “ms-standardheader, ms-vb” instead of “ms-standardheader ms-vb“.  The comma becomes part of the class-name and makes it unselectable.

You should also alter the stylesheet of this page to allow scrolling.  If not, part of your survey could end up below the fold (off screen).

How to use:

To add images to your survey questions, use the following formula when adding a new question:

{img,/imageLocation/image.ext,Image Alt Tag}
{link,http://www.link.ext,Link Action Text}

An example of an entry with an image and a link:

{img,http://www.rei.com/pix/common/REI_logo.gif,REI Logo}
{link,http://www.rei.com/,Visit the REI site} How would you rate this vendor?

Which generates the following in the survey:

Added Bonus

The links all pop up in their own separate window, which, if done without warning can leave your less web-savvy users upset and they might not complete the survey.

For a better user experience, I added a popup to warn folks that they will be leaving the site and tell them how to get back to the survey.

Have fun!