How to perform additional events on WordPress contact form 7 submissions. Let’s use DOM events.

Do you need to perform additional events on Contact form 7? You can easily perform additional actions after successful email sent, email failed, invalid inputs, etc. So, learn about Contact Form 7 events using DOM elements.

There are following Dom Elements by Contact Form 7:
wpcf7invalid – If input fields are invalid.
wpcf7spam – If spam activity detects.
wpcf7mailsent – If email sent successfully.
wpcf7mailfailed – If an email sent failed.
wpcf7submit – IF form submitted successfully.

Properties to get values during form submission:
detail.contactFormId – Form ID
detail.pluginVersion – Plugin Version
detail.contactFormLocale – Form Locale Code
detail.unitTag – Form Unit Tag
detail.containerPostId – Form Containing Post ID

Let’s check the Contact Form 7 email sent successfully. I added a hook in functions.php
Note: I created a template with name – cf7-dom-events-handler

add_action('wp_head','cf7_pdf_email_sent');
function cf7_pdf_email_sent(){
    $current_user = wp_get_current_user();
    ?><script>
        document.addEventListener( 'wpcf7mailsent', function( event ) {
            if ( '19' == event.detail.contactFormId ) {
                var user_id = '<?php echo $current_user->ID; ?>';
                var pdf_email = '<?php echo $current_user->user_email; ?>';
                jQuery.ajax({
                    type : "post",
                    url : 'https://javagoal.com/cf7-dom-events-handler/',
                    data : {action: "pdfsent", user_id : user_id, pdf_email : pdf_email},
                    success: function(response) {
                        setTimeout(function() {
                            location.reload();
                        }, 5000);
                    }
                });
            }
        }, false );
    </script><?php
}

I added the following code in the template – cf7-dom-events-handler. In this coding, I am saving PDF counter value that how many times a user uploaded PDF files via contact form 7.

if($_POST['action'] == 'pdfsent'){
    $count = get_user_meta($_POST['user_id'],'pdf_counter',true);
    $count = $count+1;
    update_user_meta($_POST['user_id'],'pdf_counter',$count);
    $to = $_POST['pdf_email'];
    $subject = "We recieved your PDF file";
    $message = "You will receive an email on your registered email address (".$_POST['pdf_email'].") within 24 hours.";
    $header = "From:javagoalweb@gmail.com \r\n";
    $header .= "MIME-Version: 1.0\r\n";
    $header .= "Content-type: text/html\r\n";
    $retval = mail ($to,$subject,$message,$header);
}

Let’s check if PDF size is increased and email is failed. I used a jQuery trick to achieve this. I added a hook in functions.php
Note: I created a template with name – cf7-dom-events-handler

add_action('wp_head','cf7_pdf_email_failed');
function cf7_pdf_email_failed(){ 
$current_user = wp_get_current_user(); ?>
    <script>
        document.addEventListener( 'wpcf7invalid', function( event ) {
            if ( '19' == event.detail.contactFormId ) {
                var pdf_err = jQuery(".pdf_file .wpcf7-not-valid-tip").html();
                var pdf_email = '<?php echo $current_user->user_email; ?>';
                if(pdf_err == "The file is too big."){
                    jQuery.ajax({
                        type : "post",
                        url : 'https://javagoal.com/dev/cf7-dom-events-handler/',
                        data : {action: "pdf_err", pdf_email : pdf_email},
                        success: function(response) {
                        }
                    });
                }
            }
        }, false );
    </script><?php
}

I added the following code in the template – cf7-dom-events-handler. In this coding, I am checking if the email failed due to a large PDF file size. And I get the value from span error.

if($_POST['action'] == 'pdf_err'){
    $to = $_POST['pdf_email'];
    $subject = "PDF size limit Exceeded";
    $message = "Hi, 25MB size of PDf allowed only. Please upload PDF file less than 25 MB size.";
    $header = "From:javagoalweb@gmail.com \r\n";
    $header .= "MIME-Version: 1.0\r\n";
    $header .= "Content-type: text/html\r\n";
    $retval = mail ($to,$subject,$message,$header);
}

Now understand the coding:

If we apply this line-
if ( ’19’ == event.detail.contactFormId ) {
It means we are checking only ID number 19 form

If we check this-
var pdf_err = jQuery(“.pdf_file .wpcf7-not-valid-tip”).html();
It means during the invalid PDF size of error, i get the value via jQuery and perform the action on the basis of this.