Customize SharePoint 2013 list form using SharePoint designer 2013

This SharePoint 2013 tutorial explains, how to customize a SharePoint list form using SharePoint designer 2013. Here I want to put some additional static text between two columns in the NewForm.aspx through a designer.

Customize SharePoint 2013 list form using SharePoint designer 2013

This is not ideal to customize the existing forms, the better approach is the create a similar form and customize on that. So for this follow the below steps to customize SharePoint 2013 list form using SharePoint designer 2013.

Open your SharePoint site using SharePoint designer 2013 and then from the left side under Site Objects click on Lists and Libraries. Then this will open the list and libraries. Click on the particular list which you want to customize.

This will open the manage list page. Go to the Forms section on the right side. Click on New… as shown in the fig below.

Customize sharepoint 2013 list form using sharepoint designer
Customize sharepoint 2013 list form using sharepoint designer

Then this will open the Create New List Form dialog box. Give a name and choose for which type of form you want to make. Here I am trying to make a form similar to New item form. And then check the checkbox “Set as the default form for the selected type” so that this will work as the default new form.

Customize sharepoint 2013 list form using sharepoint designer 2013
Customize sharepoint 2013 list form using sharepoint designer 2013

Now click on that form to customize the page. Then in the aspx page try to find below:

<xsl:template name="dvt_1.rowedit">

You will be able to see your columns there. In my requirement, I have added one <tr> ….</tr> inside both the columns.

<tr>
<td width="190px" valign="top" class="ms-formlabel">
</td>
<td width="400px" valign="top" class="ms-formbody"> This is the sample text we put inside two columns.
</td>
</tr>

Now if you will save the page and then try to add an item then it will appear like below:

Customize sharepoint 2016 list form
Customize sharepoint 2016 list form

You can see here there are two Save and Cancel buttons are there. If you want to delete the top Save and Cancel buttons then find the below tag.

<xsl:template name="dvt_1.body">
<xsl:param name="Rows"/>

Then you will be able to see the below <tr>…</tr> tag.

<tr>
<td class="ms-toolbar" nowrap="nowrap">
<table>
<tr>
<td width="99%" class="ms-toolbar" nowrap="nowrap"><IMG SRC="/_layouts/15/images/blank.gif" width="1″ height="18″/></td>
<td class="ms-toolbar" nowrap="nowrap">
<SharePoint:SaveButton runat="server" ControlMode="New" id="savebutton1″/>
</td>
<td class="ms-separator"> </td>
<td class="ms-toolbar" nowrap="nowrap" align="right">
<SharePoint:GoBackButton runat="server" ControlMode="New" id="gobackbutton1″/>
</td>
</tr>
</table>
</td>
</tr>

Which looks like below:

Customize sharepoint 2016 list form using sharepoint designer
Customize sharepoint 2016 list form using sharepoint designer

Now Save the form. And open the NewForm. You will be able to see like below, now Save and Cancel in the top as well as your static text between the columns.

Customize sharepoint 2016 list form using sharepoint designer 2013
Customize sharepoint 2016 list form using sharepoint designer 2013

You may like following SharePoint list form tutorials:

Hope this SharePoint 2013 tutorial explains, how to customize SharePoint 2013 list form using SharePoint designer 2013.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

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

Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SPGuides.com

  • Bhagwan Kuram says:

    Bijay Kumar ji – Great blog! In my SharePoint Designer, I don’t see the “New Item Form (used to add new items to the list)”. Do you have any insights into why this might be? – Bhagwan Kuram

  • >