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>

A Special Note

The code for the clickable link requires TWO instances of the Dropbox URL. One instance is assigned to the HREF Attribute. One instance is included as part of the ONCLICK Attribute. Here’s an example image of a completed Code Block:

The Code Block should look similar to this, with TWO instances of your URL.

The Code Block should look similar to this, with TWO instances of your URL.

For the code to work properly, both URLs must contain no spaces, and there must be no spaces on either side of the URL (between the quotation marks or tick marks - as shown in the image).

 

Sample CSS Used In This Demo

EXAMPLE: This is how the properly inserted code will appear in the Page Header Code Injection panel

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 CSS code. The code must include the <style></style> Tags. 

<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>
 

FAQ

Q: I followed the steps on this post and everything worked great except the link. When I click on upload, it takes me to a pop-up and 404 error from DropBox. Any advice on that?

A: A 404 Error indicates that the URL inside the <a> Tag is incorrect. As in, there’s a typo or an extra space in the Dropbox URL you used in the code for the button. The most common error is people putting a space between the apostrophe and the http://

For the code to work properly, the URL for the HREF attribute must contain no spaces between the quotation marks.

Q: I double-checked the code and there are no typos or spaces. But still, when I click on upload, it takes me to a pop-up and 404 error from DropBox.

A: In that case, the error is typically that the correct URL was placed in the code only once. The Dropbox URL must be signed to both the HREF Attribute, and as part of the ONCLICK Attribute (see the above example image).

 
Upload-to-Squarespace-with-Dropbox