How do I create a PDF download that redirects to a Thank You page for Facebook pixel targeting?

Hello! I’m trying to solve a problem and I’m wondering if any of you have encountered something similar.

Here’s what I’m trying to do with a lead gen campaign:

  1. Create a download link for a PDF. (Fairly easy in Webflow)
  2. After the user clicks to download the PDF, redirect them to a Thank You page where we can drop a Facebook pixel for retargeting people who have completed the download.

It’s pretty easy to do each of those, but I’m having a devil of a time figuring out how to do both at once. If there was a way to use a form submission to trigger a download AND a redirect we’d be in business. The difficulty is that the redirect destination can’t simply be something like dropbox because I need the ability to place the Facebook pixel to enable the retargeting.

Any ideas?

Hello @ryanjames

I’m thinking about some solutions, but maybe there is a better approach.

Create a form > user fills out the form > the form redirects to a download page from where the user can download the pdf. The problem here is that the link to the page can be copied and there’s no actual authorization where only people who submitted the form can see the page with the pdf link.

Other thing you can do is to create a page with a form and show the pdf link in the success state of the form. The page will contain the pixel code. For example, you can have a link from the home page that says DOWNLOAD OUR FREE GUIDE and the link takes the user to a page with a form. The problem here is that some people can skip the download, but the pixel will be triggered…

Piter :webflow_heart:

Thanks for the suggestion, Piter! I’m hoping to avoid making it a two-step process for the UX side of things but I’ll definitely keep that approach as a backup in case I can’t figure out a simpler solution. Gracias!

1 Like

I totally understand what you mean…If I find something I will send it to you.

Piter :webflow_heart:

I don’t think it’s currently possible with Webflow as I looked into it a while back, although happy to be proven wrong.

If that’s still the case, the above would be your best bet.

I didn’t need to track downloads (other than via the amount of form emails) so I had my forms confirmation include a button which then linked to the download in the browser.

1 Like
  1. Make link open PDF in a new window/tab

  2. Add custom custom code to redirect the page when the link is clicked

maybe this helps you out brother!

From sam_g on another post

"A place to store files would be a pretty cool feature.

As for downloadable files, I use Dropbox and at the end of the URL instead of the “=0” I put “=1” so it automatically downloads and the end user doesn’t see the dropbox page."

actually you can see the Dropbox page this way, is there a way to download a file without being redirected to the page?

Hello,

Does anyone have found a solution for this? I’m looking to do the same.

Hi @ryanjames , @David_SG .

Perhaps this will help you.
This code essentially tears off the PDF in a new tab. After submitting the form.

  1. Upload the PDF file to your Webflow project and note down its URL.
  2. In your Webflow project, go to the page where the form is located.
  3. In the JavaScript code editor, enter the following code:
var form = document.getElementById("your-form-id"); // Replace "your-form-id" with the ID of your form element
form.addEventListener("submit", function(event) {
  event.preventDefault(); // Prevent form submission
  
  // Open the PDF file in a new tab
  var pdfUrl = "https://www.example.com/path/to/your/file.pdf"; // Replace with the actual URL of your PDF file
  window.open(pdfUrl, "_blank");
  
  // Submit the form
  form.submit();
});

Make sure to replace "your-form-id" with the actual ID of your form element and "https://www.example.com/path/to/your/file.pdf" with the URL of your PDF file.

Save the changes to your Webflow project and publish it.

Now, when a user submits the form, the JavaScript code will intercept the form submission, open the PDF file in a new tab, and then submit the form as usual.