How to trigger Elementor popup after clicking any PDF link and only show the file after form submission

In this post, I will show you how to trigger an Elementor popup after clicking any PDF link, and only show the corresponding file after the user submits a form. Also, you’ll get notified by email which will show you which specific file the user has downloaded.

Do you want to send these email notifications using a custom email? See how to change the default sender email in WordPress?

Anyways, please see the demo of the finished product at the beginning of the video.

How to trigger the popup, collect information & display the file?

Javascript (jQuery) code that I wrote in this video

var Manual
jQuery('a[href$=".pdf"]').click(function(event) {
  event.preventDefault()
  var Manual = jQuery(this).attr('href')
  elementorProFrontend.modules.popup.showPopup({ id:2907 })
  document.addEventListener('click', function(e) {
    document.getElementById('form-field-pdf').value = Manual
  })
})

jQuery(document).ready(function($) {
  jQuery(document).on('submit_success', function(e) {
    window.open(document.getElementById('form-field-pdf').value)
  })
})

Step 1: Create a hidden field in Elementor form

I think you already know how to create a popup & subscription form in Elementor. So I will not go through this step.

In your popup subscription form, create a hidden field and give it an ID name of “pdf.” You can name it anything you like but if you want to follow my exact code, go with this ID name.

Step 2: Write the code that you see above

In your WordPress admin dashboard, navigate to “Elementor – Custom Code” & write or paste the above code. I explained the code in the video. Also, you can copy & paste the exact same code that I mentioned underneath the video.

Step 3: Cautions – Ad your own popup ID

Don’t forget to replace my popup ID with yours. I am referring to my code. If you copy-pasted my code, replace the popup ID that you see in line 7.

Everyone’s popup ID will be different. After you open your popup with Elementor, you will find its ID in the URL (as you see in the screenshot below).

That’s it!

Now if a visitor clicks any of your link that is attached with a PDF file, the popup will trigger. And the appropriate file will be displayed only after the popup form is submitted successfully.