Skip to main content

Instruction Panel

The Instruction Panel adds a clear set of instructions to the top of a SharePoint form, so people know what to do before they start filling it in. It is built with a standard Microsoft List and a small piece of form-configuration JSON applied to the form header. It shows a friendly, highlighted panel with guidance above the fields.
Author
SharePoint Maven
Built with
Features
JSON
Category
Formatting

Want one like this?

Talk to Greg

Overview

  • Adds a highlighted instruction panel to the top of the form
  • Tells people what to prepare and what to expect before they start
  • Reduces incomplete or incorrect submissions
  • 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 wording is easy to edit

Common Use Cases

  • Request and intake forms
  • Onboarding forms
  • Application or nomination forms
  • Compliance submissions
  • Anything new users fill in
  • Any form that benefits from guidance

How to Apply JSON code

  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": {
    "width": "100%",
    "box-sizing": "border-box",
    "background-color": "#eef5fd",
    "border-left": "5px solid #0f6cbd",
    "border-radius": "8px",
    "padding": "14px 16px",
    "margin-bottom": "14px"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "align-items": "flex-start",
        "gap": "10px"
      },
      "children": [
        {
          "elmType": "span",
          "attributes": {
            "iconName": "Info"
          },
          "style": {
            "font-size": "16px",
            "color": "#0f6cbd",
            "margin-top": "2px",
            "flex-shrink": "0"
          }
        },
        {
          "elmType": "div",
          "style": {
            "display": "flex",
            "flex-direction": "column",
            "gap": "4px",
            "min-width": "0"
          },
          "children": [
            {
              "elmType": "div",
              "txtContent": "Before you submit",
              "style": {
                "font-size": "15px",
                "font-weight": "700",
                "color": "#0b3f75",
                "line-height": "1.3"
              }
            },
            {
              "elmType": "div",
              "txtContent": "Fill in every required field, attach any supporting files, and choose an approver. Requests are usually answered within two business days.",
              "style": {
                "font-size": "13px",
                "font-weight": "500",
                "color": "#2f3b45",
                "line-height": "1.5"
              }
            }
          ]
        }
      ]
    }
  ]
}

Common Questions About the Instruction Panel

What is the Instruction Panel 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 clearer forms without ongoing development overhead.

Why put the instructions in the header?

SharePoint lets you add free content to the form header and footer, so the header is the natural place for guidance that should appear above the fields. It shows every time the form opens, so people see it before they begin.

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.

Can I change the wording?

Yes. The instruction text lives in the JSON, so you can rewrite it for your process, add a step, or point to a help page. It is just text you control.

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.