提交联系表格7表格后显示一个div

Question

I want display a div contain some details after successful submission of a form. I am using contact form 7 plugin.. Please help me to do this.

Answer 1

Hi you can use Contact Form 7 DOM Events see this link https://contactform7.com/dom-events/

below is example of calling alert after your form submission

var wpcf7Elm = document.querySelector( '.wpcf7' );

wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
    alert( "Fire!" );
}, false );

and you can also append or place a div after submission as shown in below code, in below code you have to replace #yourDivId with your desired div id.

var wpcf7Elm = document.querySelector( '.wpcf7' );

var div = '';
div += '<div class="custom_detail_div">'; 
div += ' .... your details here .....  '; 
div += '</div">'; 

wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
   jQuery('#yourDivId').html(div);
}, false );

also you can check this also,

https://wordpress.stackexchange.com/questions/282751/how-to-modify-contact-form-7-success-error-response-output

I hope this will help you.

Thanks

Answer 2

I find a solution ......

`<script type="text/javascript">
  document.addEventListener( 'wpcf7mailsent', function( event ) {
      if ( '33' == event.detail.contactFormId ) { // if you want to identify the form
          var hid = document.getElementsByClassName("exp");
    // Emulates jQuery $(element).is(':hidden');
    if(hid[0].offsetWidth > 0 && hid[0].offsetHeight > 0) {
        hid[0].style.visibility = "visible";
    }
      }
  }, true );
</script>`

Here 33 is my form id and exp is class of my div