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

This SharePoint customization tutorial, we will discuss how to customize new-form 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 new-form 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


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


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


You may like following SharePoint customization tutorials:

  • How to display more than 3 views in SharePoint 2013/2016 list or document library

  • Make Title field read-only using SPClientTempltes and JSLink in SharePoint Online

  • Create an organization chart from a list in SharePoint Online/2013/2016 using JavaScript

  • How to Enable view entries in SharePoint list multiple lines of text columns

  • How to embed google maps in SharePoint 2013/2016/Online

  • Add Google ReCaptcha in SharePoint Online or SharePoint 2013/2016/2019 (Step by Step tutorial)

  • Change default list view style using CSS in SharePoint Online/2016/2013

  • Left Navigation or Quick Launch Customization or Branding using CSS in SharePoint Online/2013/2016

  • Disable or Hide Sync Button at SharePoint Online Site and Document Libraries Level

  • SharePoint Online Image Slider or Carousel Example

Here we saw how we can customize new form 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.


Source: Paper.li