How to add header image to Microsoft List Forms in SharePoint Online

Question

Hello,

I have a SharePoint List. I've create a new form using the Microsoft List Forms feature. Is there a way to add an image in the header of the form? The blog below suggests that you can add a custom logo but I do not see how in the Microsoft List Form.

https://techcommunity.microsoft.com/t5/microsoft-sharepoint-blog/collect-information-like-a-pro-new-microsoft-lists-forms/ba-p/4086659

Answer 1

Here are steps to use custom picture in the form header:

1.Upload a picture into document library.

2.Select the picture -> Details -> Copy the path.

3.Use following JSON codes. You need to replace picture path with yours.

{
  "elmType": "div",
  "attributes": {
    "class": "ms-borderColor-neutralTertiary"
  },
  "style": {
    "width": "99%",
    "border-top-width": "0px",
    "border-bottom-width": "1px",
    "border-left-width": "0px",
    "border-right-width": "0px",
    "border-style": "solid",
    "margin-bottom": "16px"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "box-sizing": "border-box",
        "align-items": "center"
      },
      "children": [
        {
          "elmType": "img",
          "attributes": {
            "src": "https://tenant.sharepoint.com/sites/emilytest/Shared%20Documents/images.jpg",
            "title": "Logo"
          },
          "style": {
            "flex": "none",
            "padding": "0px",
            "padding-left": "10px",
            "height": "80px",
            "color": "white"
          }
        }
      ]
    },
    {
      "elmType": "div",
      "attributes": {
        "class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-24"
      },
      "style": {
        "box-sizing": "border-box",
        "width": "100%",
        "text-align": "left",
        "padding": "21px 12px",
        "overflow": "hidden"
      },
      "children": [
        {
          "elmType": "div",
          "txtContent": "='Contact details for ' + [$Title]"
        }
      ]
    }
  ]
}

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

I check the new Microsoft Lists Forms experience in my environment, currently there is no add custom logo function.

As mentioned in the provided article, add custom logo function is ongoing to rollout.

Please wait the new Microsoft Lists Forms experience be updated with add custom logo function.

As a workaround, you could try to use Power Apps or JSON formatting to customize form header.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.