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.

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.

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:

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:

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.

You may like following SharePoint list form tutorials:

• Change column ordering in list forms in SharePoint Online/2013/2016
• Change Column Order in List Forms (new/edit/display) in SharePoint 2013/2016/Online without using Code
• $(document).ready(function() not working SharePoint 2013/2016 list form
• How to reset to out of box list forms from Nintex Forms customization in SharePoint Online
• SharePoint 2013 Different JQuery Operations on SharePoint List Form
• Open SharePoint 2013 list form in a dialog box on button click using JavaScript
• SharePoint2013 Use of PreSaveAction Function on list forms
• How to rename Save or Cancel button text on SharePoint 2013 List Forms?
• Show Hide List form fields based on condition using SPUtility in SharePoint 2013
• Show hide fields based on permission in SharePoint list form using Client Object Model
• Hide fields from tasklist forms in SharePoint 2013
• Disable Save button in list form in InfoPath 2013 in SharePoint 2013/Online

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