всплывающее окно после отправки формы contact form 7
Contact Form 7 ★ Всплывающее уведомление об успешной оправке письма
Как в плагине Contact Form 7 сделать всплывающее уведомление об успешной оправке письма? Рассмотрим два бесплатных плагина “Popup for Contact Form 7” и “Popup Message Contact Form 7”.
При успешном заполнении и отправке формы обратной связи, которая создана с помощью плагина Contact Form 7 будет отображаться всплывающее окно с произвольным сообщением. При этом обычное сообщение об отправке, которое выводится под формой уже не будет отображаться.
Смотреть видео
Ссылки
Popup for Contact Form 7
Самый простой и быстрый способ реализации данной задачи, является использование плагина Popup for Contact Form 7.
Плагин Popup for Contact Form 7 является бесплатным и устанавливается как все плагины: Админка – Плагины – Добавить новый. В поле поиска вводим название “Popup for Contact Form 7” и после отображения плагина выполняем его установку и активацию.
После активации плагина переходим в его настройки: Contact Form 7 – Popup Settings.
Настройки плагина
Настройки плагина состоят из 3 вкладок с простыми параметрами.
General Settings (Общие настройки)
В списке форм обратной связи, которые мы создали раньше (если не создали, то тогда нужно сначала создать форму) отмечаем те формы, после отправки которых будет выводиться всплывающее окно. Можно выбрать одну форму, а можно выбрать несколько или все.
Указываем размеры окна. Не забываем указывать размеры с единицами измерения (px, %).
Указываем продолжительность отображения окна. Например, 5000 – это 5 сек., после которых окно автоматически закроется.
Popup Text (Текст)
Указываем текст и изображение для нашего окна.
Popup Design (Внешний вид окна)
Указываем цвет текста, фоновый цвет или фоновое изображение для окна.
Не забываем сохранять изменения.
Примечание: Эти плагины не работают с плагином By one click WooCommerce.
Contact form 7 – Событие после успешной и не успешной отправки + экспорт Popups + jquery сценарии
Достаточно плотно работая с легендарными плагинами Contact Form 7 и Popups у меня возник вполне очевидный вопрос “-Как сделать оповещение в виде попап окна после отправке формы?”.
Методом проб и ошибок все таки удалось отобразить попап окна которые сами открываются (и закрываются тоже самостоятельно — конечно же благодаря jQuery) после того как пользователь нажал на кнопку отправки формы.
Если пользователь верно заполнил все данные и форма была отправлена успешно, будет отображен данный попап, который исчезнет через пять с половиной секунд:
Если пользователь ввел не верно данные, или форма и вовсе не была заполнена, пользователь увидит данное окно, которое тоже закроется через 5.5 секунд:
Интервал для закрытия Вы можете указать самостоятельно, непосредственно в самом jQuery скрипте (который находится ниже).
На скринах с попап окнами отображен текст на украинском языке, не пугайтесь тект в экспорте Popups на руссском.
Скачать экспорт Popups окон:
После импорта Popups не забудьте заменить путь к изображениям “http://test.jasochka.sumy.ua/wp-content/uploads/2018/01/” на свой. Изображения которые я использовал в попап окнах вот:
Если Вам этого будет мало и Вы захотите поэкспериментировать выкладываю попутно и PSD который придет Вам на помощь:
Так же после импорта, пропишите данные стили ниже (так как WordPress не включает CSS Popups в файл экспорта).
Как сделать всплывающую popup форму contact form 7 на WP
Очень длинный заголовок получился у данной статьи чего я не очень люблю, но именно по такому запросу “Как сделать всплывающую popup форму contact form 7 на wordpress”, а точнее с такой проблемой мне пришлось столкнуться при создании очередного сайта на заказ.
Казалось бы ничего сложного, но в моем случае нельзя было применять плагин “Elementor” и другие конструкторы страниц. Именно поэтому я по привычке установил плагин Contact Form 7, и только потом понял, что он работает по шорткоду в любом месте сайта, но уже в открытом виде, а мне было необходимо запускать форму обратной связи при клике на изображение.
Вообщем-то сначала я искал другие, более простые, так сказать готовые решения, устанавливал различные плагины, в том числе FancyBox, но в итоге вернулся к CF7 и нашел следующий выход.
Всплывающая форма обратной связи на wordpress за 5 минут
Для решения этой проблемы, нам необходимо использовать два плагина в связке, это “Contact Form 7” и “Popup maker”.
А теперь, разберем пошагово, как делать попапы (всплывающие окна) с встроенными формами.
Устанавливаем и настраиваем CF7
Сначала устанавливаем плагин Contact Form 7, через раздел “Плагины-Добавить новый” и активируем его, соответствующей кнопкой.
После активации в меню появится новый одноименный раздел, заходим и нажимаем “Добавить новую”, появится стандартная текстовая область с уже заполненными строками. Теперь нам необходимо создать форму обратной связи с нужными нам полями ввода: Имя, Почта, Телефон, Текстовая область или что-то еще.
Удалите все лишнее, оставляя только теги и кнопку “submit” – это кнопка для отправки данных. В верхнем меню есть несколько кнопок нас интересуют кнопки нужных нам полей например «текст», «e-mail» и «текстовая область». В первом пользователь будет вводить имя, во втором свою почту и в третьем вопрос. Разберем нагляднее, нажимаем вкладку “Текст”.
Пример создания поля “Имя”:
Нажимаем “Сохранить” и далее открываем вкладку “Письмо”.
Нажимаем внизу “Сохранить” и смотрим на шорткод, который выдает плагин для данной формы. Обязательно заполняем название формы, копируем в отдельный документ шорткод для того чтобы не искать его потом и нажимаем еще раз “Сохранить”.
Шорткод имеет, примерно, следующий вид: [contact-form-7 title=”Название формы”]
Первая часть работы выполнена. Вы можете добавлять свои поля, выбрав их в панели, только не забывайте потом прописывать полученные шорткоды с информацией во вкладке “Письмо”.
Теперь нам необходимо перейти к плагину “Popup maker”.
Устанавливаем и настраиваем Popup maker
Устанавливается стандартно из админ панели WordPress, вводим в поиске по плагинам “Popup Maker”, устанавливаем и активируем.
Теперь также в левом меню администратора, у нас должен появиться одноименный раздел, нажимаем “Добавить всплывающее окно”. Даем имя всплывающему окну, название можно не прописывать (по-желанию), так как оно будет отображаться на сайте. Помещаем в текстовое поле шорткод скопированный ранее, после создания формы обратной связи.
Далее спускаемся ниже и видим меню настройки всемогущего Popup Maker. Сейчас нас интересует пункт “Триггеры”, открываем вкладку и нажимаем на кнопку “Добавить новый триггер”.
Обычно обратная связь появляется по нажатию кнопки, или как в моем случае, по клики на изображение, поэтому из списка выбираем параметр “Нажмите “Открыть”” и жмем “Добавить”. Можете выставить при наведении или через промежуток времени, но нужно настроить куки, а то модальное окно надоест посетителю.
С куки будьте осторожны, можно настроить их так, что форма откроется для посетителя всего один раз, и если он не намерен оставлять данные прямо сейчас, то второго шанса у него не будет. Хоть затыкайся. Поэтому если нам надо, чтобы форма всегда работала при клике, не выставляйте Cookies.
Далее, ознакомьтесь с другими вкладками, настройте внешний вид, анимацию и другие параметры появления, на сайте над которым я работал, я выбрал “Центр popup”, а потом зашел в раздел “Отображение-Внешний вид” и нажал “Настроить эту тему” и настроил тему согласно технического задания.
После того, как закончите со всеми настройками, не забудь нажать “Опубликовать”.
Тег у вас должен приобрести вид
Если вы работаете в классическом редакторе, что кажется гораздо удобнее, то для вас я прилагаю более доступный скрин.
Как вы понимаете класс можно прописать к любой части текста, к ссылке, к картинке, целому абзацу и так далее.
Переходим обратно в “Визуально” и нажимаем предварительный просмотр или кнопку “Опубликовать”. Теперь при нажатии на картинку у вас должна появиться всплывающая форма.
В целом выглядит она не плохо, да стандартно, но нормально ). Вы же всегда можете можете настроить ее внешний вид.
Видео для тех, кому так удобнее воспринимать.
Стилизация внешнего вида Contact Form 7
Для этой ели я всегда использую простенький плагин, который носит название “CF7 Customizer”, скачать вы его также можете через раздел “Плагины-Добавить новый”.
После активации плагина, перейдите в раздел “Внешний вид – Настроить”, это стандартная страница настройки вашей темы(шаблона). Там вы найдете вкладку “CF7 Customizer”.
Теперь откройте страницу с вашей формой. И поиграйте с настройками. Плагин очень удобный так как имеет визуальный редактор CSS классов. Все изменения в моменте принимают нужный вид.
Если у вас настроена форма в Popup, то для того чтобы вам был доступен визуальный редактор, создайте страницу или статью, разместите туда шорткод вашей формы, которую вы всегда сможете найти в разделе “Contact Form 7 – Контактные формы”, сохраните и откройте эту страницу/статью для редактирования с помощью данного плагина!
У меня получилась вот такая всплывающая форма.
Но что делать если на сайте несколько форм обратной связи и они должны иметь свой неповторимый вид? Ну например одна форма у вас на странице, а вторая форма в сайдбаре или где-то еще… Плагин который описан выше по тексту в таком случае не подойдет.
Если необходимо придать разный внешний вид, то есть разные стили формам Contact Form 7, то я рекомендую использовать плагин “Contact Form 7 Style“, он удобен тем, что при стилизации формы, вы можете выбрать какой форме, какие стили прописать и соответственно придать индивидуальный вид каждой по отдельности.
А также, заметки ради, оставлю здесь название еще одного плагина стилизации широкого формата с визуальным редактором “Contact Form 7 Styler for Divi“.
Сontact form не отправляет письма
Помните в начале статьи я писал о том, что для “Contact form” не всегда хорошо, что он обновляется. Проблема заключается в том, что после обновления с версии 4.7 на некоторых хостингах возникают проблемы, связанные с отправкой сообщений.
После заполнения форм Contact Form 7, не важно, правильно заполнены поля, или нет, при нажатии кнопки отправить у вас постоянно крутиться значок прогресса отправки и ни чего не происходит. То есть, ни сообщение не отправляется, ни ошибки не выдаются, форма обратной связи просто висит.
Проверьте какая версия Contact Form 7 у вас сейчас установлена. Если у вас стоит версия 4.7 или более ранняя, то этой проблемы у вас быть не должно. А если у вас стоит версия 4.8 и выше, то обратите особое внимание на работу форм на вашем сайте.
Если же у вас на сайте все-таки обнаружилась проблема с отправкой писем с Contact Form 7, то для её решения вам необходимо будет сделать откат плагина до версии 4.7.
Делать мы это будем при помощи специального плагина, который называется WP Rollback.
Все стандартно, переходим в соответствующий раздел ищем плагин, устанавливаем и активируем.
После его установки и активации у вас в разделе “Плагины – Установленные”, возле названия каждого плагина появляется ссылка “Rollback“.
Найдите такую ссылку напротив плагина Contact Form 7 и нажмите на нее. Теперь в списке найдите версию 4.7, выберите ее и в самом низу нажмите на кнопку “Rollback”. Подтвердите действие.
После переустановки плагина, вам необходимо его снова активировать. И теперь проверить работоспособность отправки писем.
Аналогично вы можете сделать откат других плагинов WordPress. Единственное, все равно желательно перед любыми операциями с обновлением, восстановлением, или откатом плагина, создавать резервную копию файлов сайта и резервную копию базы данных. Но как правило я сталкивался только с проблемой на плагине CF7, с другими дополнениями подобных действий никогда не проводил.
На этом у меня все. Статья получилось длинной как и само заголовок к ней. Надеюсь что она была для вас полезной и вы нашли здесь ответы на свои вопросы. Комментарии внизу если что ) пишите.
Всплывающая форма обратной связи WordPress с помощью плагинов Contact form 7 и Popupmaker
В прошлом e-mail маркетинг был на пике популярности, люди с базами от 10000 человек зарабатывали деньги, продавая свои или чужие товары, либо просто на рекламе. Кто еще помнит SmartResponder? Он первый в рунете давал собирать с помощью форм контактные данные посетителей сайта. Тогда о таких вещах как политика конфиденциальности и не слышали, базы продавались и перекупались.
Сейчас научимся делать всплывающие формы для отправки сообщений из форм обратной связи автору сайта. В WordPress использую связку плагинов Popup maker и Contact form 7, почему:
Это дает максимум удобства, разберем пошагово, как делать попапы с встроенными формами.
Установка Contact Form 7
В Contact Form 7 создадим форму обратной связи с полями ввода Имя, Почта и Вопрос. Чтобы установить плагин вводим в поиске название, устанавливаем и активируем.
После активации в меню появится новый раздел в WordPress, заходим и нажимаем Добавить новую, появится стандартная текстовая область с уже заполненными строками.
Они не нужны, единственно оставляем теги label. Нужно три поля, приведем к виду.
Оставляем submit это кнопка для отправки. В верхнем меню есть несколько кнопок нас интересует “текст”, “e-mail” и “текстовая область”. В первом пользователь будет вводить имя, во втором свою почту и в третьем вопрос. Разберем нагляднее, нажимаем вкладку Текст.
Переместил получившийся шорткод между тегами label, должно получится так.
Тоже самое делаем с остальными полями, нажимаем и перемещаем между тегами label. Нас интересуют элементы указанные на скриншоте.
Делаем по аналогии, что получилось.
Для текстовой области задал другой класс forma-2, потому что ее надо настраивать по другим правилам и стилям. Теперь нажимаем на Сохранить.
Переходи во вкладку Письмо, навастриваем несколько параметров, смотрим на снимок.
Нажимаем внизу сохранить, и смотрим на шорткод, который выдает плагин для данной формы. Обязательно заполняем название, копируем в отдельный документ шорткод и нажимаем еще раз на Сохранить.
Первый этап преодолели, можете добавлять свои поля, их в панели много, только не забывайте потом прописывать во вкладке Письмо.
Установка Popup Maker
Устанавливается стандартно из админки WordPress, вводим в поиске по плагинам Popup Maker, устанавливаем и активируем.
Переходим в левой панели в одноименный раздел и нажимаем Добавить всплывающее окно. Заполняем имя всплывающего окна, название можно не прописывать, иначе оно появится на сайте. Помещаем в текстовое поле шорткод скопированный после создания формы обратной связи.
Спускаемся ниже и видим меню настройки всплывающего окна. Выбираем пункт Триггеры, находим кнопку Добавить новый.
Обычно обратная связь появляется по нажатию кнопки, поэтому из списка выбираем параметр Открыть и на Добавить. Можете выставить при наведении или через промежуток времени, но нужно настроить куки, а то модальное окно надоест посетителю.
Походите по другим разделам, настройте внешний вид, анимацию и другие параметры появления, в статье разбирать не будем.
Не забываем нажать на опубликовать.
В запись загрузил изображение с помощью медиафалов.
Теперь переходим во вкладку текст и прописываем в поле class стиль osnova.
Как вы понимаете класс можно прописать к любой части текста к ссылке, картинке, целому абзацу и т.д.
Переходим обратно в Визуально и нажимаем предварительный просмотр.
Открывается новая страница в браузере.
Жмем и появляется всплывающая форма обратной связи сделанная на WordPress. Заполните данные и отправьте для теста.
Попап нуждается в доработке, поиграйтесь с настройками отображения (выбрал тему оформления fancybox), добавьте стили к полям (мы прописывали forma-1 и forma-2) и получиться очень симпатичный вариант.
В Gutenberg, чтобы привязать класс нужно нажать на три точки у блока и выбрать “Редактировать как HTML”, а дальше по старой схеме.
Для более простого понимания процесса советую посмотреть авторское пошаговое видео.
Плагином Easy Fancy box в форме ссылки
В поисковой выдаче есть запросы на тему всплывающей обратной связи через плагин Easy Fancy Box в форме ссылки, поэтому обязан написать обзор. Устанавливаем дополнение поиском из панели.
Переходим в админке Настройки > Медиафайлы. Из первого пункта убираем все отметки и оставляем Inline Content. Так отменили появление popup при нажатии на картинку.
Настройки fancybox
Берем код прописанный ниже, в разделе Внешний вид > Виджеты добавляем новый типа HTML–код, вписываем в него скопированную конфигурацию обратной связи.
Вставка кода в виджет
По логике заменяем мой шорткод от Contact Form 7 на свой. Переходим на блог и проверяем работу, в примере действие происходит нажатием по ссылке.
Пример исполнения
Можно менять текст, прибавлять новые div, только не меняйте ID и CLASS – они привязаны к fancy box, добавляйте стили к тем что сейчас стоят коде. Вставляйте в статьях или напрямую в код шаблона.
Popup в Elementor по кнопке
Чтобы сделать всплывающее окно с обратной связью в Elementor не нужно больших знаний. Переходим в Popup Maker и в тригерах (ранее разбирали) добавляем через запятую id с помощью знака решетки через запятую. Не забываем обновлять тригер формы и сам проект.
Вносим ID в тригеры
Переходим в Elementor, создаем кнопку, жмем на ней левой клавишей мыши. Появится боковая панель, в поле id вписываем ранее заданный параметр в попапмейкере без решетки.
Выводим параметры элемента в elementor
Показ формы связи через elementor
Открывается, заполняем обратную связь и смотрим приходит ли письмо на почту. Конечно, во всех разобранных методах нужны визуальные настройки формы, но при базовых знаниях CSS сделать не составит труда.
На этом закончу статью, мануал получился не маленький, давайте выведем чек–лист действий:
Наконец решили проблему как создать всплывающую форму обратной связи на WordPress, пишите свои вопросы в комментариях, удачи.
Действия после успешной отправки формы CF7
Метод, использующий on_sent_ok hook, больше не рекомендуется.
Эта функция будет отменена к концу 2017 года.
Если форма расположена просто на странице, тогда там все понятно — там появляются сообщения об ошибках и сообщение после успешной отправки сообщения сразу под формой.
Рассмотрим, как можно изменить уведомления об отправке формы, или какие события можно добавить после отправки формы (редирект, сообщение об успешной доставке, скачивание файла).
Так же рассмотрим, какие могут быть интересные варианты событий после отправки формы CF7 в pop-up окне, то есть во всплывающем окне. Как сделать такую форму, я описывал в статье Как сделать форму обратной связи во всплывающем окне для WordPress.
Список пользовательских DOM событий для Contact Form 7
Обработчик событий wpcf7submit
Приведенный ниже код представляет собой простой пример регистрации обработчика событий. В этом примере функция прослушивает wpcf7submit событие и просто выдает предупреждение, когда событие происходит.
Поскольку все wpcf7* события всплывают через дерево DOM к корню документа, если вам не нужно устанавливать конкретную цель события, вы можете упростить ее, установив document свойство в качестве цели события:
Данные, вводимые пользователем через нужную контактную форму, передаются в обработчик события как detail.inputs свойство объекта события. Структура данных detail.inputs является массивом объектов, и каждый объект имеет name и value свойство.
Это пример доступа к введенному пользователем значению через поле «your-name»:
Существуют также другие свойства объекта события, которые вы можете использовать в своем обработчике событий.
СВОЙСТВО | ОПИСАНИЕ |
detail.contactFormId | Идентификатор контактной формы (ID). |
detail.pluginVersion | Версия плагина Contact Form 7. |
detail.contactFormLocale | Код языка контактной формы. |
detail.unitTag | Юнит-тег контактной формы. |
detail.containerPostId | Идентификатор сообщения (ID), в котором размещена контактная форма. |
Например, если вы хотите сделать что-то только с определенной контактной формой (ID = 123), используйте detail.contactFormId свойство, как показано ниже:
Выводим поп-ап окно «Спасибо за заказ» после успешной отправки сообщения
Например, такой скрипт для открытия модального окна с id=»popup-success» после успешной отправки формы:
Этот код всплывающего окна можно разместить где угодно, хоть в футере, хоть под формой, основной плюс в том, что это окно могут вызывать любые другие формы и не нужно делать под каждую форму отдельные попапы.
Для кнопки «Закрыть окно» добавляем такой код в файл скриптов:
Если у вас несколько форм, тогда для каждого ID формы можно создавать свои события:
id — это номер формы
$.magnificPopup.open — в данном примере используется Magnific Popup
Создаем событие для конкретной формы после успешной отправки сообщения (используем обычный Easy Fancybox)
У многих возникают сложности с данным моментом, поэтому решил его все же вынести в статью.
Данный скрипт выведет на экран окно id=’popup-success’ после успешной отправки одной из форм (id == 17754 или 17758 или 17757):
Простой разбор кода
id == 17754 || 17758 || 17757 — окно будет показываться только для этих форм (или-или).
Окно с сообщением об успешной отправке (можно добавить его в код, или лучше в виджет футера например, если шаблон не хочется изменять, или еще 100 вариантов):
Если скрипт вы добавляете не в файл скриптов, а в футер или редактор js-кода, тогда оберните его в данный код:
Как сделать скачивание файла pdf после заполнения формы c помощью плагина Contact Form 7
Открываем pdf-файл сразу на этой же странице
Открываем pdf на новой странице
Редирект на другую страницу после успешной отправки формы
Открыть новую страницу в новой вкладке после отправки формы:
Рекомендую к прочтению:
Комментарии (43) к “Действия после успешной отправки формы CF7”
Ирина
при этом само окно находится в блоке с
Подскажите, а где должен быть сам блок?
Denis Creative
Обновил немного статью — вот ссылка
Дмитрий
Есть кнопка с красивой всплывающей формой на странице я её скрываю «дисплей ноне» и хотелось бы что бы эта же форма всплывала после отправки формы нажатием кнопки отправки в сонтакт форм 7
Использую «Modal» из визуала композера, отличная вещь только нуждается каждый раз в доработке 🙁
Сергей
Denis Creative
Действительно, статью перепишу.
Теперь нужно использовать скрипт:
vadim
куда вставить этот скрипт чтобы после заполнения формы отправлялся файл?
Denis Creative
Или в основной скрипт, который использует шаблон, или в футер.
Вячеслав
Здравствуйте! Подскажите пожалуйста, а как вставить окно из плагина Easy Modal? Вроде все варианты перепробовал, не выходит.
Владимир
Здравствуйте.
Подскажите пожалуйста, как для данного скрипта:
михаил
здравствуйте! Отличная статья! подскажите а как сделать так, чтобы после успешной отправки. сначало открывалось благодарственное попап-окно..а через 5 секунд, включалось перенаправление на главную страницу
Назар
Больше не актуально т.к. on_sent_ok убрали из contact form 7
Denis Creative
во второй половине статьи есть эта информация
Дмитрий
Добрый день! Подскажите пожалуйста как реализовать скачивание фаила пользователем, после заполнения всех полей формы и нажатием кнопки «Скачать».
Дмитрий
Использую следующий скрипт для одной из форм:
ID формы прописано, файл скачивается. Но данный скрипт работает для всех форм на сайте а нужно только для определенной по ID!
Подскажите пожалуйста, как исправить?
Denis Creative
Надеюсь, вы уже решили эту проблему.
Если нет, то ответ в том, что location нужно было поместить внутрь условия if()
Андрей
on_sent_ok пишет — устаревший вид ввода, пишите на джава скрипте, что только не пробовал написать не появляется всплывающее окно после отправки
Denis Creative
Во второй половине статьи есть эта информация, и в комментариях выше.
Denis Creative
Обновил статью, найдёте решение внизу статьи.
Mihail
Как сделать, чтобы перенаправление после отправки письма происходило с задержкой?
Denis Creative
Бобсон
А как? подскажите, что прописать в setTimeout и где его ставить?
Denis Creative
только поменяйте 34560 на id своей формы.
Здравствуйте, подскажите что дописать чтобы скачивание файла или страничка открывались в отдельной вкладке
Denis Creative
Владимир
Никак не могу разобраться. Форма работает, но вот сделать закрывающееся окно никак не получается. Вставлял код в functions.php — ругается на ошибки, сайт висит. Ставлю код в main.js — тишина, вообще ничего не происходит.
мой код закрывающегося окна после отправки сообщения:
Denis Creative
Попробуйте такой код — он должен открывать окно с благодарностью после отправки сообщения (этот код нужно добавить в main.js):
При этом код самого окна должен быть примерно таким (обязательно id=»popup_msg» ) — этот код нужно добавить в свой html, footer.php или, если через админку, то в какой-то виджет в футере:
Владимир
Спасибо за ответ. С кодом разобрался. Взял пример из вашей другой статьи на эту тему. Мне нужно было чтоб окно с формой закрывалось после успешной отправки, взял этот пример:
разместил его в functions.php всё работает, но окно закрывается очень быстро, не видно сообщения об успешной отправке. Хочу сделать чтоб оно закрывалось через 4 секунды, пытаюсь вставить setTimeout 4000 но не пойму куда. Да я не программист, мне код сложно осваивать, пытаюсь разобраться.
Denis Creative
Владимир
Спасибо огромное! Куда я только её не пихал, эту setTimeout. Оказалось, надо ещё в одну функцию завернуть.
KoolPal
I am using this within the CF7 form. My form shortcode is [contact-form-7 title=»Contact Form Flat»]
document.addEventListener( ‘wpcf7mailsent’, function( event ) <
var > if ( 8 ) <
$.magnificPopup.open( <
items: <
src: ‘#popup_msg’
>,
type: ‘inline’
>, 0);
>
>, false );
However, this form is not closing after submission. Please guide me.
Здравствуйте, Денис. Пытаюсь сделать ссылку на скачивание файла после заполнения всех полей и нажатия на кнопку скачать.
Форма находится на отдельной странице.https://kitkraken.by/kupon-sea/
В дополнительные настройки прописываю:
document.addEventListener( ‘wpcf7mailsent’, function( event ) <
location = ‘https://kitkraken.by/wp-content/themes/plattform/inc/img/big.jpg’;
>, false );
Ничего не происходит. Письмо отправляется, но ссылка на скачивание (или автоматическое скачивание) не показывается.
Подскажите в чем ошибка? Спасибо
Denis Creative
Возможно, вы исправили, но меня редиректнуло на картинку и лучше бы эта картинка открывалась в новой вкладке.
Да, спасибо, Денис. Исправил (скрипт прописал в футере). Картинку я так просто поместил. Будет ПДФ-файл.
Денис, добрый день
Что-то не хочет в другой вкладке открываться.
Пишу
Denis Creative
https://. — там впишите нужный урл
Да, отлично. Спасибо, Денис.
Denis Creative
Денис, опять к Вам. Новая задача возникла. Вместо открытия файла, должно быть сразу скачивание без открытия.
Прописал
Ничего не происходит
Denis Creative
По моему, файлы pdf не скачиваются, попробуйте использовать предыдущий код, но не pdf, а архив.
Вообще, странные вещи происходят. Хром начал блокировать всплывающие окна. ПДФ файл перестал даже открываться. При window.open архив тоже не помог. Заменил на location =
Вроде работает… посмотрим
Игорь
Добрый день! Прочитал статью, перепробовал различные варианты и ничего не получается. Вкратце о реализации контактной формы:
— сайт на wordpress
-контактная форма CF7, вызывается popup окном, которое создано плагином JetPopup
-на сайте установлен Google Tag Manager, через который есть возможность прослушивать успешную отправку формы.
Что не получается? Т.к. я уже упомянул ранее что контактная форма появляется в popup окне при клике на кнопку на сайте, то при успешной ее отправке хотелось бы чтобы popup окно с формой закрывалось и появлялось новое (уже подготовленное в плагине Jet Popup) popup окно с благодарностью.
Denis Creative
Добрый день, я не работал с плагином JetPopup.
Для плагина Easy FancyBox вот пример простого кода, чтобы после отправки формы, появлялся попап с сообщением «Успешно отправлено» (#popup-success) или «Подписка оформлена» (#popup-success-subscribe), если id формы 210 (если это форма подписки):
Принцип тот же, просто вызов попапа может быть другой.
По необходимости нужно скрыть уведомление об ошибках под формой, чтобы уведомление не отображалось при повторном вызове попапа с формой:
Или скрыть только уведомление об успешной отправке
Антон
Добрый день! Подскажите, пожалуйста, вариант вашего кода, чтобы был редирект в новое окно после отправки формы при условии, что был выбран нужный чек-бокс (если пользователь отметил при вводе формы «хочу забронировать», после отправки формы его перекидывает на бронирование).