Format The SharePoint Modern Site List Form Using JSON Formatting

We can configure the SharePoint modern site list form using JSON formatting, which has the following use cases:

If you want to implement multiple column forms rather than existing single column look and feel
If you want to hide and show field/column-based forms in a simple and easy way
If you don’t have Power App license but still want to change some look and feel of list forms
If you want to group the fields/columns in the list form

Steps to use JSON formatting to change the form look and feel follows the below steps:

Open the New form of list

Format The SharePoint Modern Site List Form Using JSON Formatting

See the form is showing only one column view

Click on the highlighted icon and choose the below option

The below screen will appear, It will shows a dropdown with three options namely

Header
Body
Footer

Copy the JSON and paste in the field for header
1. {
2. "debugMode": true,
3. "elmType": "div",
4. "attributes": {
5. "class": "ms-borderColor-neutralTertiary"
6. },
7. "style": {
8. "width": "99%",
9. "border-top-width": "0px",
10. "border-bottom-width": "1px",
11. "border-left-width": "0px",
12. "border-right-width": "0px",
13. "border-style": "solid",
14. "margin-bottom": "16px",
15. "background-color": "#026d70"
16. },
17. "children": [{
18. "elmType": "div",
19. "style": {
20. "display": "flex",
21. "box-sizing": "border-box",
22. "align-items": "center"
23. },
24. "children": [{
25. "elmType": "div",
26. "attributes": {
27. "iconName": "Group",
28. -Use icon as per your requirement "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-white",
29. "title": "Details"
30. },
31. "style": {
32. "flex": "none",
33. "padding": "0px",
34. "padding-left": "5px",
35. "height": "36px"
36. }
37. }]
38. }, {
39. "elmType": "div",
40. "attributes": {
41. "class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-24"
42. },
43. "style": {
44. "box-sizing": "border-box",
45. "width": "100%",
46. "text-align": "left",
47. "padding": "21px 12px",
48. "overflow": "hidden",
49. "color": "white"
50. },
51. "children": [{
52. "elmType": "div",
53. "txtContent": "New Form" - This is the Form Title
54. }]
55. }]
56. }

The above JSON is self-explanatory, which has three div.’s, first div is for main container div for header and next two for below…

For Icon
For Title

Click on preview button to see the applied JSON configuration to header.

For Body, copy and paste the below JSON, choose Body from dropdown first
1. {
2. "sections": [{
3. "displayname": "Group name 1",
4. "fields": ["Field Display name1", "Field Display name2"]
5. }, {
6. "displayname": "Group name 2",
7. "fields": ["Field Display name1", "Field Display name2"]
8. }]
9. }

Here in the above JSON, Section is used to divide the fields in multi column views. Use the column display name to put that column section if any field not mention the section then that field/column will automatically display in the last section.

You can see the JSON is self-explanatory so you can add any number of sections here in the JSON.

For Footer copy and pasting below JSON, buttons will not be associated with any part; i.e. it is not associated with Header, Body or Footer section.
1. {
2. "debugMode": true,
3. "elmType": "div",
4. "style": {
5. "width": "100%",
6. "text-align": "left",
7. "overflow": "hidden",
8. "border-top-width": "1px"
9. },
10. "children": [{
11. "elmType": "div",
12. "style": {
13. "width": "100%",
14. "margin-top": "20px",
15. "margin-bottom": "10px",
16. "height": "4px",
17. "background-color": "#026d70"
18. }
19. }]
20. }

The above JSON is just to add some border margin below the body, and you can refer the header JSON to add div children in this section if you want. Just complete all these steps and your list form will look better than the default list form, just click on Save button as highlighted in the below screen.

This formatting will apply to all three forms of SharePoint list form.

For more information please visit the Microsoft site.