Creating a Custom List Form with SharePoint Designer 2010

Home > Blogs > SharePoint > Creating a Custom List Form with SharePoint Designer 2010

Creating a Custom List Form with SharePoint Designer 2010

Like This Blog 6 Spike Xavier
Added by May 18, 2012

In this post I will go through one of the common techniques of creating a custom list form using SharePoint Designer 2010.

Custom-List

Custom-List.png

I CHOOSE SITE ACTIONS > MORE OPTIONS
I start off with a fresh site collection for which I have chosen the team site template as the top level site. This can be done from any site for which I have the correct permissions but I like to keep it nice and simple and clean.

Fill-Out-Form

Fill-Out-Form1.png

I FILTER THE OPTIONS BY CLICKING BLANK & CUSTOM AND THEN FIlL OUT THE FORM AS SHOWN USING THE CUSTOM LIST AT MY TEMPLATE AND THEN CLICK CREATE
I call my list "Pets" because I'm going to make a list of my pets.

List-Settings

List-Settings.png

I CLICK LIST SETTINGS – THE LIST TAB IS ACTIVE AND THUS THE LIST SETTINGS ICON IS AVAILABLE
I could click Create Columns, however I want to change the Title Column to Pet Name so I'll go to List Settings.

Change-Title

Change-Title.png

I CLICK ON THE TITLE LINK
In this case, it will make sense to change the Title column to pet name since they are both single lines of text. You cannot delete the Title column.

Change-Title-To-Pet-Name

Change-Title-To-Pet-Name.png

I REPLACE THE WORD TITLE WITH PetName AND CLICK OK

Create-Choice-Column

Create-Choice-Column.png

I CLICK CREATE COLUMN

Add-Type-Of-Pet

Add-Type-Of-Pet.png

I ADD A CHOICE COLUMN CALLED TYPE OF PET USING THE OPTIONS: DOG, CAT, LIZARD, SNAKE
I fill out the form as shown and click OK (Button Not Shown)

Click-Pets-Link-In-Quick-Launch

Click-Pets-Link-In-Quick-Launch.png

I CLICK THE PETS LINK IN THE QUICK LAUNCH TO GET TO THE ALL ITEMS VIEW OF THE PETS LIST

Add-New-Item

Add-New-Item.png

I CLICK ADD NEW ITEM

Observe-Built-In-Form

Observe-Built-In-Form.png

I TAKE A LOOK AT THE OUT OF THE BOX NEW ITEM FORM AND CLICK CANCEL

Open-SharePoint-Designer

Open-SharePoint-Designer.png

I CLICK SITE ACTIONS > EDIT IN SHAREPOINT DESIGNER TO OPEN SHAREPOINT DESIGNER 2010.
I could have opened SharePoint Designer 2010 from the start menu; however I prefer this method so I don't accidentally connect to the wrong site.

Select-Pets

Select-Pets.png

I SELECT LISTS AND LIBRARIES FROM THE NAVIGATION PANE AND THEN SELECT PETS FROM THE DETAILS PANE.

Choose-New-Form

Choose-New-Form.png

I CLICK NEW TO CREATE A NEW FORM.
When I created the new custom list, SharePoint 2010 created 3 new forms for me. DispForm.aspx – for displaying all items in the list. EditForm.aspx – for editing existing items in a list and NewForm.aspx which is used to create a new item. (As shown earlier in this post). I will be creating a form and set it as the default new item form so that it will basically replace the NewForm.aspx (although it won't over write it so I can always revert back to using the out of the box form)

Fill-Out-Form-Wizard

Fill-Out-Form-Wizard.png

I NAME MY FORM AQUAPETFORM (I COULD CALL IT ANYTHING EXCEPT THE EXISTING FILE NAMES MENTIONED ABOVE) SELECT NEW ITEM FORM AND CHECK THE SET AS DEFAULT FORM FOR THE SELECTED TYPE. THEN CLICK OK.
If I am using content types, I can select it from the drop down menu.

Customize-Form

Customize-Form.png

I CLICK AQUAFORM.ASPX TO OPEN THE FORM UP IN SHAREPOINT DESIGNER FOR EDITING.

Customize-The-Form

Customize-The-Form.png

I ADD SOME CUSTOM CONTENT TO MY NEW FORM THEN CLICK SAVE (SAVE NOT SHOWN)
Nothing extravagant here, just something so it's obvious I'm using this version of the form when I add a new item.

Preview-In-Browser

Preview-In-Browser.png

I CLICK THE HOME TAB AND THEN CLICK PREVIEW IN BROWSER ICON IN THE RIBBON IN SHAREPOINT DESIGNER 2010

Test-Form

Test-Form.png

I FILL OUT THE FORM AND HIT SAVE. THIS ADDS A NEW ITEM TO MY CUSTOM LIST
I could have greatly customized this form however that is not the point of this post.
That's it, there are other approaches such as customizing one of the existing forms and even using InfoPath 2010, but this is how you do it with SharePoint Designer 2010 and creating a new custom List Form.

Enjoy!
Spike Xavier
SharePoint Instructor – Interface Technical Training
Phoenix, AZ

 

Videos You May Like

Creating Users and Managing Passwords in Microsoft Office 365

0 642 3

In this Office 365 training video, instructor Spike Xavier demonstrates how to create users and manage passwords in Office 365.   For instructor-led Office 365 training classes, see our course schedulle: Spike Xavier SharePoint Instructor – Interface Technical Training Phoenix, AZ 20347: Enabling and Managing Office 365    

Using Navigation Controls in a Collaboration Site in SharePoint

0 337 1

In this SharePoint training video, I want to talk about the Navigation Controls in SharePoint. They tend to fall into two kind of different categories; one with the navigation controls in a typical Collaboration Site such as a Team Site or a Project Site. These are Sites that are based on the Team Site Template … Continue reading Using Navigation Controls in a Collaboration Site in SharePoint

Detailed Forensic Investigation of Malware Infections – April 21, 2015

4 608 5

How does an investigator hunt down and identify unknown malware? In this recording of our IT Security training webinar on April 21, 2015, Security expert Mike Danseglio (CISSP / CEH) performed several malware investigations on infected computers and identify symptoms, find root cause, and follow the leads to determine what’s happening. He demonstrated his preferred … Continue reading Detailed Forensic Investigation of Malware Infections – April 21, 2015

Write a Comment

See what people are saying...

  1. Avatar Rhonda spain

    Thank you so much for this post!! So easy to understand, unlike other posts out there!

    Rhonda

  2. Avatar Robin

    Hello, Can you create an custom form to send an email?

  3. Avatar Morag

    I've created a data form which posts data to a custom list. The person filling in the form may need to add an attachment before submitting. How do I add an attachment field? I create new aspx page then I insert New Item Form and pick the custom list I have already created. At bottom of page I try insert Attachment by selecting it from "Current Date Source" fields then I click "Insert Selected Field as…" now I don't know which option to choose:|
     

     

  4. Avatar amit

    hey in my company sharepoint there are many project shown to viewers with all the information of project cost, its author etc. the project title has a tab in which drop down menu is there to with some list of actions. i want to add one item in this list. so that when any one has a query about this projetc they will go in to tab drop down menu and it will generate a form. by filling this form and save the query will be generated and will be seen by the concerened person.

     

    please help me out of this I am totally new to sharepoint ….

  5. Avatar Majid

    Hello,

    I had created a site list and column .Now i want to make some column un-editable so once any one enter a value in the column no once should change it .Thanks in advance for your help! 

  6. Avatar WC

    Hello, do you know how one of these forms could be customized to choose and edit a line item rather than create a new one? I need to be able to create a custom list interface that allows the user to choose a specific line item via a dropdown field, and have the list recognize which item  they are attempting to alter. Thanks for your help!

Share your thoughts...

Please fill out the comment form below to post a reply.