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.
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 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.
Now click on that form to customize the page. Then in the aspx page try to find below:
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 the following SharePoint list form tutorials:
- How to customize a SharePoint List form – 5 Examples
- Power Automate update SharePoint list increment integer field
- How to Customize SharePoint Modern list form using JSON
- How to delete all items from SharePoint list
- SharePoint Workflow history list URL
- SharePoint Online image column
Hope this SharePoint 2013 tutorial explains, how to create a form in sharepoint designer 2013.
After working for more than 15 years in Microsoft technologies like SharePoint, Office 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Out audiences are from the United States, Canada, United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a SharePoint MVP(8 times), check out My MVP Profile. I have also worked in companies like HP, TCS, KPIT, etc.