SharePoint: Add Instructions and Color to Surveys

 

Only tested in SharePoint 2007 so far…

 

Survey Instructions

Surveys often need instructions or opening text. Here is a trick that converts a “Single line of text” question into just a page of text. There is one side effect; your “instructions question” will show up in the results as a query that everyone answered as “HIDDEN”. (But you could change the word if you like.)

 

Steps:

1. For each "Instructional Text" needed in the survey add a question to the survey of type “Single line of text”, add your text as the question, and set a default value of "HIDDEN"
    
2. If you want the instructions on their own page, then add a Page Separator after the instructions item
    
3. Go to your survey and click “Respond to this Survey” to display the Newform.aspx page
    
4. Edit the URL to allow access to the web parts:
     append this to the end of the URL for the NewForm.aspx URL:  
               &ToolPaneView=2 
   and press Enter  
   
   http://yourserver/sites/yoursite/Lists/SurveyTest/NewForm.aspx?Source=.......overview.aspx&ToolPaneView=2
   
5. Click “Add a Web Part” and add a Content Editor Web Part
    
6. Move the Content Editor Web Part below the list web part
    
7. Edit the web part, click the Source Editor button and add the JavaScript from below
    
8. Save your changes and go test the survey!

<script>
 // hide the input textbox for the "description" text
 var x = document.getElementsByTagName("INPUT");
 var i=0;
 for (i=0; i<x.length; i++)
 { 
  if (x[i].value=="HIDDEN")
  {
    x[i].style.display="none";
  }
 } 
</script>

Note: If you have a multipage form (you added page separators or branching logic) then you will need to add a web part with the same code as above in the EditForm.aspx page. To get to this page just respond to the survey and click Next. Then to add the web part add &ToolPaneView=2 to the end of the URL.

 

 

Add color to your surveys!

 

Just follow the steps above, but use the following JavaScript instead. Then manually embed your HTML in the text of the question: "This is a survey about <b><i>Important Stuff</i></b>. Please take your time."

<script>
 // Fix tags to allow HTML
 var t = document.getElementsByTagName('table');
 for (var i=0; i<t.length; i++)
 {
   if (t[i].className=='ms-formtable')
   {
     var td = t[i].getElementsByTagName('td');
     for (var j=0;j<td.length;j++)
     {
       if (td[j].innerHTML.indexOf('&lt;') > -1)
       {
         td[j].innerHTML = td[j].innerHTML.replace(/&lt;/g,'<').replace(/&gt;/g,'>'); 
       }
     }
   }
 }
</script>

 

 

Or add instructions and color!

Use both JavaScript routines together:

<script>
 // hide the input textbox for the "description" text
 var x = document.getElementsByTagName("INPUT");
 var i=0;
 for (i=0; i<x.length; i++)
 { 
  if (x[i].value=="HIDDEN")
  {
    x[i].style.display="none";
  }
 } 

 // Fix tags to allow HTML
 var t = document.getElementsByTagName('table');
 for (var i=0; i<t.length; i++)
 {
   if (t[i].className=='ms-formtable')
   {
     var td = t[i].getElementsByTagName('td');
     for (var j=0;j<td.length;j++)
     {
       if (td[j].innerHTML.indexOf('&lt;') > -1)
       {
         td[j].innerHTML = td[j].innerHTML.replace(/&lt;/g,'<').replace(/&gt;/g,'>'); 
       }
     }
   }
 }
</script>

 

.