Customise newform.aspx and editform.aspx

Question

When it comes to customizing the newform.aspx and editform.aspx for list items, what options are available to do this? I have read some posts which require the use of visual studio to be able to do anything quite complex and a lot of older posts which use SharePoint Designer 2010 and the design view which is obviously no good now.

Is there anywhere to do it with HTML/CSS ?

Thanks

Answer 1

You have a couple options here. I usually do my editing of these forms in SharePoint designer. First navigate to the List and open the EditForm in 'Advanced Mode':

Now, within the PlaceHolderAdditionalPageHead element, you can add your <style> block with CSS.

Alternatively, you can add a ContentEditor web part directly in the EditForm with a <style> block, and it will be applied to all items.

Answer 2

I would recommend HTML/JavaScript/CSS changes.

1. Create a html page in your Pages library (if you have publishing enabled), Site Pages, Site Assets, or any other library you see fit within the site collection.
2. Go to your list form page and add ?pageview=shared&toolpaneview=1 to the end. For example: newform.aspx?pageview=shared&toolpaneview=1. If you are using an InfoPath form, the default pages are newifs.aspx and editifs.aspx
3. Add a content editor web part to the page and link to the html you created. Make sure to set the Chrome to "None". You can also set the web part to be hidden.
4. Edit the script in the HTML page you created in step 1. Don't forget to publish your changes if you are using the Publishing Feature.

If you want to make CSS changes which effect all list forms, then you will have to modify your master CSS file which you link to in your master page.