Add branding to SharePoint list forms using info-path designer

Customizing a SharePoint list form giving it some nice and sleek design was a tough task and required lot of efforts until 2013. In my work i have faces many situations where i have to depend on page CSS or Master Page CSS to customize a SharePoint list forms like Newform.aspx, Editform.aspx or Displayform.aspx.

The one feature in SharePoint 2013 that made me really happy was the ability to customize SharePoint list forms efficiently and easily without drilling down to css or JavaScript.

This article is the first step to customize a SharePoint list form with colors and layouts.

  • Let us create a simple custom list ( Remember we can customize any list forms with the same approach)

    New item form for SharePoint custom list
    An out of the box custom list new item form
  • We created a simple out of the box custom list. Out of the box it is going to take the master page CSS or the SharePoint default CSS.
  • Let’s customize this page without touching the master page or affecting anything other than this particular page
  • From the list ribbon on top click on List tab which will open a list ribbon with bunch of buttons and commands as displayed in picture.
List ribbon
List form customize button in list menu ribbon
  • As shown in above picture every list has this button called customize form. whenever you click the button it opens the form in Info-path Designer.
  • In SharePoint 2013 every list forms( library,lists) can all be customized  using info-path.

    SharePoint List Form Open in Info path Form
    When the out of the box list form is opened in footpath designer 
  • As shown in picture above  SharePoint list form is now opened in Info-path designer. Info-path provides lot of tools and capabilities that we can use to customize SharePoint forms without using any programming codes. The list now is like a simple HTML form and the right hand side shows all the columns that are added in the list.
  • we can move the rows add some colors to the table insert some pictures and lot of customization in terms of looks and feel be done here.
  • lets us try to re arrange the data fields in different order than what it is now.
d
Right click on each row to get additional modifications for the list columns display
  • using that i reordered the form input fields to the order i wanted
e
A reordered list form using Info-Path Designer
  • As shown in the picture we moved the rows and reordered the input fields. we added new rows and moved the input fields just copying from one place to another. so simple wow.
  • Now my current form looks much better in term of order of information that represents an Employee information input form.
  • let’s add some colors and borders to the form
f
Adding some colors borders and branding to the list form
  • Now you can use the tools available in Info-path forms
g
Options to add further elements like pictures, tables etc.
  • After adding some colors and borders to the form now my form looks like this
h
An out of thebox SharePoint list form Branded with colors and style using Info-Path.

As shown in above picture i have customized a simple SharePoint list form with some colors pictures. we can brand any list forms like this in SharePoint 2013 using Info path designer which was a difficult task in earlier version.

Now we have to save this as a template and publish it from the info-path form make sure it has the list links correctly displayed.

 

i
Publishing the saved form

once the form is published this is how the new list form looks in the SharePoint list.

j
Adding a new item using the new branded list form

Thanks to Info-path now this can be done without a single CSS or HTML knowledge.  This is the very basic feature that info-path has but we can do much more using info-path. I will discuss few functionalities used at my work in future stay tuned.

Advertisements

Leave a Reply

Your email address will not be published. Required fields are marked *