Question

0

150

Views

Is there any way to trigger a DOM event for multiple forms at the same page?

I recently coded an alert action for my forms in a WordPress site. It's working, but unfortunately only for the first form. If there is more than one form in the page, it's not getting triggered.

Is there any way to get it working for all forms of the page?

My code:

add_action( 'wp_footer', 'mycustom_wp_footer' );

function mycustom_wp_footer() {
    ?>
    <script type="text/javascript">
        var wpcf7Elm = document.querySelector( '.wpcf7' );
        wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
            //if ('563' == event.detail.contactFormId) {
                var idform = event.detail.contactFormId;
                alert (idform);
            //}
        }, true );
    </script>
    <?php
}

Form snippets:

[contact-form-7 id="556" title="test 1"]

[contact-form-7 id="563" title="test 2"]

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-12T04:23:39.262Z

CF7 events bubble up through the document, so you can do something like this,

let page = document.querySelector('body');
page.addEventListener('wpcf7submit', function(e){
  let idform = e.detail.contactFormId;
  alert (idform);
});

Answer 2 · 2022-07-12T04:23:39.268Z

This is the final code (credit to Chris G):

add_action( 'wp_footer', 'mycustom_wp_footer' );

function mycustom_wp_footer() {
    ?>
    <script type="text/javascript">
        var wpcf7Elm = document.querySelectorAll( '.wpcf7' );
        wpcf7Elm.forEach(function(formr){
        formr.addEventListener( 'wpcf7submit', function( event ) {
                var idform = event.detail.unitTag;
                alert (idform);
        }, false ); })
    </script>
    <?php
}

0

150

Is there any way to trigger a DOM event for multiple forms at the same page?

2 answers

0

0

Find remote jobs

Andres GPT