Customize SharePoint List Forms using InfoPath 2010


Description:

I have a custom List named Employee Details which contains the following columns

InfoPthS1.gif

Here I am going to customize the list forms using InfoPath 2010 and the form looks like the following

InfoPthS2.gif

Customize SharePoint List Form:

  1. Go to Employee Details list.
  2. On the ribbon interface, click on List Tools and then click on List tab.
  3. Click on Customize Form which is available in Customize List ribbon group.

    InfoPthS3.gif
     
  4. InfoPath form will be opened.
  5. Select all content in the form by pressing CTRL+A.
  6. Press Delete to delete all the content in the form.

Create Custom Layout:

  1. On the Page Design tab, click Page Layout Templates, and then click Color Bar as shown in the following

    InfoPthS4.gif
     
  2. The layout looks like the following

    InfoPthS5.gif
     
  3. Select the layout table, and then click the Center button on the Home tab of the ribbon.
  4. Click on Add tables placeholder text.
  5. On the Insert tab, click on Two - Column 2 table as shown in the following

    InfoPthS6.gif
     
  6. Add one more Two - Column 2 table.
  7. The layout looks like the following

    InfoPthS7.gif

Add a header image to the form:

  1. Click on "Click to add title" placeholder text.
  2. On the Insert menu, click on Picture.

    InfoPthS8.gif
     
  3. Browse for the picture and then click on Insert.
  4. Add the text Employee Details and change the Shading color.
  5. Title looks like the following

    InfoPthS9.gif

Insert the fields in the custom layout:

  1. From the Fields task pane, Drag and drop the fields to the form. You should highlight both columns when you release the mouse so that the label for the control will appear automatically in the left column.

    InfoPthS10.gif
     
  2. Customized form looks like the following

    InfoPthS11.gif
     
  3. On the Home tab, click on Preview.

    InfoPthS12.gif
     
  4. The form looks like the following

    InfoPthS13.gif

Publish the InfoPath form to SharePoint:

  1. Go to File => Info and then click on Quick Publish.

    InfoPthS14.gif
     
  2. Publishing...

    InfoPthS15.gif
     
  3. Form template is successfully published.

    InfoPthS16.gif

InfoPath form in SharePoint Edit or New form:

  1. Open the SharePoint Site.
  2. Go to Employee Details list and add a new item.
  3. New form will be an InfoPath form as shown in the following.

    InfoPthS17.gif