How to embed a Microsoft List form in a SharePoint page
If you are looking for a solution to increase the adoption of a new list in SharePoint or Microsoft Lists, getting it embedded in a new page might be a good approach.
By embedding the new item form in a SharePoint page, users will be able to add data to list without leaving the page context, making the process faster and less disruptive.
To embed the form in a SharePoint page you should to the following:
- Open the list in SharePoint or Microsoft Lists as you prefer
- Click on New to create a new item
- At the top of the new item form click on Copy link
- Return to the page where you want to Embed the form and add the embed webpart
- Instead of pasting the URL of the form directly let’s use an iframe tag, doing it this way allows you to control the height of the form in the page. Use the code below and replace the value in the src attribute
<iframe src="FORM_URL" height="700px" width="100%"></iframe>
- Save the page and Publish it
Every user will be able to create new entries to the list using the form that is available in the SharePoint page as the following image illustrates.
Once a new item gets added to the list, the form redirects the user to the default view; to see the form again in the page the user must click in the new item or reload the page.
October 9, 2022
Going back to the default view of the list within the iframe can be confusing for users, and It’s good ux to confirm a submission went through, so we usually redirect them to a confirmation page. Normally that would just require adding ?source=theurltoredirectto, but of course nothing is that straightforward in Sharepoint, so we found one trick to get it to work is to add another parameter like ?web=1 to the redirect url. Something like:
https://xxx.sharepoint.com/sites/matt-test/Lists/test%20modern%20list/newform.aspx?web=1&Source=https://xxx.sharepoint.com/sites/matt-test/SitePages/test.aspx
Then just set up a page with a confirmation message. Be nice if Msft would think more thoroughly about common scenarios like this, and do a better job documenting the options.
October 18, 2022
Hi Matt,
Thanks for the tip 🙂
February 25, 2023
Hey,
Your iframe is showing a page not found error for your example of how to embed SPO list in SPO page.
February 25, 2023
Thanks for letting me know I just fixed.
Have a nice weekend