Form Formatting Samples

By default, uncustomized list forms display the Title field at the top. This is generally fine, but sometimes you may not want this (especially since the default is to repeat it as the first column). This very basic format removes the default Title display giving you a cleaner form.

A form header formatter that displays days remaining until a due date with color-coded urgency: green (calm, >7 days), amber (warning, 4-7 days), red (urgent, 1-3 days), and crimson (overdue).

This sample displays the Title and Description values in the heading and decorates them with dashed lines. If the Description value is empty, it will be hidden.

This sample demonstrates displaying the values of Created, Created By, Modified, and Modified By in the footer of the form.

This sample shows a customized header for the item form used in the "Event itinerary" list template.

This sample demonstrates displaying Microsoft Teams chat link to chat with task owner.

This sample demonstrates how to display multiple selected persons from existing field in the header.

This sample demonstrates displaying a ribbon in the header.

This sample demonstrates displaying Email link to send an email to task owner

This sample demonstrates sending a meeting invite via Microsoft Teams to attendees in SharePoint list. The JSON can be used as Footer within SharePoint List formatting.

This sample shows a customized header and footer for a form with a Status column with possible values 'Thinking about it', 'Working on it', 'Done', and 'Nevermind'. This format is intended for the Header Format and Footer Format of the form body in the Configure Layout panel. Depending on the value of the Status column, a corresponding icon and colour scheme are used.

This sample displays an Icon and Title in a two column header with the Icon on the left and the Title on the right. An additional Icon and RequestStatus and added below the Title.

This sample demonstrates how to display waves in the header and footer of a form. Waves are displayed using SVG.

This sample demonstrates how to display Welcome message depending on time of day, display user profile image in Forms Header.

This sample shows a checkmark for each date field that has a value to help convey when milestones have been hit.

By default, uncustomized list forms display the fields in a single column. This is generally fine, but sometimes you may want to use more horizontal space and have your fields wrap. This is not technically a format but rather a body layout. No columns or sections are specified meaning that this can be applied to any form and it won't change the order of display or what columns are visible it simply adds the wrapping.