Sharepoint - How to create sections in list form Sharepoint2013

You can use SharePoint's Client Side Rendering (CSR) to customize the look and feel for SharePoint List Forms and Views. Standard mode CSR is best suited for your requirement. Please refer below link for more details.

https://www.codeproject.com/Articles/610259/SharePoint-Client-Side-Rendering-List-Forms


Using SharePoint Designer, create new Edit form for the list, and set it as default. Then edit the EditForm.aspx, break the existing one table with ROW per field into two tables. Then perhaps surround the two tables with DIVs and add required HTML to show the title, as well as border.


We can use jQuery to achieve it, modify the code below and add it to a Script Editor Web Part in the edit form page.

<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("Informatat baze","Last Name");
    AddSectionBeforeField("Employment Data","Company");
});
function AddSectionBeforeField(sectionText,fieldName){
    var $fieldTR=$(".ms-standardheader nobr:contains('"+fieldName+"')").closest("tr");
    $fieldTR.before("<tr style='background-color:gainsboro'><td colspan='2' class='ms-formbody' style='padding:0'><div style='font-size:16px;font-weight:bold;'>"+sectionText+"</div></td></tr>");
}
</script>

enter image description here