Модальное окно после отправки формы

Модальное окно после отправки формы

Всем доброго времени суток. Прошу о помощи) Второй день не могу найти решения на вопрос с модальным окном после отправки формы. Проще говоря нужно, чтобы после нажатия на кнопку submit вывел скрытый div с сообщением: «Ваше сообщение отправлено».

Отправка формы при помощи php

После чего идет редирект на главную страницу. Можно ли сделать вывод дива после редиректа? Или же нужно смотреть в сторону AJAX (с помощью него отправлять форму)?

Если форма расположена просто на странице, тогда там все понятно – там появляются сообщения об ошибках и сообщение после успешной отправки сообщения сразу под формой.

Рассмотрим, какие могут быть интересные варианты событий после отправки формы CF7 в pop-up окне, то есть во всплывающем окне. Как сделать такую форму, я описывал в статье Как сделать форму обратной связи во всплывающем окне для WordPress.

Код добавляем в блок Дополнительные настройки вашей формы.

После успешной отправки сообщения

Выводим алерт ‘Спасибо за Вашу заявку!’ – примитивно и некрасиво.

Делаем редирект на страницу благодарности

Просто закрываем поп-ап – не самый лучший вариант, пользователь может не понять, все ли прошло успешно

Выводим поп-ап окно “Спасибо за заказ” после успешной отправки сообщения

Выводим поп-ап окно “Спасибо за заказ”, при этом само окно находится в блоке с id="popup_msg" , внешний вид и стили нужно будет оформлять под свой дизайн, чтобы все было красиво + сделать кнопку ‘Закрыть’ окно благодарности.

Этот код добавляем в блок Дополнительные настройки вашей формы CF7:

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

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

И для кнопки “Закрыть окно” добавляем такой код в файл скриптов:

Как сделать скачивание файла pdf после заполнения формы c помощью плагина Contact Form 7

Открываем pdf сразу на этой же странице

Открываем pdf на новой странице

Метод, использующий on_sent_ok hook, больше не рекомендуется. Эта функция будет отменена к концу 2017 года.

Теперь для редиректа на другую страницу после успешной отправки формы нужно использовать событие wpcf7mailsent

Например, такой вариант для открытия модального окна с id="sentMessage" :

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

id – это номер формы
$.magnificPopup.open – в данном примере используется Magnific Popup

Создаем событие для конкретной формы после успешной отправки сообщения (используем обычный Easy Fancybox)

У многих возникают сложности с данным моментом, поэтому решил его все же вынести в статью.

Данный скрипт выведет на экран окно id=’popup_msg’ после успешной отправки одной из форм (id == 17754 или 17758 или 17757):

Читайте также:  Что значит светодиодный светильник

Простой разбор кода

id == 17754 || 17758 || 17757 – окно будет показываться только для этих форм (или-или).

Окно с сообщением об успешной отправке (можно добавить его в код, или лучше в виджет футера например, если шаблон не хочется изменять, или еще 100 вариантов):

Если скрипт вы добавляете не в файл скриптов, а в футер или редактор js-кода, тогда оберните его в данный код:

Дальше все ограничивается только лишь фантазией, можно добавить условные операторы else() , else if() или switch и для разных форм использовать разные события после успешной отправки сообщения.

Комментарии (29) к “Действия после успешной отправки формы CF7”

Ирина

при этом само окно находится в блоке с
Подскажите, а где должен быть сам блок?

Denis Creative

Обновил немного статью – вот ссылка

Дмитрий

Добрый день ! Подскажите как засунуть свой “див” в “алерт” ?

Есть кнопка с красивой всплывающей формой на странице я её скрываю “дисплей ноне” и хотелось бы что бы эта же форма всплывала после отправки формы нажатием кнопки отправки в сонтакт форм 7

Кнопка которая вызывает окно имеет атрибут "data-ultimate-target="#modal-trg-txt-wrap-6292"
Можно ли как то это совместить с on_sent_ok: ? Или это нужно знать переменную плагина которая выводит это окно ?

Использую “Modal” из визуала композера, отличная вещь только нуждается каждый раз в доработке 🙁

Сергей

Denis Creative

Действительно, статью перепишу.
Теперь нужно использовать скрипт:

Метод, использующий on_sent_ok hook , больше не рекомендуется. Эта функция будет отменена к концу 2017 года.

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 – тишина, вообще ничего не происходит.

мой код закрывающегося окна после отправки сообщения:

Простая строчка в настройках CF7 on_sent_ok: $.fancybox.close(); теперь превратилась в адский геморой. Помогите решить вопрос.

Denis Creative

Ничего не понятно из вашего сообщения.
Что за закрывающееся окно? Окно с сообщением об успешной отправке сообщения?
У вас внутри условия if ( 34560 ) < . >стоит код для того, чтобы при клике на кнопку .popup-close-btn всплывающее окно закрылось, но никак не код для вызова того самого окна.

Попробуйте такой код – он должен открывать окно с благодарностью после отправки сообщения (этот код нужно добавить в main.js):

При этом код самого окна должен быть примерно таким (обязательно id="popup_msg" ) – этот код нужно добавить в свой html, footer.php или, если через админку, то в какой-то виджет в футере:

Владимир

Спасибо за ответ. С кодом разобрался. Взял пример из вашей другой статьи на эту тему. Мне нужно было чтоб окно с формой закрывалось после успешной отправки, взял этот пример:

разместил его в functions.php всё работает, но окно закрывается очень быстро, не видно сообщения об успешной отправке. Хочу сделать чтоб оно закрывалось через 4 секунды, пытаюсь вставить setTimeout 4000 но не пойму куда. Да я не программист, мне код сложно осваивать, пытаюсь разобраться.

Denis Creative

Владимир

Спасибо огромное! Куда я только её не пихал, эту setTimeout. Оказалось, надо ещё в одну функцию завернуть.

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

Думаю, полно уже подобного в интернете, но раз народ просит, то решил сделать. Тем более, подобный функционал должен присутствовать почти на каждом лендинге для реализации кнопки обратного звонка. И действительно, сейчас все больше появляется результатов АБ — тестирования, которые говорят, что открытые формы работают хуже, чем те, что спрятаны в модальное окно и открываются после нажатия на кнопу.

Читайте также:  Как подключить принтер ricoh к ноутбуку

Некоторые утверждают, что это из-за того, что у людей потихоньку «вырабатывается иммунитет» и открытая форма — это агрессивная продажа. Якобы сейчас настало то время, когда пользователь при виде открытой формы считает, что ему пытаются что-то «впарить». Не совсем согласен с этой теорией, но зерно истины — присутствует. Может быть в некоторых видах бизнеса это и так. Ну а сейчас давайте займемся реализацией формы.

Примечание! Я не буду подробно описывать каждое действие, а предлагаю вам готовый вариант в исходнике. Если возникнут вопросы — пишите в комментариях. Будем разбираться 🙂

Ajax форма обратной связи

Сегодня начнем не с jQuery, а с верстки кнопки и формы. Все скрипты подключим в конце страницы.

Кнопка, по нажатию на которую будет открываться модальное окно:

Класс можете задать любой, а вот в href напишите #modal — это будет id у контейнера с затенением и контактной формой.

Теперь приведу код формы и блока, на котором будет располагаться форма:

Добавив стили, выглядеть это стало так:

Для создания модального окна, использовалась библиотека Remodal. Это набор из css и js файлов, как раз для создания анимированных модальных окон. Можете скачать по ссылке или уже с моими правками в конце статьи.

Между тегами head подключаем стили:

А перед закрывающимся тегом body — добавляем скрипты:

Script.js — это скрипт для обработки формы. Тот самый Ajax, который позволяет нам осуществить всю процедуру без перезагрузки страницы:

Не буду приводить исходный код css и js из файлов, отвечающих за модальное окно и форму, так как они достаточно объемы. Если что, смотрите в исходнике. А вот php обработчик во многом стандартный (если можно так сказать):

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

Вот такая ajax форма получилась. Извините, что не пытался объяснить подробно, как делался каждый элемент. Просто хотелось дать готовый результат, а описывать все анимации, появления — нет никакого смысла. Качайте исходник и внедряйте на свой сайт. А на сегодня — все. Всем удачи!

Ребята, настоятельно прошу тестировать форму на реальном или виртуальном сервере (хостинге). Убедитесь пожалуйста, что ваш сервер поддерживает php, у вас платный тариф и не тестовый период. В противном случае, в 90% случаев форма работать не будет.

Не ждите письма у себя в почтовом ящике, если вы просто открыли индексный файл в браузере и нажали кнопку «Отправить». Php — это серверный язык!

Если вам лень разбираться и самостоятельно делать форму, то рекомендую обратить внимание на конструктор форм обратной связи.

Ссылка на основную публикацию
Микроволновая печь самсунг супер гриль
36 страниц подробных инструкций и пользовательских руководств по эксплуатации МИКРОВОЛНОВАЯ ПЕЧЬ Инструкция пользователя и руководство по. Инструкция пользователя и руководство...
Максимальная длина двоичного кода который может обрабатываться
Ответы на вопрос информатика — это научная и прикладная область знаний, изучающая законы, методы и способы накопления, обработки и передачи...
Максимальное разрешение на ноутбуке
Что делать если вы купили новый монитор, а оптимальное разрешение, которое определяется матрицей экрана, отсутствует в списке предлагаемой Windows? У...
Микроволновка с открыванием вправо
Основные характеристики- Тип: встраиваемая - Мощность микроволн: 900 Вт - Внутренний объем: 21 л - Внутреннее покрытие камеры: нержавеющая сталь...
Adblock detector