How to Create Custom Forms Using SharePoint Designer 2013

SharePoint Designer 2013 is the tool of choice for the development of SharePoint Applications. ​Using SharePoint Designer, you can rapidly create SharePoint solutions in response to business needs. Moreover, with SharePoint Designer 2013, you will see many changes that encompass a variety of new features, as well as a new user interface. In this article, I will show you how to create custom forms with SharePoint Designer 2013.

Challenge:

SharePoint 2013 allows contributors to input list data through forms created in SharePoint Designer. The forms are customizable, provideing limitless, unique field entries. Creating, editing, and displaying the forms is accomplished through simple configurations in lieu of complex command line entries. This ability to customize is a great advantage over the standard “New Item” or “Edit Item” default forms.

Solution:

Open SharePoint Designer 2013, and select the Open Site menu:

Type the site name into the Open Site dialog box, and click the Open button.

Go to the Lists and Libraries tab, and select any list that needs to be modified:

Go to the Forms section. You will see three default forms including:

  • DispForm.aspx: Display item form
  • EditForm.aspx: Edit item form
  • NewForm.aspx: New item form

Click on the New button at the top-right of the Forms section.  A Create New List Form window will appear:

  • In the File Name textbox, type the form name that you want to use.
  • Under the Select the type of form to create section, select the type of form you want to create.
    • New item form: used to add new items to the list
    • Edit item form: used to edit existing list items
    • Display item form: used to view list items
    • Check on the Set as default form the selected type if you want

Click the OK button.

The new form will be shown in the Forms section:

Click on the New Form, expand the New Item, Edit Item, or Display item Form menu to select the list you need to modify:

In the Data View tool, select the Design tab and customize to your liking:

Click the Save button to complete.