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. 

[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

[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>

[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!

[elzubeir]

,

[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";

[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.

[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.