How to make a floating “attachments” block for SharePoint forms

I recently developed the above solution for a project requiring attachments at multiple points throughout the form. Originally I considered just placing a static “attachment button” in multiple places, but I came up with this and liked it better.

So if you also have long forms for your SharePoint lists, and you would like an easier way for end users to add attachments to list items, ditch the out-of-the-box ribbon menu attachment button and try this “floating attachment box” solution instead.

A. Create a Custom New Item Form using SharePoint Designer
B. Add image to Site Assets and CSS to custom form in SharePoint
C. Make final edits to Custom New Item form in SharePoint Designer

Create a Custom New Item Form using SharePoint Designer

1. Open SharePoint Designer
2. Click “Lists and Libraries” on the left navigation menu
3. Select the name of the list for which you’re customizing the new item form
4. Click “New” next to the “Forms” box title
   
   Note: You must have a new new item form – do not edit the “NewForm.aspx” default form.
5. Give your new form a name and check the box for making it the “default” form if you wish. Click OK.
   Note: This name will appear at the end of your URL for new items/forms similar to https://yoursite.sharepoint.com/Lists/ListName/New.aspx
   

Add image to Site Assets and CSS to custom form in SharePoint

1. Download this zip file and extract the contents
2. Open your site in your internet browser
3. Place both files in your site’s Site Assets folder (Settings –> Site Contents –> Site Assets)
4. Copy the URL to the attachmentbox.css file (something like https://yoursite.sharepoint.com/SiteAssets/attachmentbox.css)
5. While in the browser, open your custom new item form. If you set the custom new form to default, you can just go to your list and click “New Item”. Otherwise enter your URL as demonstrated in step 5 of the previous section. If your new items open in a modal dialog, you’ll also need to modify the URL to access just your new form.
6. Edit page (Settings –> Edit Page)
   
7. Add a web part
   
8. Media and Content –> Content Editor –> Add
   
9. Edit web part
   
10. Paste the URL to attachmentbox.css into the content link box of the properties pane
    
11. Expand the “Appearance” section and set “Chrome Type” to “None” and Click OK.
    
12. Stop editing the page (Page ribbon menu –> Stop editing)
    

Make final edits to Custom New Item form in SharePoint Designer

1. Go back to SharePoint Designer where we’d created a custom new form
2. Right click the name of your new .aspx form and select “Edit in Advanced Mode”
   

Find the line where your first field name is visible and find the closest opening table tag (highlighted in yellow). Paste the following (download here) before it.

Scroll or search (Ctrl+F) near the bottom until you find idAttachmentsRow

and paste the following (download here) before that row (or the opening tr tag). Don’t forget to replace the image URL with the correct one for your site.

Then paste the following (download here) before an xsl tag containing test=$dvt_1_automode

and insert 2 (two) closing div tags where SPD highlights a closing td tag for you as seen below (or download here). The two closing div tags should come right after the closing table tag and before the highlighted closing td tag.

 

That’s it! Save your new.aspx form, view the form on SharePoint and watch the magic work! You may need to adjust the css file to best suit your specific form and branding, but that’s easily updated from within SharePoint Designer.

Interested in making your custom form even better?

• Remove the extra set of save and cancel buttons
• Change the “Save” button to a “Submit” or other button