Add heading in the default newForm.aspx in SharePoint list using JavaScript and CSS

This SharePoint customization tutorial, we will discuss how to customize newform using javascript and CSS in SharePoint Online and SharePoint 2013/2016. Here we will see how we can add heading in the default newform.aspx in SharePoint list form using JavaScript and CSS.

This demo I will show how I have added a heading between two out of box columns in the SharePoint list form and I have changed the default button color using CSS.

Customize newform.aspx using JavaScript and CSS in SharePoint Online/2013/2016

Step 1 : I have created a SharePoint list name as Student Details.

customize newform using javascript and css sharepoint
customize newform using javascript and css sharepoint

Step 2: When I clicked on + new Item, it will appear a newForm.aspx page with simple form.

Modify NewForm.aspx Sharepoint Online
Modify NewForm.aspx Sharepoint Online

Step 3: In this step, I will write a code to create a heading between two columns in the SharePoint list. You can use the script editor web part in the newForm.aspx page to add the below code.

<script src="//code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
    //set section text and field name
    AddSectionBeforeField("Student Details","Title");
    AddSectionBeforeField("Parents Details","Father Name");
    AddSectionBeforeField("Education Details","Qualification");

});
function AddSectionBeforeField(sectionText,fieldName){
    var $fieldTR=$(".ms-standardheader nobr:contains('"+fieldName+"')").closest("tr");
    $fieldTR.before("<tr style='background-color:white'><td colspan='2' class='ms-formbody' style='padding:0; color: #96c03d;'><div style='font-size:22px;margin-top: 10px;margin-bottom: 10px;font-family: Oswald';'>"+sectionText+"</div></td></tr>");
}
</script>

Step 4: In this step, I will add the CSS to change the default button color.

<script type="text/javascript">
function changeButtonStyle()
{ 
    var inputs = document.getElementsByTagName("input");  

    for(i = 0; i<inputs.length; i++)  
    {   
       if(inputs[i].type == "button" && inputs[i].value == "Save")
	   {
          inputs[i].style.backgroundColor='#96C03D'; 
          inputs[i].style.color ='white';	
          inputs[i].style.width= "160px";
          inputs[i].style.height = "40px";
          inputs[i].style.fontSize = "16px";
       }
        if(inputs[i].type == "button" && inputs[i].value == "Cancel")
	   {
          inputs[i].style.backgroundColor='#96C03D'; 
		  inputs[i].style.color ='white';	
		  inputs[i].style.width= "160px";
          inputs[i].style.height = "40px";
          inputs[i].style.fontSize = "16px";
       }		   
      }  
}
_spBodyOnLoadFunctionNames.push("changeButtonStyle");
</script>		

Step 5: Next, go to the NewForm.aspx -> Edit page -> Add Web Part ->Add a script Editor Web part

customize newform using javascript and css sharepoint
customize newform using javascript and css sharepoint

Step 6: Next click on Insert and Stop editing the page. Next the output will appear like in below image.

Modify NewForm.aspx Sharepoint Online using css and javascript
Modify NewForm.aspx Sharepoint Online using css and javascript

We can also apply the same code for EditPage.aspx page to customize the edit form like the above newform in SharePoint Online/2013/2016.

You may like following SharePoint customization tutorials:

Here we saw how we can customize newform using javascript and CSS in SharePoint online or SharePoint 2013/2016. We also saw, how we can add heading in the default newForm.aspx in the SharePoint list using JavaScript and CSS.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

  • Isn’t it easier to create another form with dataform webpart and modify output html as much as you need….

  • >