Download document after form submission in contact form 7

Hello Readers!

In some website have download section E-catalog or Brochures. But they want contact information who wants to download data. So, they can contact them.

So, it is possible in WordPress + Contact Form 7. Just have to add small parts of code in your JavaScript code.

Actually, in previous version of Contact Form 7 had this functionality but it is right now deprecated. So, we have to use either Contact Form 7 custom DOM events or Custom JavaScript code.

For Contact Form 7 custom DOM events, please follow this link for better tutorial.
https://contactform7.com/dom-events/

For Custom JavaScript code, please follow below code and into your theme or plugin.

jQuery(document).ajaxComplete(function() {
  if (jQuery('#wpcf7-f1148-p312-o1 form.sent').length) {
    var link = document.createElement('a');
    link.href = 'https://exmapledomain.com/test.pdf';
    link.download = 'Test.pdf';
    link.dispatchEvent(new MouseEvent('click'));
  }
});

In above JavaScript code,

I’ve mentioned Contact form 7 ID ( #wpcf7-f1148-p312-o1) and also mentioned class name “sent”.
After form submitted, the class name should be either “invalid” or “sent”. So, I’ve checked the “sent” class name.
That’s means that our form is submitted successfully and now download popup appear to download document file.

Thank you for reading this blog and if you have any query or questions, please comment it below.