RESWEB

адаптивная кроссбраузерная вёрстка

Contact Form 7 popup message — бесплатный аналог

Покажу как сделать аналог платного плагина Contact Form 7 Popup Message стоимостью 55$. В результате будет выводится модальное окно сообщающее, что форма успешно отправлена. Дизайн окна и надпись вы можете менять на свой вкус.

Contact Form 7 — модальное окно с сообщением об успешной отправке формы.

Это решение основано на «Дополнительных настройках» плагина Contact Form 7.

Если при редактировании вашей формы во вкладке «Дополнительные настройки» вставить функцию

on_sent_ok: "alert('sent ok');"

то при успешной отправке формы отобразится алерт с указанным сообщением — sent ok.

Но к алерту мы не можем применить свои стили, поэтому вместо алерта будем отображать модальное окно оформленное в нужных нам стилях.

Последовательность действий следующая. Берем из великого множества в сети подходящий скрипт модального окна (а можно на чистом CSS, например это модальное окно на CSS).

Создаем модальное окно с нужным сообщением, например: «Спасибо! Заявка принята». Стилями оформляем на свое усмотрение: размер окна, цвет фона, шрифт и т.д. Далее выводим например в футере ссылку, активирующую открытие модального окна и проверяем работоспособность модального окна, чтобы оно всплывало при нажатии на ссылку.

Теперь эту ссылку надо скрыть т.к. на виду она ни к чему. Применяем к ссылке примерно такие стили:

.link-popup {
display:block;
position:absolute;
left:-2000px;
height:0;
width:0;
overflow:hidden;
}

Идем в настройки формы и в поле «Дополнительные настройки» вставляем такой код, изменив класс ссылки на свой:

on_sent_ok: "$( ".link-popup" ).click();"

Теперь при успешной отправке формы Contact Form 7 будет срабатывать клик по скрытой ссылке, что в свою очередь вызовет отображение модального окна с нашим сообщением.

Если ваша форма выводится в модальном окне, то перед выводом модального окна с уведомлением, окно с формой целесообразно закрыть. Для этого смотрим какой класс присвоен кнопке закрывающей окно с формой и в «Дополнительных настройках» пишем такой код:

on_sent_ok: "$( ".close-form" ).click();$( ".link-popup" ).click();"

Т.е. первая функция закрывает модальное окно с формой, а вторая выводит модальное окно с уведомлением.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Успешно отправлено!

Я постараюсь с Вами связаться как можно скорее.