Send an Email and Download a PDF on click of Contact Form 7 Submit button

Question

I have a contact form in my Wordpress website. In that I have three fields Name, Email and Mobile, and a button called Submit. When the user fills all the fields and click on Submit button an email should send which can possible with Contact From 7 plugin.

But challenge here is I need to make the user download a PDF also, when he clicks on Submit button upon filling all the fields.'

How can I achieve this in Wordpress?

Answer 1

You can use the wpcf7_mail_sent hook provided by Contact form 7 like this:

add_action('wpcf7_mail_sent', function ($cf) {
  // Run code after the email has been sent
});

This link: https://contactform7.com/2017/06/07/on-sent-ok-is-deprecated/ also describes another way:

add_action( 'wp_footer', 'mycustom_wp_footer' );

function mycustom_wp_footer() 
{ ?>
    <script type="text/javascript">
    document.addEventListener( 'wpcf7mailsent', function( event ) 
    {
      //Write a javascript code to download the file. 
    }  , false );
    </script>
<?php
}

Answer 2

Since the on_sent_ok has been deprecated, here is an example you could use as inspiration.

I had the similar need to add a download CTA after the content of all case studies of a website, but "in exchange" of user's data for:

• display a CF7 form on your page, I had the same one on all case studies post type single which I hooked after the content
• find a way to get the wanted PDF url for people to download, as for me all case studies have a different PDF, I simply added an ACF field, filtered on PDF only, which returns the file url
• based on CF7 Dom events, choose the action you prefer to make the dowload happens, as I am not sending any confirmation email, I prefer working on the wpcf7submit event. Note that wpcf7submit event is fired only if the form has been validated

So the code looks like this:

<?php 
// For simplicity, using an anonymous functions
add_action( 'wp_print_footer_scripts', function () {
    // Check the wanted singular post type loading
    if ( is_admin() || ! is_singular( 'case-study' ) ) {
        return;
    }

    // Check if the ACF PDF field is not empty for use
    $pdf_link = get_field( 'pdf' );
    if ( empty( $pdf_link ) ) {
        return;
    }

    // Hook on the "wpcf7submit" CF7 Dom event to force the download
    printf( "<script>document.addEventListener( 'wpcf7submit', function( event ) { window.open('%s'); }, false );</script>", $pdf_link );
} );