Improve the look of the likert rating question type in SharePoint surveys

You want your surveys to be easy to complete because chances are they’re optional in the first place. If you’re using a likert rating question type, the look of the entire survey can get out of hand pretty quickly.

Just by adding alternating row shading and giving the options some more room to breathe, we zap the anxiety right out of the question and give the question a more polished look. Just two tiny changes make a big difference.

1. Click “Respond to Survey” to open the newform.aspx page
   
2. Edit page
   
3. Add a web part
   
4. Under Media & Content choose either Content Editor or Script Editor (your preference)
   
   
   1. Content Editor: Create a .css file in your Site Assets named something like form-alt-row-shading.css and reference its path in the web part’s properties. For the file’s content, copy and paste the script below.
   2. Script Editor: Click “Edit Snippet” then copy and paste the script below directly into the dialog that appears
5. Save and check it out!

<style>
.ms-formbody tr:nth-child(even) {     
background-color: #ffffff; 
} 
th.ms-gridT1 {     
width:310px; 
}
</style> 

You could modify the css file further, adjusting the question itself, the option headers, etc. by using F12 and selecting each element to find its class label, then adding it to your css file with its modified styling within the brackets. But just these two adjustments alone give you options on a single line (not breaking lines) and easy visibility with alternating row options.

• 

•