How to set the click event after sent the Contact Form 7 Mail

  • July 10, 2022
  • 0
Hire Vivek Asodariya

Many inquiries can come in the website with the help of a contact form.

When any user wants to ask a question, he can ask with the help of a contact form.

When the user submits the form, the admin receives the email from the website, and then the admin replies to the user.

Website admin often want to perform many actions on the submission of the contact form.

The admin can add the following code when the admin wants to set up a lot of events on the website after the admin form is submitted and the email is received.

Add below code in your (child) theme’s functions.php. If you don’t have a child theme then you can create the custom plugin and then you can add the below code on that plugin.

add_action( 'wp_footer', 'vivek_patel_event_code' );
function vivek_patel_event_code() {
    ?>
    <script type="text/javascript">
       document.addEventListener( 'wpcf7mailsent', function( event ) {
		  if ( '16' == event.detail.contactFormId ) {
			//Here you can set any javascript events. Like google analytics, facebook pixel
		  }
		}, false );
    </script>
    <?php
}

What is the use of wp_footer action?

When you need to add any script or css in the footer that time you can use wp_footer action.

event.detail.contactFormId  is providing a form id so i can match the form id condition and any code in that.

If  You need to set the event in any one form then you need to replace this form ID(16) with your Form ID.

If you want to set events in all the contact forms then you need to remove that condition.

After setting all the conditions, you must need to clear all the cache. If you will not clear the cache then the changes will not apply.

For testing the code, you must need to test it on a private browser. If you have any issue on the above code then you drop a comment.

Leave a Reply

Your email address will not be published. Required fields are marked *