How do I make a series of forms to look like my website, with SharePoint UI mostly removed, and my website's header/footer added?

Question

I have a list and I'm creating a "CustomNewForm.aspx" for it. I want that form for adding new items to look similar to our public website (all/most of the SharePoint UI is hidden; our website's header, footer, and CSS/JS is added). I want to be able to make a other forms in this site also look like this, but I want to also leave the style of the list view and the rest of our SharePoint site intact. I also need to manage the permissions for this form -- there will be a group of users that should only be able to use these forms and almost no other page on our SharePoint site. What is the best way to accomplish this?

Answer 1

The best option based on your requirements (including the security) you should use JSOM. Follow below steps

1. Create a new Page and add it to SitePages or any of the pages library
2. Break permission inheritance and remove all permission for that page
3. Add the users who you want to view this page
4. Now add a Script Editor WebPart into the page
5. Use CSS/JavaScript to hide all SP elements you want to hide
6. Use HTML to create the form as per your design
7. Now use JSOM to add data into the backend list