Add Sections and Color to Surveys

Hi All

SharePoint provides rich functionalities via different types of SharePoint Lists and “Survey” is one of them. Let us see what is Survey?

• SharePoint Survey is a kind of list when we want to poll other web site users on some topics.
• Surveys features
• Quickly create questions
• Define how users their answers

When we need to use SharePoint Survey?

We could use the SharePoint Survey when an organization wants to collect the responses from various people about any event/ activity or on an any idea, we could use SharePoint Survey!

Users love the functionality provided by Survey inside SharePoint but they are frustrated when face its limitation like how to create sections and put their related section questions together (Bundle them) inside the Survey List

So below step-by-step solution will provide you to create questions and section formatting too.

Steps:

1. Create the Section:
1. Create a “Single line of text” question , give its default value as “SECTION” before you add any question for that section

2. Go to your survey and click “Respond to this Survey” to display the Newform.aspx page
    
3. 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
4. Click “Add a Web Part” and add a Content Editor Web Part
    
5. Move the Content Editor Web Part below the list web part
    
6. Edit the web part, click the Source Editor button and add the JavaScript from below
    
7. 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=="SECTION")

  {

    x[i].style.display="none";

  }

 }

</script>

Add color to your surveys!

Just follow the steps above, but use the following JavaScript. Manually embed your HTML in the text of the question: "Please take time to respond this survey about <b><i>Important Stuff</i></b>. "

<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>

Let us we want to add sections and color with HTML Style!

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=="SECTION")

  {

    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>

Loved SharePoint Customization Tricks!

Disha Shah