Contact form 7 сообщение об успешной отправке в модальном окне

Обновлено: 18.05.2024

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

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

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

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

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

Достаточно плотно работая с легендарными плагинами Contact Form 7 и Popups у меня возник вполне очевидный вопрос “-Как сделать оповещение в виде попап окна после отправке формы?”.

Методом проб и ошибок все таки удалось отобразить попап окна которые сами открываются (и закрываются тоже самостоятельно — конечно же благодаря jQuery) после того как пользователь нажал на кнопку отправки формы.

Если пользователь верно заполнил все данные и форма была отправлена успешно, будет отображен данный попап, который исчезнет через пять с половиной секунд:

Если пользователь ввел не верно данные, или форма и вовсе не была заполнена, пользователь увидит данное окно, которое тоже закроется через 5.5 секунд:

Интервал для закрытия Вы можете указать самостоятельно, непосредственно в самом jQuery скрипте (который находится ниже).

На скринах с попап окнами отображен текст на украинском языке, не пугайтесь тект в экспорте Popups на руссском.

Если Вам этого будет мало и Вы захотите поэкспериментировать выкладываю попутно и PSD который придет Вам на помощь:

Так же после импорта, пропишите данные стили ниже (так как WordPress не включает CSS Popups в файл экспорта).

" target="_blank" >CMS… Но нет… до сих пор приходится ставить несколько плагинов чтобы заиметь данный функционал на своем сайте. Итак, начнем!

Нужный нам плагин Easy FancyBox.

Заходим в Настройки -> Медиафайлы.

Сверху видим блок стандартных настроек медиафайлов, а ниже настройки плагина Easy FancyBox. По умолчанию активен попап при нажатии на изображение.

Если стоит сторонний плагин лайтбокса, лучше эту галку снять, так как они будут конфликтовать и ваши изображения будут открываться во всплывающем окне дважды

Код с всплывающей контактной формой, установленный в коде файла шаблона (например в footer.php):

Если Вы вставляете код вызова формы сразу в Визуальном редакторе для редактирования текста в режиме ТЕКСТ, тогда код будет выглядеть так:

Код с всплывающей контактной формой, установленный в визуальном редакторе записи (в режиме Текст) в админке Подробнее.

Код кнопки, открывающей попап:

Возникла странная проблема с относительными ссылками в хэдере. К ссылке на активацию формы упорно приписывался адрес главной страницы…

Победил это добавив пробел перед решеткой.

Для придания форме нужного фида необходимо обернуть поля в дивы, указать им классы. Это лучше делать непосредственно в редакторе форм CF7. Стили можно прописать в custom.css

Закрытие popup окна с формой обратной связи после успешной отправки

Добавляем такой код

в блок Дополнительные настройки вашей формы. У меня еще стоит отправка цели Яндекс.Метрики.

В статье разберём как вставить contact form 7 во всплывающее окно. Скажу сразу принцип построен на связке с плагином Popup maker, который идеально совместим и не изменяет внешнего вида первого. Начнём с пошагового разбора с детальными инструкциями.

Создание новой формы contact form 7

Для начала создадим первый проект в contact form 7, с тремя полями имя, телефон и почта. Стандартный набор подходящий для сбора контактных данных в обратной связи. Сделали проект, теперь надо скопировать либо записать шорт код. С ним будем работать детальнее.

Как сделать интеграцию в PopupMaker

Устанавливаем PopupMaker, стандартно через административную панель поиском, либо скачиваем отсюда . После установки появиться в меню wordpress новый пункт, заходим и вводим новое модальное окно.

1. Путь к добавлению нового всплывающего окна
2. Название, оно не будет отображаться на сайте
3. Заголовок попапа, если не нужно, то не пишем
4. Шорт код из contact form 7

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

1. Раздел Триггеры
2. Нажимаем кнопку Добавить
3. Выбираем один из двух триггеров, по нажатию какого либо элемента (открыть) или авто открытие, то есть по истечению какого либо времени.
4. Добавляем

Выбрав “открыть”, появятся следующие опции. Задаём уникальный класс, я сделал .otkryt-modelnoe, с ним работаем дальше.

В contact form 7 существует поддержка cookie, поэтому можно добавить различные настройки где отображать или скрывать. Будет полезным поиграться с автооткрытием, но это тема других статей.

Теперь добавим класс к любому элементу в статье, например к ссылке на главной странице. Создадим новую запись, в ней вставим ссылку с прикреплением класса. Как видим на картинке, сначала во вкладке “визуально” создали ссылку, после перешли в текст и туда записали комбинацию.

Обновили или сохранили запись, обязательно проверяем работу на странице блога. Нажимая на “текст ссылки” отображается всплывающий элемент, а в нём наша форма созданная в contact form 7, оформление fancybox выставил.

Для данной операции подойдут плагины FancyBox и Easy Modal, но с ними операция боле сложная, приходиться писать код.

Всплывающее окно после заполнения и отправки

1. Раздел General Settings
2. Основными настройки, выставляете галочками к каким проектам добавить постоповещение, настраиваем размеры окна (длину, ширину), а так же автоматическое закрытие, в нашем случае 5000 миллисекунд
3. Сохраняем.

В Popup Text пишем содержимое, существует возможность применения стандартного редактора wordpress. В Popup Design делаем внешний вид, цвет шрифта и заднего фона. После сохранения проверяем работу.

Инструмент минимален, для более глубокой разработки и настройки внешнего вида понадобятся небольшие знания css. Отмечу наличие способов без применения плагинов при помощи скриптов, применяя хуки contact form 7, но не советуем их брать, ввиду сложного применения, и не всегда корректного поведения.

Таким не хитрым методом мы смогли создать модальное всплывающее окно, а в нём работающая по всем правилам, например, обратная связь или звонок.

P.S. Для любителей смотреть прикладываю видео обзор

Нажмите, пожалуйста, на одну из кнопок, чтобы узнать понравилась статья или нет.

Читайте также:

  
• Сообщение о акустической гитаре
  
• Сообщение о первом двигателе внутреннего сгорания
  
• Отдых на природе зимой опасности которые нас подстерегают сообщение
  
• Сообщение про медузу парусник
  
• Сообщение виды транспорта тюменской области