Показать div после отправки контактной формы 7 формы

Question

Я хочу отобразить div, содержащий некоторые детали после успешной отправки формы. Я использую плагин контактной формы 7. Пожалуйста, помогите мне сделать это.

Answer 1

Привет, вы можете использовать контактную форму 7 DOM Events, смотрите эту ссылку https://contactform7.com/dom-events/

ниже приведен пример оповещения о вызове после отправки формы

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

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

и Вы также можете добавить или поместить div после отправки, как показано в приведенном ниже коде, в приведенном ниже коде вы должны заменить # yourDivId на желаемый идентификатор div.

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 );

, также вы можете проверить это также,

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

Надеюсь, это поможет вам.

Спасибо

Answer 2

Я нахожу решение ......

`<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>`

Здесь 33 - мой идентификатор формы, а exp - класс моего div