I loop the same contact form 7 with WordPress Query.

Then I try to use detail.containerPostId DOM inside the loop and Contact Form 7 simply show value=0 within the form’s hidden field.

Link for new Contact Form 7 DOM documentation: https://contactform7.com/dom-events/

Based on the plugin answer, it was like that because the shortcode needs to be put on a single post/page. But now I didn’t find a way to trigger different modal id based on different form container id.

I need the form to get a unique container post id to trigger something using Bootstrap modal and creating different form id on Contact Form 7 is not the best way for me to achieve this.

<script type="text/javascript">
   document.addEventListener( 'wpcf7mailsent', function( event ) {
     if ( '1971' == event.detail.contactFormId && '<?php the_ID(); ?>'== event.detail.containerPostId ) {
    jQuery('#tqModal<?php the_ID(); ?>').modal('show');
    // hide library after form submit
    jQuery('#resourcesModal<?php the_ID(); ?>').modal('hide');
    }
    }, false );
</script>

The above code is for me to trigger different modal using DOM. Not an issue, just to show what actually I want to do.

The output I get when I put contact form 7 inside wp loop:

<div style="display: none;">
<input type="hidden" name="_wpcf7" value="1971" />
<input type="hidden" name="_wpcf7_version" value="5.2.1" />
<input type="hidden" name="_wpcf7_locale" value="en_US" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f1971-o3" />
<input type="hidden" name="_wpcf7_container_post" value="0" />
<input type="hidden" name="_wpcf7_posted_data_hash" value="" />
</div>

Where:

<input type="hidden" name="_wpcf7_container_post" value="0" />

Any suggestion about how I can solve this? Haunted me for few weeks already..