Как закрыть модальное окно после успешной отправки cf7?
Модальное окно сделано на 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'); |
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');
Дополнительно:
Выполните отладку 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'); |
<?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');
if ('ac0b387' == event.detail.contactFormId) {
Попробуйте вместо хэша использовать ID формы. Его видно в адресной строке при редактировании формы.
что эта функция делает? Ответ. Она ничего не делает, т.к. ничего не возвращает. Это пустая функция. Так функция не пишется. Напишите так.
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'); |
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> |
<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'); |
add_action('wp_footer', 'custom_cf7_script'); add_shortcode('cf7close', 'custom_cf7_script');
Тем самым вы создали шорткод для закрытия мод. окна. Откройте админку, потом в боковом меню "Contact Form 7 " - "Контактные формы", найдите вашу форму, нажмите на название, и в редакторе самой формы вставьте в самый низ [cf7close], после [submit "Отправить"] Т.е. это будет выглядеть так
[submit "Отправить"] [cf7close] |
[submit "Отправить"] [cf7close]
Тогда по идее после нажатия на а мод. окно должно закрыться.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для Contact Form 7 событие
wpcf7mailsent— правильное. Если модальное окно не закрывается, значит либо событие не срабатывает, либо ID формы сравнивается неправильно, либо метод закрытия вызывается не для той библиотеки модального окна.В новых версиях CF7
event.detail.contactFormIdобычно число, а не строка с префиксом. Поэтому сравнивайте с реальным ID формы из админки, например123, а неac0b387, если это не ID формы.document.addEventListener('wpcf7mailsent', function (event) { console.log('CF7 sent', event.detail.contactFormId); if (Number(event.detail.contactFormId) !== 123) { return; } setTimeout(function () { jQuery.modal.close(); }, 5000); });document.addEventListener('wpcf7mailsent', function (event) { console.log('CF7 sent', event.detail.contactFormId); if (Number(event.detail.contactFormId) !== 123) { return; } setTimeout(function () { jQuery.modal.close(); }, 5000); });
Если используете jQuery Modal, метод
jQuery.modal.close()должен работать, но только если библиотека уже загружена и текущее окно открыто именно через неё. Проверьте в консоли:typeof jQuery.modal jQuery.modal.close()
Если модалка открывается по ссылке
rel="modal:open", можно закрыть и через клик по элементу закрытия:jQuery('[rel="modal:close"]').trigger('click');jQuery('[rel="modal:close"]').trigger('click');
PHP-вставку лучше не писать прямо в
wp_footer, а подключить отдельный JS-файл или хотя бы убедиться, что скрипт выводится после CF7 и jQuery Modal. Для отладки сначала оставьте console.log до всех условий. Если log не появляется, событие не ловится. Если появляется, но окно не закрывается — проблема в методе закрытия.И не забудьте про UX: 5 секунд после успешной отправки — долго. Обычно достаточно 1.5-2 секунды, чтобы пользователь увидел сообщение об успехе, а потом модалка закрылась.