Where exactly DOM Events code should be placed ??

See https://contactform7.com/2017/06/07/on-sent-ok-is-deprecated/

There is an example of placing the code in the theme’s functions.php file.

hi but if I have 2 forms with different ids?

would the syntax be:-

add_action( ‘wp_footer’, ‘mycustom_wp_footer’ );

function mycustom_wp_footer() {
?>
<script type=”text/javascript”>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
if ( ‘123’ == event.detail.contactFormId ) {
ga( ‘send’, ‘event’, ‘Contact Form’, ‘submit’ );
}
}, false );
</script>
<?php

<script type=”text/javascript”>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
if ( ‘456’ == event.detail.contactFormId ) {
ga( ‘send’, ‘event’, ‘Quote Form’, ‘submit’ );
}
}, false );
</script>
<?php
}

Hi Takayuki Miyoshi ,

Thank you so much for your reply , I tried adding below mentioned code in functions.php in themes ,ID mentioned here I gave as id attriute for submit button , mail is being sent .

But ajax loader is spinning without stopping.

<script src=”https://checkout.razorpay.com/v1/checkout.js”></script&gt;
<script type=”text/javascript”>
document.addEventListener( ‘wpcf7submit’, function( event ) {
if ( ‘265’ == event.detail.contactFormId ) {
alert( “The contact form ID is 265.” );
// do something productive
var options = {
“key”: “key”,
“amount”: “2000”, // 2000 paise = INR 20
“name”: “Cskx”,
“description”: “he”,
“image”: “”,
“handler”: function (response){
alert(response.razorpay_payment_id);
},
“prefill”: {
“name”: “Your Full Name”,
“email”: “Your Email ID”
“contact”: “1xxxxxxxxx”
},
“notes”: {
“Business Name”: ” ”
“Fleet Size”: ” ”
},
“theme”: {
“color”: “#F37254”
}
};
var rzp1 = new Razorpay(options);

document.getElementById(‘rzp-button1’).onclick = function(e){
rzp1.open();
e.preventDefault();
}
}
}, false );

</script>