Create a Custom List Form for a

SharePoint List

Jennifer Lewis
Create a Custom List Form for a SharePoint List
Page 2 of 18

Overview
A number of companies are using SharePoint lists to store simple information such as:
• Issue tracking
• Employee information
• Catalogs
• Surveys

SharePoint lists have built-in forms that are used to add, modify and display items in the list.
However, sometimes you or your business user may want to customize the form or forms. For
example, there may be fields that you want to mark as “read only” once a value has been initially
entered, or there may be fields that you don’t want to display on the form at all. You may want to
add custom functionality, but you may not want to either do anything too labor intensive because
of time, or your and/or your team don’t have the skill set to use other tools such as InfoPath but
you and/or your team may have the ASP.NET skill set. Using SharePoint designer, you can
create a custom list form for a SharePoint list for a particular action (adding, modifying and
displaying items).

Required Tools
You will need the following items to perform this exercise:
• Access to a Microsoft SharePoint site
• Microsoft SharePoint Designer 2007

Directions
1. Open your site in SharePoint Designer by selecting File – Open Site from the menu. In
this example, I will be working on a site called http://spdev2/site1.
Figure 1: Opening the Site

Jennifer Lewis
Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List
Page 3 of 18

Figure 2: Selecting the Site

2. Open the Lists folder and select your list. In this example, I have selected the Getting
to Know You list.
Figure 3: Selecting Your List

Note that there are four aspx pages that are the actual forms. Below is an explanation of
each page.

Jennifer Lewis
Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List
Page 4 of 18

Page Name What It Is Example

AllItems.aspx Displays all
the items on
the list

DispForm.aspx Displays the

selected item

EditForm.aspx Edit the

selected item

Jennifer Lewis
Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List
Page 5 of 18

NewForm.aspx Add a new

item to the list

3. Open the form that you would like to customize. In this example, we are going to
customize the “edit item form” (EditForm.aspx).
Figure 4: Selecting the Form to Customize

4. Save the file as another name by selecting File – Save As. In this example, I am going
to save the file as EditForm2.aspx.
IMPORTANT
Do not delete the original page, and do not
edit the original page. You will get unexpected
errors from SharePoint when you try to work with
your list that can only be recovered by deleting
your list and recreating it.

Jennifer Lewis
Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List
Page 6 of 18

Figure 5: Saving the File as Another Name

Figure 6: Entering the New Name

5. After entering the new file name, click the Save button.
Before you begin editing, make sure that SharePoint Designer is finished with the save and it
is displaying your file as your new file name.

Jennifer Lewis
Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List
Page 7 of 18

Figure 7: The Form as the New Name

6. Click on the ListFormWebPart to highlight it.

Jennifer Lewis
Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List
Page 8 of 18

Figure 8: Selecting the Web Part

7. Press the delete key to remove it from the form.

Jennifer Lewis
Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List
Page 9 of 18

Figure 9: Deleting the Web Part

8. From the menu, select Insert – SharePoint Controls – Custom List Form

Jennifer Lewis
Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List
Page 10 of 18

Figure 10: Inserting the Custom List Form

9. Do the following:
a. From the List or document library to use for form drop-down box, select the
list for which you are creating the custom list form. In this example, I am creating
a custom list form for the list Getting to Know You, so I will select Getting to
Know You.
b. From the Content type to use for form drop-down box, select Item.
c. From the Type of form to create choice, select the form that you are
customizing. In this example, I am customizing the Edit form, so I will select Edit
item form
d. Leave the Show standard toolbar checkbox checked unless you do not want
to display the toolbar.
Figure 11: Entering the Custom List Form Information

Jennifer Lewis
Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List
Page 11 of 18

10. Click OK.

Wait a few moments until SharePoint Designer loads the web part.
Figure 12: Results from Entering the Custom List Form

11. Now you should be able to edit the form to your specifications. You can:
• Delete Rows
• Make fields “read only”
• Rearrange the display
• Change wording
• Add graphics
In my example, I made the name, address, and badge number read only, and I added a
few pictures.

Jennifer Lewis
Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List
Page 12 of 18

Figure 13: Example of Customized Changes

12. When you are done with editing your form, save your form by clicking on the save icon

on your toolbar.
13. Close the file.
14. In the Folder List, right click on the list that will be using the custom form. In my
example, the list is called Getting to Know You.

Jennifer Lewis
Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List
Page 13 of 18

Figure 14: Selecting the List Properties

15. Select Properties

Figure 15: The List Properties Dialog

16. Select the Supporting Files tab.

Jennifer Lewis
Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List
Page 14 of 18

Figure 16: The Supporting Files Tab

This is the tab where you would change the page to use for a particular action (All Items,
Display, New Item, Edit Item). For example, if you customized the Display form
(DispForm.aspx), you would change the Display item form field. In this example, I
customized the Edit item form, so I would change the Edit item form field.
17. In the Content type specific forms drop-down box, select Item
18. Click the Browse button beside the form that you are customizing. In my example, I am
customizing the Edit item form.
19. In the Current Web Site dialog, select the form that you just created. In my example, I
created EditForm2.aspx.

Jennifer Lewis
Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List
Page 15 of 18

Figure 17: The Current Web Site Dialog - Used to Select the File

20. Click the OK button

21. When you are finished with setting up the list to use the custom pages, click the Apply
button.
22. Click the OK button to close the window.
23. Close your site by selecting File – Close Site
Figure 18: Closing the Site

Jennifer Lewis
Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List
Page 16 of 18

To test your changes, go to the list on the SharePoint site and attempt to perform the action that
you customized. In my example, I am going to test the Edit item action.
Figure 19: Test 1: Editing an Item

Jennifer Lewis
Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List
Page 17 of 18

Figure 20: Test 2 - Confirming that it is Now Using the Custom Form

Jennifer Lewis
Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List
Page 18 of 18

References

Create a custom list form. Microsoft. http://office.microsoft.com/en-

us/sharepointdesigner/HA101191111033.aspx

Jennifer Lewis
Date Written: 1/8/2009