Как закрыть модальное окно после успешной отправки cf7?

Question

[rootnoroot]

Модальное окно сделано на jquery modal
закрывается вот такой ссылкой
<a href="#" rel="modal:close">Close</a>
никак не получается закрыть после отправки

function custom_cf7_script() {
    ?>
    <script type="text/javascript">
        document.addEventListener('wpcf7mailsent', function(event) {
            // Проверяем, что форма отправлена успешно
            if ('ac0b387' == event.detail.contactFormId) {
                // Ждем 5 секунд и закрываем модальное окно
                setTimeout(function() {
                    // Закрываем модальное окно
                    jQuery.modal.close();
                }, 5000);
            }
        }, false);
    </script>
    <?php
}

add_action('wp_footer', 'custom_cf7_script');

Comments

[Михаил Р.]

Выполните отладку log-ами (результат?):

<?php

function custom_cf7_script() {
  ?>
  <script type="text/javascript">
    document.addEventListener('wpcf7mailsent', function(event) {
      console.log('wpcf7mailsent отработал');
      // Проверяем, что форма отправлена успешно
      if ('ac0b387' == event.detail.contactFormId) {
        console.log("if ('ac0b387' == event.detail.contactFormId) отработал");
        // Ждем 5 секунд и закрываем модальное окно
        setTimeout(function() {
          console.log('setTimeout отработал');
          // Закрываем модальное окно
          jQuery.modal.close();
          console.log(jQuery.modal);
          console.log(jQuery.modal.close());
        }, 5000);
      }
    }, false);
  </script>
  <?php
}

add_action('wp_footer', 'custom_cf7_script');

Answer 1

[Юрий]

if ('ac0b387' == event.detail.contactFormId) {

Попробуйте вместо хэша использовать ID формы. Его видно в адресной строке при редактировании формы.

Answer 2

[UthvfyV]

что эта функция делает? Ответ. Она ничего не делает, т.к. ничего не возвращает. Это пустая функция. Так функция не пишется. Напишите так.

function custom_cf7_script() {
$content = "<script>document.addEventListener('wpcf7mailsent', function(event) {// Проверяем, что форма отправлена успешно 
if ('ac0b387' == event.detail.contactFormId) {// Ждем 5 секунд и закрываем модальное окно 
setTimeout(function() {// Закрываем модальное окно 
jQuery.modal.close();}, 5000);}}, false);</script>";
return $content;
}
add_action('wp_footer', 'custom_cf7_script');

Что указано в <a href="#" rel="modal:close">Close</a> чтобы закрыть мод. окно? rel="modal:close"? Вы смотрели что нужно для этого выполнения? Вероятно правильно написанная функция. Для верности попробуйте написать так.

<a onclick="custom_cf7_script();" href="#" rel="modal:close">Close</a>

, тогда по идее окно должно закрыться после нажатия на Close через 5 сек. И ещё. Эта функция должна быть прописана в файле function.php, если это не так, то пропишите её в этом файле, который находится в корневой папке ваше темы. Но я думаю что функция в function.php, если нет то исправьте это. Этот так, на всякий случай, для верности. И ещё для большей уверенности допишите в конце

add_action('wp_footer', 'custom_cf7_script');
add_shortcode('cf7close', 'custom_cf7_script');

Тем самым вы создали шорткод для закрытия мод. окна. Откройте админку, потом в боковом меню "Contact Form 7 " - "Контактные формы", найдите вашу форму, нажмите на название, и в редакторе самой формы вставьте в самый низ [cf7close], после [submit "Отправить"] Т.е. это будет выглядеть так

[submit "Отправить"] 
[cf7close]

Тогда по идее после нажатия на а мод. окно должно закрыться.