How to create a form in SharePoint designer 2013

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

Create a form in 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.

how to create a form in sharepoint designer 2013
how to create a form in sharepoint designer 2013

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 the 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.

sharepoint 2013 edit new item form
sharepoint 2013 edit new item 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:

how to create a form in sharepoint 2013
how to create a form in sharepoint 2013

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:

sharepoint form designer
sharepoint form 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.

create form sharepoint designer
create form sharepoint designer

You may like the following SharePoint list form tutorials:

Hope this SharePoint 2013 tutorial explains, how to create a form in sharepoint designer 2013.

  • 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

  • >