Как правильно прописать функцию для вызова popup после клика на кнопку Submit в Contact Form 7?

Question

[Ирина Швайко]

Задача: Прикрепить модальное окно из плагина Easy Modal к кнопке Submit в Contact Form 7
Функцию прописала в файл functions.js

function showMessInCf7(){
span class="eModal-1";
}

В дополнительных настройках формы добавила
on_sent_ok: $.(showMessInCf7();
Как сделать чтобы работало?

Comments

[aarty20]

а что собственно ваша функция делает ? и на каком языке она написана ?

[Ирина Швайко]

aarty20: Функция вызывает модальное окно при нажатии Submit в контактной форме

[aarty20]

Ирина Швайко: я конкретно про тело функции "span class="eModal-1";"

[Ирина Швайко]

Поставила связку плагинов Contact Form 7 + Easy Modal (можно посмотреть здесь omiclinic.ru.xsph.ru/)
При нажатии "Отправить" должна вызываться всплывающая форма
Open Modal (это если ссылкой оформляешь)

С Сайта https://help-wp.ru/contact-form-7-dopolnitelnye-na... получила ответ:

Подскажите, как организовать всплытие окна при on_sent_ok:
Вариант 1: on_submit: "setTimeout(function(){span class="eModal-3"
Вариант 2: on_submit: "setTimeout(function(){window.location.href = "eModal-3"
Ответ: Добрый день. Думаю есть смысл попробовать написать функцию, вот все что вы писали только в отдельную функцию, и подключить раньше вызова cf7.
Например, вот такая функция:
function showMessInCf7(){
alert("Благодарим");
}
а в самой форме подключать вызов:
on_sent_ok: "showMessInCf7();"

Вот и мой вопрос: Как правильно прописать функцию для вызова popup после клика на кнопку Submit в Contact Form 7?

Answer 1

[Ирина Швайко]

для вызова popup после клика на кнопку Submit в Contact Form 7

решила задачу связкой двух плагинов Contact Form 7 + Easy FancyBox
1. Естественно, установить и активировать плагины.
2. Создать форму.
3. Этот код добавляем в блок Дополнительные настройки вашей формы CF7:

on_sent_ok: "$.fancybox ( { href: '#popup_msg' } );"

4. Само окно имеет такой вид:

<div class="fancybox-hidden" style="display: none;">
  <div id="popup_msg">
    <div class="popup-box">
      <div class="popup-title">Спасибо!</div>  
      <div class="popup-subtitle">Наш менеджер свяжется с вами в ближайшее время.</div>
      <span class="popup-close-btn">Закрыть окно</span> 
    </div> 
  </div>
</div>

Этот код всплывающего окна можно разместить где угодно, хоть в футере, хоть в хедере, хоть под формой, основной плюс в том, что это окно могут вызывать любые другие формы и не нужно делать под каждую форму своё.
5. И для кнопки «Закрыть окно» добавляем такой код в файл скриптов:

$('.popup-close-btn').on('click', function() {
  $.fancybox.close();
});

Comments

[Vitalii Bryl]

Ваш способ устарел для CF7.
Подскажите как вызвать и вывести модельное окно после успешно отправленной формы.