Create Custom New, Edit And View List Forms Using SharePoint Designer

This blog describes how to modify the layout of new, edit and view forms of SharePoint list using SharePoint Designer.

This blog describes how to create Custom new, edit, and view list forms and modify the layout as per your requirement.

 

When we create a Sharepoint list, it by default creates three forms; i.e,. Newform.aspx, Editform.aspx and Dispform.aspx.

 

Suppose, we create a list of four fields; i.e., First Name, Last Name, Designation, and Location.

 

The Newform.aspx will look like:

 

The Default Dispform.aspx looks like:

 

And The default Editform.aspx looks like:

 

Now, if we need to change the alignment or CSS of any of these forms then we will need to create a Custom list form using Sharepoint Designer.

 

Steps,

 

Go to the Sharepoint Designer and open the site and the list for which customs forms need to be created.

 

In the form section of the List page in Sharepoint Designer, click on New as shown in the screenshot below.

 

 

A pop up will appear asking which form --  i.e. new/edit/display --  we need to create.

We will be creating a new form for this blog, however, we can create other forms as well.

 

 

 

We would also provide a File Name and Set it as a default form and click OK.

 

 

 

Our Custom list form will appear in the Form section of the list in Sharepoint designer. We will click on the form and then edit it.

 

 

 

You will see a code like below.

<table border="0" cellspacing="0" width="100%">
    <tr>
        <td width="190px" valign="top" class="ms-formlabel">
            <H3 class="ms-standardheader">
                <nobr>FirstName<span class="ms-formvalidation"> *</span> </nobr>
            </H3>
        </td>
        <td width="400px" valign="top" class="ms-formbody">
            <SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="New" FieldName="Title" __designer:bind="{ddwrt:DataBind('i',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title')}" />
            <SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="Title" ControlMode="New" /> </td>
        <tr></tr>
        <td width="190px" valign="top" class="ms-formlabel">
            <H3 class="ms-standardheader">
                <nobr>LastName</nobr>
            </H3>
        </td>
        <td width="400px" valign="top" class="ms-formbody">
            <SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="u0yc" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@u0yc')}" />
            <SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="u0yc" ControlMode="New" /> </td>
    </tr>

Remove the <tr></tr> tags as highlighted in the screen shot above and then save the form and open a new form from the browser.

 

The layout of the CustomNewForm will change:

 

Similarly, remove the tr tags between designation and location.

 

The final form will look like this:

 

 

This is a very basic example of creating custom list forms using Sharepoint Designer.

Similarly, we can create Custom forms for Edit and Display forms as well and can set then as default forms.

 

We can also apply CSS to modify various fields which will be discussed in later blogs.

 

Hope you like it!