Upload Files to Squarespace Forms
Table of Contents
Here is a FREE way to let people upload files to Squarespace forms!
Do you want your website visitors to be able to upload files into your contact or product forms? Or do you want your customers to be able to upload images for customized products that you sell?
Here's how to allow for file uploads on a Squarespace form.
Step 1 - Create an Account
Before we begin, you'll need to register for a free account here so that you have permission to use the tool.
Now that you have an account, add your website to authorize your website to use the tool. Site Name can be anything, Site Url has to be your exact domain name, and Squarespace Site Url has to be the "ugly" domain Squarespace shows you when you're logged into your website.
Step 2 - Adding Code to Squarespace
Go to your Squarespace website and then go to SETTINGS → ADVANCED → CODE INJECTION and in the HEADER field paste the following code and then click SAVE.
<script src="//uploader.squarewebsites.org/sqs-form-upload.min.js"></script>
Step 3 - Add an Upload Field to Your Form
Add a form block as you need and build out your form. For the file upload, add a TEXT AREA field and for the DESCRIPTION use the following FileField; MaxSize=100KB; Multiple; addText=Upload_Your_Files. For the PLACEHOLDER use this and change it to the file types you want to allow .docx, .pdf.
Using these parameters will automatically make the TEXT AREA field into a FILE UPLOAD field once you save and refresh.
Please see the image for an example.
FileField: Don't remove this, it tells the form that this field is for files.
MaxSize: This is the maximum file size that people can upload. You're limited to 10000 (which equates to about 10MB).
Multiple: Let's people upload multiple files. Delete this if you only want to let people upload 1 file.
addText: This is the label on the upload button. Use an underscore to represent a space.
The very last field is the file types people can upload. Fill in the file types you want to allow people to upload. (For example, .pdf, .docx, .doc, .jpeg, .png, etc.)
Extra Information
When people fill out the form, you get an email with a link to the file. Make sure you're logged into the website from Step 1 on whatever device you click the link on, otherwise you'll get an error saying you don't have permission to view the file.
On the website from Step 1, you can click CONNECT GDRIVE on the left to let all files people upload get stored in your Google Drive. This way you'll have a backup of files as well.
The only way to tell who uploaded a file is from the email that you get from Squarespace initially, so keep that email safe if it's something you'll need to reference in the future.
If the upload field only appears when someone refreshes the website, go to DESIGN → SITE STYLES and make sure AJAX LOADING is disabled.
