How to Create Squarespace Form for File Upload

This post may contain affiliate links. I may earn a commission at no extra cost to you if you make a purchase through them. Full disclosure here.

To create a Squarespace form that allows users to upload files, you can use a combination of Dropbox's File Request feature and custom code injection. Here's how to set it up:

Quick Fix

Create a Dropbox File Request

1. Log into your Dropbox account and click on "File Request" in the left menu.
2. Click "New file request" and customize the settings like the request title and destination folder.
3. Copy the unique URL for your file request.
4. In your Squarespace site, go to SETTINGS → ADVANCED → CODE INJECTION.
5. In the HEADER field, paste this code and replace DROPBOX URL with the link you copied:

xml<script>
  window.addEventListener('load', function() 
  {var fileInput = document.querySelector
    ('input[type="file"]');
   fileInput.setAttribute
     ('onclick', 'window.open("DROPBOX URL")');});
</script>

1. Click "Save".

2. Add a form block to your page and build out the form fields.

3. For the file upload field, add a text area field.

4. In the description, use this format:

textFileField; MaxSize=100KB; Multiple;
addText=Upload_Your_Files*.docx, .pdf, .jpg, .png*

    

Copy to Clipboard

This will turn the text area into a file upload field.

1. Customize the allowed file types and max size as needed.

Now when users fill out your Squarespace form, they can click the file upload button to open the Dropbox file request and attach files. The uploaded files will be stored in your Dropbox account.

By leveraging Dropbox's file request feature along with custom code injection, you can easily add a powerful file upload capability to your Squarespace forms.