Skip to main content

Branded Form Header (Form Configuration)

The Branded Form Header adds a logo and a title banner to the top of a SharePoint list form, so a New or Edit form looks like a polished, branded experience instead of a plain field list. It is built with a standard Microsoft List and a small piece of form-configuration JSON applied to the form header. It shows your team or service name with an icon and a clear form title above the fields.
Author
SharePoint Maven
Built with
Features
JSON, Single Line of Text Column
Category
Formatting

Want one like this?

Talk to Greg

Overview

  • Adds a branded banner with a logo and title to the top of the form
  • Gives New, Edit, and Display forms a consistent, professional look
  • The title can include the item’s own values, such as its name
  • Sits above the fields without changing any of them
  • Applied as form-configuration JSON in the header, so it changes nothing about the data
  • Works on any list form, and the branding is easy to adapt

Common Use Cases

  • Request and intake forms
  • Service desk tickets
  • HR and onboarding forms
  • Approval submissions
  • Project or asset forms
  • Any list form that should feel branded

How to Apply

  1. Open the list, then open any item to show its form.
  2. At the top of the form, expand the Edit form (pencil) icon and choose Configure layout.
  3. In the Apply formatting to dropdown, choose Header.
  4. Paste the JSON below into the box, preview, and click Save.

JSON Code

{
  "elmType": "div",
  "style": {
    "display": "flex",
    "align-items": "center",
    "width": "100%",
    "box-sizing": "border-box",
    "padding": "12px 4px",
    "border-bottom": "2px solid #edebe9",
    "margin-bottom": "12px"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "align-items": "center",
        "justify-content": "center",
        "width": "44px",
        "height": "44px",
        "border-radius": "8px",
        "flex-shrink": "0",
        "margin-right": "14px",
        "background-color": "#0078d4"
      },
      "children": [
        {
          "elmType": "span",
          "attributes": { "iconName": "Org" },
          "style": { "font-size": "22px", "color": "#ffffff" }
        }
      ]
    },
    {
      "elmType": "div",
      "style": { "display": "flex", "flex-direction": "column" },
      "children": [
        {
          "elmType": "div",
          "style": {
            "font-size": "13.5px",
            "font-weight": "700",
            "color": "#007fff",
            "text-transform": "uppercase",
            "letter-spacing": "0.5px",
            "margin-bottom": "3px"
          },
          "txtContent": "Contoso Service Desk"
        },
        {
          "elmType": "div",
          "style": {
            "font-size": "17px",
            "font-weight": "600",
            "color": "#1b1b1b"
          },
          "txtContent": "Request Details"
        }
      ]
    }
  ]
}

Common Questions About the Branded Form Header

What is the Branded Form Header built with?

It is built with a standard Microsoft List (SharePoint list) and form-configuration JSON applied to the form header. There is no custom development, no SPFx solution, and no third-party tools. It is the kind of clean, maintainable formatting Greg Zelfond builds for teams that want polished forms without ongoing development overhead.

Can it show a real logo image?

Yes. The header can show an uploaded logo image from your site, such as one in the Site Assets library, or an icon as in this example. Either way it sits cleanly above the form fields.

Does this design use any custom development or third-party tools?

No. It uses only out-of-the-box SharePoint form configuration, which Microsoft supports natively. That keeps it stable and easy to maintain, and nothing breaks when SharePoint is updated. Out-of-the-box is the only way Greg builds, so you can own and extend the design yourself for years.

If LookBook 365 is code-free and out-of-the-box, why does this example include JSON?

Because SharePoint formatting JSON is not custom code – it is a native configuration feature built into lists and libraries. It is declarative: it only describes how an existing form looks, and cannot run scripts, reach external services, or change your data. Nothing is deployed and nothing breaks when Microsoft updates SharePoint, and you can edit or remove it anytime. That is why LookBook 365 treats it as out-of-the-box and low risk.

Does it change the form fields?

No. The header only adds a banner above the form. All the fields, their order, and how they behave stay exactly as they were – you are only adding a header on top.

Can Greg build form formatting like this for our team?

Yes – this is exactly the kind of work Greg Zelfond does. As an independent SharePoint consultant and Microsoft MVP, he designs out-of-the-box list and library form formatting like this so your team can read and maintain it without a developer. Reach out through the contact page to talk about your forms.