Do you want your website visitors to be able to upload files into your contact forms? Or do you want your customers to be able to upload images for customized products that you sell? Here is a way to get that feature on Squarespace without paying for a third party form plugin!
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.
Step 3 – Add an Upload Field to Your Form
Now that you have the code installed, go to the form you want to add an upload field to and click ADD FORM FIELD, the very first option you should see is now UPLOAD FILE so go ahead and click on that.
The field will autopopulate with some text, modify what you need to but the form should now be working.
- 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: 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.)
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.