Add Color Sections to SharePoint Form

Question

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

Answer 1

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

https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe

Start playing with:

.ms-formtable{
    background:lightgrey;
    border:5px solid grey;
}

.ms-formtable > tbody:nth-child(1) > tr:nth-child(1){
    background:lightgreen;
}

.ms-formtable > tbody:nth-child(1) > tr:nth-child(2){
    background:yellow;
}

.ms-formtable > tbody:nth-child(1) > tr:nth-child(3){
    background:lightblue;
}

.ms-formtable > tbody:nth-child(2){
    background:pink;
}

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

.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){
    background:red;
}

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

default Task Form:

click on 'show more':

Answer 2

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.