How to customize a SharePoint modern list form

This post is the first in a little series of articles on how to customize SharePoint list forms in modern SharePoint 2019 and SharePoint Online. In this first article, we look at the options available to you natively in SharePoint. Note that the content is current as of this writing (June 2020), but it may (or almost certainly will) change as Microsoft makes updates, including the addition of Microsoft Lists.

Why customize a SharePoint list form?

In a modern SharePoint list when you click +New to add an item, or click on an item to display or edit its content, you’re presented with a nice panel that slides out from the right. You stay in context on your page, and you’re not taken to another page where you must navigate back to the list.

Also, the data entry interface is getting better and better. Fairly recently, a helpful data type icon was added to the form, allowing you to see what type of value to enter. There have also been recent improvements in the UI for some specific field types, such as dates and links.

But still, there are times when the built-in form isn’t enough. Maybe you have so many fields that people must scroll down and down to view and enter them all, so you’d like a different layout. Or maybe you want to add some logic to some fields, such as hiding one field based on the value in some other field or based on who’s viewing the form. Cases like these are what we want to help with in this blog series. In this post, we’ll talk about what you can do to customize list forms using SharePoint “out of the box”.

How to customize a SharePoint modern list form out of the box

1. Open any of the three forms from within the list: New Form (click +New), Display Form (click on an item), or Edit Form (select an item and click Edit). Changes you make will apply to all three forms.
2. At the top of the form, click Edit form
3. Select Edit columns from the dropdown (we’ll look at Customize with Power Apps in another article)
4. A narrow panel opens on the right entitled Edit columns in the form. 
5. Drag the fields up and down to rearrange them. Or click to the far right of a field to access Move up and Move down options.
6. Click on the checkboxes to hide or display fields. Note that required fields cannot be hidden (the checkboxes are greyed out).
7. Some types of fields can be conditionally hidden. If you see the Edit conditional formula option when you click to the far right of a field, then this is available. See details and formula examples here.
8. Coming soon, you’ll be able to use JSON code to modify a form’s header and footer, as shown below.
9. Also coming soon, you can modify a form’s body with JSON code, as shown in this example from Microsoft:

Some things to think about

Currently, list form customizations are not supported in the SharePoint mobile app, due to their requiring CSS to work. However, Microsoft has said they plan to support list form customizations in the upcoming Microsoft Lists mobile app. For now, if you wish to use a customized form from the SharePoint mobile app, you can go to Site Contents in the app. This will open a browser session and you can open your list from there.

The customizations described above can be performed by anyone with at least Contribute permission to the list. By default, this will include anyone who’s a Member of the site, as they have Edit permission. This could mean that others might change customizations you have made. 

If it’s a problem for your organization that form customizations can be changed by any site member, you may wish to consider using Lightning Forms to customize your modern lists. With Lightning Forms, only a user with Full Control will have access to the customization interface. After a form is customized, people with only member access cannot see the built-in Edit Columns link. In addition, Lightning Forms offers far more configuration options than SharePoint’s built-in form customization, and all with no code at all!