Creating a download or e-book download

[JeffM]

I am very familiar with creating landing pages, CTA's, etc.  I need help creating a download for product sheets for people to download and e-books that people will download.  Ideally I'd like to use the e-book as a carrot to gram contact information and setup a workflow to this with marketing drip campaign. 

please advise as how to setup the download bit. 

[sbank]

I have read the overall replies very attentively. the overall ideas are very helpful and valuable. I had also the same question but I have got ideas from here. thanks to all.

[kastraver]

While I love a good workaround, it would be great to get Hubspot's attention on this. With the pop-up form, it's so easy to simply have a download link on the thank you page. Why isn't this also possible with a normal form? Not even when using the "template" for eBook/file download. Seems like a development oversight.

[JJace]

The lone change is in the install code, so you could utilize a similar structure, changing just the url for each record  in the implant code. Could be valuable to make a shrouded field to particular which digital book was downloaded.

[elanashama]

Hi @mayormario ,

I tried this on my page with an image file but the image isn't downloading after I submit the form.

Here's my code:

<script charset="utf-8" type="text/javascript" src="https://js.hsforms.net/forms/v2.js"></script>
<script>
var data = [];
hbspt.forms.create({
portalId: "464503",
formId: "6d6c2302-d30b-482f-bcd5-18d4b14b44e0",
onFormSubmit: function($form) {
var a = document.createElement("a");
a.href = "https://f.hubspotusercontent00.net/hubfs/464503/RN-MEMBER-Benefit_Badges-011821_V1.png";
a.download = "RN-MEMBER-Benefit_Badges-011821_V1.png";
a.target = "_blank",
a.click();
}
});
</script>

What am I doing wrong?

[mayormario]

Hi:

There's an error in my code. This line:

a.target = "_blank",

must be:

a.target = "_blank";

[elzubeir]

,

[TheGilldog · Accepted solution]

Hi Jeff,

I think i have found a solution to your problem -

Follow the below steps -

• In your HubSpot Marketing account, navigate to Content > File Manager.
• Locate the file you uploaded to the File Manager or upload a new one.
• Click on the name of your file to open the right-side pane > click Copy URL

Next, set the redirect URL on the landing page:

• In your HubSpot Marketing account, navigate to Content > Landing Pages.
• Locate and hover over your landing page until you see the Actions buttons > click Edit.

• Locate your form and click on the form itself to edit the module.
• From the form options window, select Redirect to another page under What should a visitor see after submitting your form?
• Click Redirect to external URL > Paste in the URL you copied from the File Manager > click OK and you'll see your URL now in the text box.

• Click Save and go to module list.
• Update or Publish the page.

Hope this Helps!

Ciaran

[PKendre]

Hi,

I am creating a download form for different documents. The form will need the same fields. I need to know if a form needs to be created for each document? or is there an easy way to do it? 

[CMaxwell]

Thank you!
Related question, how can get my file (PDF ebook) hosted on https://cdn2.hubspot.net it is showing up on (https://fs.hubspotusercontent00.net) and I found that https://cdn2.hubspot.net has a far better domain health rating?


Thank you,
Craig

[kelvinsoen]

Hi,

In your solution there might be cases where user puts in random email but he will be re-directed to the file page anyway.

I would like the user to put in correct email then only we will send the file to their mail.

I tried to create new form and use follow up tab (this should be the email sent after user clicks download?). 

But somehow I don't get any email (the email on follow up tab not sent).

[mayormario]

Hi:

Maybe you should create a Workflow to manage this. This workflow will send
the email with the download link to the user.

[emanur]

In this solution, the visitor can't be redirected to a thank you page or anywhere else after the asset has been downloaded. Is that correct? If so, how do I achieve that?

[mayormario]

This is a Javascript solution. In the form settings, redirect to a thank you page or show a Thank you message, then in the embed code insert the code marked in red. Remember to add a colon after formId: "xxx-xxx-xxx".

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: "xxxxx",
formId: "xxx-xxx-xxx",
onFormSubmit: function($form) {
var a = document.createElement("a");
a.href = "http://example.com/file.pdf";
a.download = "file.pdf";
a.target = "_blank",
a.click();
}
});
</script>

[CSilva2]

Hello,

I'm trying to use this solution so that when the user fills in the fields on my form and clicks on submit, they download an eBook, but at the moment with this code it just opens the file in a new tab and doesn't download it.
However, after some research, I managed to use the following code: 

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
  portalId: "xxxxx",
  formId: "xxx-xxx-xxx",
  onFormSubmit: function($form) {
    downloadFile("http://example.com/file.pdf", "file.pdf");
  }
});

function downloadFile(url, fileName) {
  fetch(url, { method: 'get', mode: 'no-cors', referrerPolicy: 'no-referrer' })
    .then(res => res.blob())
    .then(res => {
      const aElement = document.createElement('a');
      aElement.setAttribute('download', fileName);
      const href = URL.createObjectURL(res);
      aElement.href = href;
      aElement.setAttribute('target', '_blank');
      aElement.click();
      URL.revokeObjectURL(href);
    });
}
</script>

I leave it here in the hope that it can also help someone with the same problem.
Thanks!

[mayormario]

Hi:

Even if the "download" attribute has been set in the code, depends on the specific browser how to handle this request. Nowadays most of the browsers can open pdf files. Users can configure in their browsers if the pdf files should be downloaded or opened.

[guidoperaltas]

So, i would need to create one form for each e-book, right?

[mayormario]

The only change is in the embed code, so you could use the same form, changing only the url for each file in the embed code. Could be useful to create a hidden field to distinct which ebook was downloaded.

[guidoperaltas]

great! it worked!