Uploading PDFs and other files to Squarespace* has always been a bit of a tricky task for users to figure out. Squarespace doesn’t exactly make it easy. It’s definitely one of those tasks where you need to go hunting on Google for a solution… which I’m sure is why you landed here! I got you! I’m going to be showing you several ways you can add files to your Squarespace website. These methods include creating a general file library, adding files to text, buttons, images, newsletters, and form blocks. I’ll also walk you through how to add an “Upload File” button option to your Squarespace forms.
Squarespace recently released a cool new feature called the Asset Library that allows us to upload and manage images & videos. Unfortunately, the Asset Library doesn’t support PDFs. Come on Squarespace! Maybe soon🤞. For now, we use a little workaround. There actually is sort of a library for PDFs & other files, it’s just a bit hidden. But once you know how to access it and use it to store files, you’ll find that adding downloadable PDFs to your website is pretty easy. Follow along with my tips + instructions below and you’ll be mastering this task in no time.
*This post contains affiliate links. I earn a small commission when you click on the links and make a purchase. This comes at no additional cost to you. Affiliate links are marked with an asterisk.
*Note these steps will create a PDF/File Library on your website that you can use for general link sharing. If you’d like to specifically add a PDF or File to a text link, button, newsletter form, or form block, keep scrolling for those specific instructions.
Once you add a PDF or File to your website, it will be sort of hidden in the backend until you link it somewhere on the front end of your website. So if you’re looking to keep a PDF private, don’t worry! No one will actually see the PDF unless you add it to a link on your website. If the PDF is confidential or exclusive and you don’t want people potentially finding it by accident, I recommend following the steps below with one exception — upload the PDF to a password protected page.
Adding JS or CSS files? There are instances when you might need to add a .js and/or .css file to your website for 3rd party Squarespace plugins. The instructions below can be followed in order to add these files to your website.
Note: you can actually even delete this File Library page after you’ve uploaded your PDF or file to it. The file will still be stored in the backend of your website and you can access it through any link editor. I recommend keeping the File Library page if you plan to have multiple files and PDFs for download your website. This File Library page will keep everything nicely organized in one place for you to refer back to without having to open up the link editor.
1. Navigate to the Newsletter Block you’d like to add the file to
2. Click Edit on the Newsletter Block. Click on the Content tab
3. Scroll down and click on Post-Submit. Under After Submission click on Redirect
4. In the Redirect URL field, click on the little settings icon
5. Click on the File tab. Choose an existing file or click Upload File to add a new file from your computer
6. Make sure you select your file by clicking on the checkbox
7. Click Save (top left corner)
8. Click Done > Save on the page (top left corner)
9. That’s it — your newsletter block will now redirect users to your PDF or File upon submission 👏
1. Navigate to the Form Block you’d like to add the file to
2. Click Edit on the Form Block. Click on the Content tab
3. Scroll down and click on Post-Submit. Under After Submission click on Redirect
4. In the Redirect URL field, click on the little settings icon. Click on the File tab
5. Choose an existing file or click Upload File to add a new file from your computer
6. Make sure you select your file by clicking on the checkbox
7. Click Save (top left corner)
8. Click Done > Save on the page (top left corner)
9. That’s it — your form block will now redirect users to your PDF or File upon submission 🎉
1. Navigate to the Text Block you’d like to add the file to
2. Click Edit on the page
3. Highlight the text that you’d like to add the file to. Click on the link icon
4. In the small pop-up window, click on the little settings icon
5. In the larger pop-up window, click on the File tab
6. Choose an existing file or click Upload File to add a new file from your computer
7. Make sure you select your file by clicking on the checkbox
8. Toggle the Open in New Window option on
9. Click Save (top left corner)
10. Then click Apply (don’t forget to do this! Everyone always forgets this step 😬 )
11. Click Done > Save on the page (top left corner)
12. That’s it — your link will now open up your PDF or File in a new tab when someone clicks on it
1. Navigate to the Button Block you’d like to add the file to
2. Click Edit on the Button Block
3. Click on the Content tab. In the Link field, click on the little settings icon
4. In the larger pop-up window, click on the File tab
5. Choose an existing file or click Upload File to add a new file from your computer
6. Make sure you select your file by clicking on the checkbox
7. Toggle the Open in New Window option on
8. Click Save (top left corner)
9. Click Done > Save on the page (top left corner)
10. That’s it — your button will now open up your PDF or File in a new tab when someone clicks on it 🥳
1. Navigate to the Image Block you’d like to add the file to
2. Click Edit on the Image Block. Click on the Content tab
3. In the Link field, choose On Image. Then click on the little settings icon
4. In the larger pop-up window, click on the File tab
5. Choose an existing file or click Upload File to add a new file from your computer
6. Make sure you select your file by clicking on the checkbox
7. Toggle the Open in New Window option on
8. Click Save (top left corner)
9. Click Done > Save on the page (top left corner)
10. That’s it — your image will now open up your PDF or File in a new tab when someone clicks on it 😃
Pro Tip: If you’d like to display an image of your PDF that your users can click on to download, convert your PDF to an image here: https://smallpdf.com/pdf-to-jpg. Then, follow the instructions above for linking the image to the actual PDF.
This option uses a Dropbox feature called File Request. You will need a Dropbox account for this option. Good news — you only need a basic free plan which you can sign up for here. Dropbox file request lets you request files from anyone and collect them right in your Dropbox account.
A Few Notes about File Request with Dropbox:
1. Add a Form Block to your website
2. Click Edit on the Form Block
3. In the Content tab, click on Edit Form Fields
4. Click Add Field
5. Add a Line field, then click on the Line to edit it’s options
6. In the Label field, paste the following code
7. By adding this code to the Label field, we are creating a link that people will click on to upload their file. When someone clicks on the link, they will see a pop-up window where they can upload their file.
8. Next, login to your Dropbox account (or create an account here)
9. On the menu on the left side, click on File Requests
10. Click on the blue button that says New request
11. In the pop-up window, add a Title + Description and then click Create
12. A new pop-up window will appear that says Share file request. This window will contain a box that says Share a link instead. Click Copy next to that link
13. Go back to your Squarespace form and locate the code that we added to the Label field in our previous steps
14. Search within that code for the words DROPBOX URL. The words are between two quotation marks. We will be leaving the quotation marks alone and only replacing the words DROPBOX URL
15. Carefully replace the words DROPBOX URL with the link you just copied from Dropbox. Again, leave the quotation marks alone. Your link will appear in between the quotation marks. It might be easier to take the code out to a Word doc, replace with the URLs, and then add the code back to the website
16. *IMPORTANT* You will need to do this twice! There are two instances of the words DROPBOX URL within the code. Make sure you replace both with your link
17. Click Done > Save on the page (top left corner)
18. You’ll notice that the words UPLOAD appear as plain text. If you’d like to style this and turn it into a button, copy and paste the following code below into your website’s Custom CSS (Design > Custom CSS)
.form-block < .title < a < background-color: #000; margin-left: 10px; text-transform: uppercase; padding: 10px 15px; color: #fff; letter-spacing: .1em; font-size: 12px; font-weight: bold; vertical-align: text-bottom; >> >
19. You’re done! Now you have a wonderful UPLOAD button on your Squarespace form. When someone uploads a file to your form, you will get notified via email by Dropbox and the file will be available to view in Dropbox 🎉
Note: Users will need to remember to click SUBMIT on your form, even after they upload their file. Sometimes people think that after they upload their file, the form gets submitted. This is not the case. They will need to upload their file and then submit the form. I recommend adding some verbiage to your form that explains this.
Form Uploader by Squarewebsites* is a free plugin that allows you to add a FILE UPLOAD button to your Squarespace forms. Unlike the Dropbox option above, users don’t need to upload the file and THEN submit the form in two separate steps. With SQS Form Uploader, they will upload the file to the form directly, and click submit. Additionally, a link to the file that they uploaded will be sent to you in their submission email you will receive from Squarespace. You can also view files in the SQS Form Uploader dashboard under the Uploads tab.
1. Create a free account here: https://uploader.squarewebsites.org
2. After you create your account and you are logged in, click on the Sites tab on the left side menu
3. Under Add Site, add your Site Name (whatever you’d like to name it)
4. Under Site URL, add your custom domain name
5. Under Squarespace Site URL, add your built-in Squarespace domain name. Click Add Site
6. Open up your Squarespace dashboard and navigate to Settings > Advanced > Code Injection
7. Paste the following code into the Header field
9. Navigate to your Form Block
10. Click on Edit Form Fields and add a Text field, then click on the Text to edit it’s options
11. For the Label field, enter a label such as Upload Files
12. In the Description field, paste the code below
FileField; MaxSize=100KB; Multiple; addText=UPLOAD_FILE
13. In the Placeholder field, add the file types you want to allow: .docx, .PDF, .txt, .jpg, .odf, .trf, .png
14. You’re done! Now you have a wonderful UPLOAD button on your Squarespace form. When someone uploads a file to your form, you will see a link to the file directly in the notification email you get from Squarespace 👏
The free options above (Dropbox and SQS Form Uploader) can sometimes be a bit limited and unreliable. If allowing users to upload files to a form is an essential part of your business, I recommend using this paid tool: Wufoo. This option will be a bit more reliable and will create a more seamless experience for your users.
Wufoo is a third-party service that allows you to embed forms into your website. With this option, you will be creating the form in Wufoo with a File Upload field and then embedding it into your website with a code block.
Wufoo requires a monthly subscription. See pricing options here.
Uploading a custom font to Squarespace is another example of an instance where you might need to add files to your website. And it’s likely a bit easier than you’d expect. It involves adding the font files to your Custom CSS file manager. Click on the button below for a step-by-step tutorial on this process.
That’s all on this comprehensive guide for adding PDFs and Files to Squarespace (plus adding File Upload options to your Squarespace forms). Shoot me a message if you need additional support!
Did you enjoy this article? Check out more articles like this in the Squarespace Blog. In the blog, I share tips for hiring Squarespace Designers (or becoming one!), custom CSS and Javascript solutions, my favorite plugins, Squarespace Template Shops, and more!
My modern, service-based templates are designed for entrepreneurs and small businesses who are looking for a professional website design without breaking the bank. Each one of my templates include video tutorials for easy content upload / style tweaks. I also include my Advanced SEO Guide (a $500 value). This guide contains the exact techniques I use to help my SEO clients land on Google page 1.
