How to use DOM events?

See DOM Events.

Additional settings on_sent_ok and on_submit are deprecated.

Hi Takayuki,

Thanks for your answer. So the only way to use the DOM events is including this code in the header, right? Which would be the best way to implement this then? Different headers files for each of my form pages?

I’m not sure. What do you want to do with the events?

I want to track the events but I have more than one form so I would need to have different event names in order to track them in Analytics

How many forms do you have?

It depends on the website, some of them have two, others four, seven… it depends

The best way is specifying a narrower event target. You can find an example using querySelector() in the doc.

https://contactform7.com/dom-events/

I need to call a post request URL after the click of submit button. Where should i add my code of DOM events? In the ‘Form’ or ‘Additional Settings’ section of the plugin settings?

I have the following code in the Form section of Contact Form 7 settings page:

<div class="wpcf7">
<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* your-email] </label>

[submit "Send"]
</div>

I have added my DOM events code in Theme Header (header.php) within header tag

<script>
var wpcf7Elm = document.querySelector(".wpcf7");
var randomstring = Math.random().toString(36).slice(-8);
console.log(randomstring, wpcf7Elm);
wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
    alert( "Fire!" );
}, false );
</script>

But when load the page, i am getting the following error
6nha1yvi null
Uncaught TypeError: Cannot read property 'addEventListener' of null

How can it be resolved?

Which browser do you use?

Chrome. And worked when i placed my script in the footer.php

Sorry to hijack this post but I am very new to javascript and I want to implement a ReaEDM action tag on form submit event. Below are the instructions, while searching I found about DOM events but I am not sure if I am doing it right. This is the code I am putting in (tried on header and footer files but I can’t even get the alert msg when I tried that message)
<script>
var wpcf7Elm = document.querySelector( ‘.wpcf7’ );

wpcf7Elm.addEventListener( ‘wpcf7submit’, function( event ) {
(new image()).src = “https://edm.realestate.com.au/pub/cct?_ri_=X0Gzc2X
%3DYQpglLjHJlTQGuAMSzgAJ8Fh6aKKdSS8Pckza&_ei_=EmUGtAt-
3ZIY1exPpN9qDJU&CUSTOMERID=$CUSTOMER_ID_$”;

}, false );
</script>

https://www.google.com.au/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0ahUKEwiun4WW9eTSAhULXrwKHSvfA-YQFggZMAA&url=https%3A%2F%2Fmedia.realestate.com.au%2Fsites%2Fdefault%2Ffiles%2Fdownload_file%2Frea_edm_action_tag_implementation_guide.pdf&usg=AFQjCNGgsuP2zg9gSn5ThaCxiUz13Wn1DQ&sig2=AmpXVwuySi0QOoSYG4gj9w&cad=rja

Thanks,
Nidhi

• This reply was modified 7 years, 8 months ago by nidhinawabgupta.