I cannot use InfoPath. Is there a way to create colored sections on SharePoint New Item form? I want to do this so I can group certain fields together in the form. Would I create CSS and add to the page? Thanks for your help


Install the Chrome Stylish extension so you can live-edit CSS


Start playing with:

    border:5px solid grey;

.ms-formtable > tbody:nth-child(1) > tr:nth-child(1){

.ms-formtable > tbody:nth-child(1) > tr:nth-child(2){

.ms-formtable > tbody:nth-child(1) > tr:nth-child(3){

.ms-formtable > tbody:nth-child(2){

.ms-formtable > tbody:nth-child(2)::before{
    content:"Extra options:";

.ms-formtable > tbody:nth-child(2) > tr:nth-child(3){
    display:none; /* hide whole row */

.ms-formtable > tbody:nth-child(2) > tr:nth-child(4){

This is for a default Task Form which has 2 TBODY sections, most forms will have one

default Task Form:

click on 'show more':


You can get it by writing some JavaScript and CSS. Below are approaches

  1. Write JavaScript to add a div to write a heading (if required) at the beginning of each section field. This div can be used to group and colored that section. You can write CSS for styles. The JavaScript and CSS files can be referred from the NewItem form.
  2. Create a custom form and logic to save. This requires to your own HTML, JavaScript and CSS to create a form and to manage required format.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.