Auto-file download in form post-submit HTML

I'm trying to create a 'download your free copy...' form for a PDF, with a 'Download' button that both stores the data in a Google spreadsheet (done) and downloads the document.

I can add a simple download link in the post-submit HTML, but this is an extra click for the user and potentially confusing after they've already clicked 'Download'.

So, I'd like the PDF to be automatically downloaded when the form is submitted.

I've tried adding some Javascript, e.g. as per this thread, but nothing has worked.

Is there some way to achieve this?

Thanks!

Hi Octopus, thanks for your reply.

• Clicking a 'Download' button, then nothing downloading and instead seeing a second button saying 'Download', could be confusing... we'd rather combine all actions in one button
• We're producing a report available for free, in exchange for which we gather basic contact details (not an unusual scenario...?)

Any thoughts on how this could be achieved?

Thanks.

Any chance anyone might have an answer, i.e. if it's possible / how to automatically download a file on submission of a form?

I got this working with the following code in form post-submit HTML

<script>
var link = document.createElement('a');
link.href = '/s/filename.pdf';
link.download = 'filename.pdf';
link.dispatchEvent(new MouseEvent('click'));
</script>

Found in this stackoverflow answer

Hi @Perp - I am new to Squarespace. How do I upload a file so that it can be automatically downloaded like you explained?

Perp's anwer was perfect. I added it to the post-submission html section, renamed my file and it worked perfect. To get the file uploaded, all you need to do is act like your going to add a URL to text, upload the file that way, cancel out of the url add and your file name should show up just as you named it when you click the button to download. I recommend trying it out as a test  visitor on your site after you publish or enable to page to make sure it works. Thanks Perp!

@IndianLakeConsulting thanks this worked for me. But when the file downloads it says "Failed - No File" and I'm unable to open. Any ideas on why this happened?

On 12/5/2019 at 2:28 PM, Tiara_LD said:

@IndianLakeConsulting thanks this worked for me. But when the file downloads it says "Failed - No File" and I'm unable to open. Any ideas on why this happened?

So, I had to manually upload the file through another SquareSpace file upload protocol (Make sure the names are exactly the same) to get the file to, what I assume, is my instance of a SquareSpace file library for the code to pull from. If you still have issues, let me know and I can upload some screenshots as to how I do it. Try grabbing a file from one of my pages (https://www.indianlakeconsulting.com/projectquotingtooldownload) to see if this is how you would like the form or button to behave. Thanks!

So as I follow-up, I discovered that the file name cannot have spaces. I encountered the same ”Failed -File not found” error but eliminated the spaces in the name of my find with underscores across the board where the file name is used and it should clear up the issue!

I used the code that Perp provided (thank you!) and made sure that my file was named correctly. When I'm viewing the page as a visitor, it doesn't start a download. It just opens a new tab. I need it to download because this form does not have the same functionality when viewed with browser's automatic pdf viewer.

Here's the code updated to reflect my file name:

<script>
var link = document.createElement('a');
link.href = '/s/ca81622nd.pdf';
link.download = 'ca81622nd.pdf';
link.dispatchEvent(new MouseEvent('click'));
</script>

Am I missing a step somewhere? If not, anyone know how to do this? I don't need it to be a part of a form. I'm just not sure how to create a download link in squarespace.

On 8/3/2017 at 10:56 PM, Perp said:

I got this working with the following code in form post-submit HTML

<script>
var link = document.createElement('a');
link.href = '/s/filename.pdf';
link.download = 'filename.pdf';
link.dispatchEvent(new MouseEvent('click'));
</script>

 

 

Found in this stackoverflow answer

Thank you for the code. It's working. But i want to download the file once the form is filled and submit button is clicked. Is it possible to do that??

AxuRichi,

could you jump onto my site below and see if the interface that I have setup is what you’re looking for? Nav to the bottom of that page and click the “download tool” button. If so, chat with me there and I can get you setup

https://www.indianlakeconsulting.com/microsoftexcel

I've been trying to do this with html, but have had similar results:

- Opens up the image url

- Only does a direct link if there's a filename error, and so is a failed download

I'm tested this with images stored on both on/off squarespace in case it was a url vs extension thing.

So.... how do we get direct links working on Squarespace?? right-clicking an image is not a modern customer experience, especially with all the touch devices out there

Or ... anyone know how to modify the code so that it opens up a New Tab, rather than replaces the current address?

On 1/29/2020 at 12:42 PM, JonJonJon said:

Or ... anyone know how to modify the code so that it opens up a New Tab, rather than replaces the current address?

Has this been answered yet?

On 2/5/2021 at 1:17 PM, AbelianUS said:

Has this been answered yet?

Just add the next line to the code: 

link.target = '_blank'; // added target attribute with _blank value

The full code would look like this: 

<script>

var link = document.createElement('a');

link.href = '/s/ca81622nd.pdf';

link.download = 'ca81622nd.pdf';

link.target = '_blank'; // added target attribute with _blank value

link.dispatchEvent(new MouseEvent('click'));

</script>