Squarespace Websites Uploader

Blog

Check Out Useful Squarespace articles here

Squarespace Websites Uploader

Squarespace has good forms builder, but unfortunately there is no upload field to store user files or docs. It may be useful for user images, screenshots, pdf-forms or so. Sure you may use some side services to organize file uploading: Wufoo, JotForm and many others. And while they have great builders and file uploads, sometimes you need more than 3-5 forms or 1000 form views per month with free account.  So we decided to make a small javascript plugin, which add file upload fields to Squarespace forms and small web-service to handle these uploads.

Adding plugin on site

So first of all you need to add our plugin to page. The best option is Header Injection (if you want to use script globally on site) or Page Header Code Injection (if you want to use it on specific pages). Let's add the script globally: 

<script src="//uploader.squarespacewebsites.com/sqs-form-upload.min.js"></script>

SquarespaceWebsites Uploader - Header Injection

Our plugin uses Simple-Ajax-Uploader, to overlap default Squarespace Forms text-fields, so show your love his author. 

Now we need to create usual Squarespace Form and add text field which will become our upload button. We need to use custom parameters in this field:

Description Section parameters, ";" delimiter

  • add FileField parameter to enable this field as File upload field - required;

  • set MaxSize  of file in KB, otherwise default value is 1024KB(1MB). The max file size we support at the time is 10MB per file;

  • add Multiple parameter for multiple files uploading;

  • set addText parameter to change button text, use underscore for spaces ex.  addText=Add_your_Files;

  • set UploadUrl parameter to use your own server (ex. UploadUrl=http://my-own-server.com;) or add nothing to use our own service.

Placeholder Section parameters, "," delimiter

  • set the list of allowed extensions here to prevent users upload some files you don't need. Otherwise next list will be used:  ".jpg, .jpeg, .png, .gif, .txt". Our service supports many of document, archives and graphic extensions, but you may request of some custom if you need. 

So with all parameters you will get something like this:

SquarespaceWebsites Uploader - Set Text Field Parameters

Now refresh page and you will see the button Add Files instead of text field - you may click and choose or drag-and-drop files here.

Registering your domain

But if you gonna to use our service for uploads - you need to go on SQS Form Uploader site and register your site domain. Otherwise you will see such error when trying to upload:

SquarespaceWebsites Uploader - Domain not added

Just register with email and password or use Facebook or Google account to sign up.

SquarespaceWebsites Uploader - Sign in

Once you log in, you may add Sites to your account. Name it and add at least Site Url in http://example.com format to save it. You may also add Squarespace Site Url if you want to handle uploads from Squarespace built-in domains (like https://mysite.squarespace.com) also. 

Attention! You are free to change Squarespace Site Url further, unless you want to change the main Site Url - then you need to remove current site clicking red close icon and add Site with new Site Url.

SquarespaceWebsites Uploader - Adding site

Now your site added and user may upload files. You will get Squarespace Form Submission email as usual, but now you will have the unique urls of uploaded files. Note, that these urls are secure and only you will be able to download files while you are logined on site.

SquarespaceWebsites Uploader - Upload Files

SquarespaceWebsites Uploader - Squarespace Form Submission

You may also see uploads in Admin Uploads tab on SQS Form Uploader site:

SquarespaceWebsites Uploader - Uploads Tab

If you want, you may use your own Google Drive to store all uploads. First you need to click Connect GDrive button and allow SQS Form Uploader-app offline access. After you may see Connect GDrive button on each of your sites. Clicking this your site will be connected and gdrive icons appear. 

SquarespaceWebsites Uploader - Connect Google Drive

SquarespaceWebsites Uploader - Site is connected to Google Drive

While your site is connected to Google Drive, user uploads will be stored to SQS Form Uploader/your-site-address/ folder. And you will get direct Google Drive links to files now.

SquarespaceWebsites Uploader - Google Drive uploads

SquarespaceWebsites Uploader - Squarespace Form Submission(Google Drive)