Using Squarespace Forms with Dropbox to Receive Uploaded Files

A "Workaround" to Upload Files With Squarespace and Dropbox

Updated: July 13, 2018

Squarespace doesn't currently offer the ability to upload files via a Form. There is, however, a workaround if you have a Dropbox account. You'll be using Dropbox's File Request feature. [Learn More

In this example form, I've added the link to a special Dropbox folder as the Title of a Line Form Field. When folks click 'upload', they'll be able to select files from their own computer to upload into your public Dropbox folder. I use Custom CSS to style the 'upload' button.

I recommend that you also include instructions for folks to uniquely name their files so you can easily distinguish them inside of the Dropbox folder. Note: Dropbox will also prompt them for a "First Name, Last Name" and then prepend that text to the actual file name in your Dropbox folder.

Regarding Privacy

Per Dropbox's own Help Page:

Keep files private
People who upload files to your file request cannot access your Dropbox. Only you can view files uploaded by others, unless you decide to share them.


 

Squarespace Form using Dropbox's File Request Feature to Accept Uploaded Files

Name *
Name
Project Files upload
NOTE: Please re-name all files to include your project name before uploading to ensure your files are bundled correctly. Ex:jane-smith-design-project-20170117.pdf
 

A Look at the Form in Edit Mode

 

You Can Restrict Access

Dropbox allows you to create multiple "File Request" folders. So you could make yourself client-specific folders attached to a client-specific form and build that into a password protected page so only the one-designated client could upload to that folder.

Upload Popup Sample HTML

The Dropbox URL for the Popup must be the one provided to you by Dropbox's File Request feature. So, first you need to follow the "How do I create a file request?" instructions on this page: https://www.dropbox.com/help/files-folders/create-file-request and clicking the 'Copy Link' button gives you the unique, private  Dropbox URL for your File Requests. You'll replace my fake URL [ https://www.dropbox.com/request/0101010101010101 ] with your new URL in this code (Be sure to highlight ALL of the code which ends with /a> on the far-right. This requires clicking to the left of the opening < character and holding down your mouse button as you scroll to the right, ending with the closing > character.):

Project Files <a href="https://www.dropbox.com/request/0101010101010101" class="upload"  target="popup"    onclick="window.open('https://www.dropbox.com/request/0101010101010101','popup','width=600,height=600'); return false;">upload</a>
 

Sample CSS Used In This Demo

NOTE: For the page where you add this form, go to the page's Settings pane, under the Advanced tab, in the "Page Header Code Injection" panel, add this code: 

<style>
.form-wrapper .field-list .section a {
  background-color: rgba(212, 49, 129, 1);
  border-radius: 3px;
  margin-left: 20px;
  padding: 2px 5px;
  color: #fff;
  letter-spacing: .1em;
  font-variant: small-caps;
  font-size: 11px;
}
</style>

Questions?

I'd love to help you with customizations and integrations for your own Squarespace site. Get in touch!