Как сделать всплывающее окно после отправки формы
Добавил пользователь Алексей Ф. Обновлено: 11.09.2024
Всем привет. Появилась минутка и я решил посвятить ее заполнению пробелов у себя на сайте. А именно, хочу рассказать вам как делается всплывающая форма обратной связи для wordpress с помощью JavaScript, CSS, Html.
В этом уроке, я хочу использовать две формы обратной связи: самописную на Ajax и Contact Form 7 на плагине.
В идеале, я покажу вам как создать всплывающую форму обратной связи, она же popup contact form 7 или любая другая произвольная форма обратной связи в модальном окне.
Эта статья подойдет как начинающим программистам, которым нужна всплывающая форма обратной связи у виде готового кода, так и более продвинутым.
Для успешной работы popup формы вам практически не нужны знания яваскрипт и пхп, – достаточно просто следовать пошаговой инструкции.
Навигация по странице:
Не бойтесь нажимать, вы перейдете сразу к просмотру нужной информации
За все время работы WEB - программистом я создал и повидал не одну сотню всплывающих форм: как самописных так и на базе готовых модальных окон типа fancybox, lightbox и тому подобное. По этому, опираясь на свой опыт я вывел для себя самый удобный и простой вид всплывающих модальных окон, белая форма на полупрозрачном черном фоне, им я с вами и хочу поделиться.
Форма обратной связи в модальном окне
к менюДля более продвинутых пользователей я сейчас опишу 3 составляющих кода (яваскрипт, хтмл, цсс) для создания и работы модального окна. Далее, я покажу как этот код интегрировать в CMS WordPress для пользователей, которые не сильно разбираются в программировании. Перейти сразу к интеграции всплывающей формы на сайт вордпресс для начинающих можно нажав на этот линк.
Если вы хотите просмотреть код и скопировать его к себе на сайт нажимайте по очереди вкладки Html, CSS, Javascript ниже:
Всплывающая форма Html код
Это хтмл код для вставки в произвольное место родительского тега body. Лучше всего вставлять в конец страницы, перед закрывающимся тегом
Примечание: модальные окна отличаются от обычных тем, что пока модальное окно открыто пользователь не может взаимодействовать с другими элементами сайта до тех пор, пока не закроет модальное окно.
Посмотреть пример модального окна можно с помощью JavaScript, воспользовавшись методом alert().
Всплывающее окно
Первым шагом создания всплывающего окна является создание элемента
и будет использоваться в качестве всплывающего окна. Теперь мы его скрываем с помощью значения none свойства display и добавляем ссылку, при нажатии на которую будет появляться всплывающее окно:
Используя псевдо-класс :target мы выбираем и применяем стили к элементу, к которому был осуществлён переход. Таким образом после перехода по ссылки значение свойства display элемента
Теперь надо расположить
посередине страницы, чтобы он стал похож на всплывающее окно. Делаем его абсолютно позиционированным и центрируем его по вертикали и горизонтали:
Следующим шагом будет реализация скрытия окна, при нажатии на любое место страницы или на само окно. Для этого нам нужно расположить элемент
На этом создание простого всплывающего окна закончено.
Модальное окно
Для создания всплывающего модального окна, берём элемент
Следующим шагом в создании полноценного модального окна будет добавление кнопки, которая будет скрывать наше окно. Кнопку сделаем из обычной ссылки, добавив её к нашему
Для эффекта затемнения страницы при выводе модального окна, надо поместить весь имеющийся код окна в дополнительный
и растягиваем его на всю ширину и высоту окна. Задаём ему display: none; и перенаправляем ссылку вызова окна на него.
теперь отвечает за отображение модального окна и за затемнение фона страницы, а дочерний только за оформление самого окна:
В данном случае у меня при нажатии кнопки (submit) открывается второе оконо в браузере с запросом где мой сервер с специальным ПО для такси откликается и выводит на экран то что всё ок № заказа стоимость. Мне необходимо сделать так что бы окно в браузере не открывалась а выскакивала информация в поверхностном окне перед формой (типо мол всё ок заказ создан)
Подскажите пожалуйста как мне это реализовать
в коде зде XXXXX- ip сервера с ПО
где YYY- открытый порт
при отправки формы страница перегружается.
для такой реализации - данные отправлять бы аяксом и ждать успешность ответа.
либо после отправки формы - пиши JS скрипт плавного всплытия твоего окошка.
т.е. в form2.php - нужно убедиться что обработка данных прошла успешно (либо там запись в БД, либо отправка на мыло - я хз чё там у тебя)
но вариант с аяксом - смотрелся бы куда лучше.
HTML, CSS (Bootstrap), JS(JQuery, ExtJS), PHP, MySQL, MSSql, Posgres, (TSql, BI OLAP, MDX), Mongo, Git, SVN, CodeIgnater, Symfony, Yii 2, JiRA, Redmine, Bitbucket, Composer, Rabbit MQ, Amazon (SQS, S3, Transcribe), Docker
| Цитата (Игорь_Vasinsky @ 27.06.2016 - 05:18) |
| при отправки формы страница перегружается. для такой реализации - данные отправлять бы аяксом и ждать успешность ответа. |
либо после отправки формы - пиши JS скрипт плавного всплытия твоего окошка.
т.е. в form2.php - нужно убедиться что обработка данных прошла успешно (либо там запись в БД, либо отправка на мыло - я хз чё там у тебя)
HTML, CSS (Bootstrap), JS(JQuery, ExtJS), PHP, MySQL, MSSql, Posgres, (TSql, BI OLAP, MDX), Mongo, Git, SVN, CodeIgnater, Symfony, Yii 2, JiRA, Redmine, Bitbucket, Composer, Rabbit MQ, Amazon (SQS, S3, Transcribe), Docker
Теперь сам Ajax
Ну и в обработчике, я не знаю как там у тебя, просто покажу пример
у меня то обработчика то нету, щас сделал всё в переменных что бы не было в браузере отображения самого кода, если вы заметили я пишу
Подписаться на тему
Уведомление на e-mail об ответах в тему, во время Вашего отсутствия на форуме.
Вообщем-то сначала я искал другие, более простые, так сказать готовые решения, устанавливал различные плагины, в том числе FancyBox, но в итоге вернулся к CF7 и нашел следующий выход.
Всплывающая форма обратной связи на wordpress за 5 минут
- Плагины на русском языке.
- Постоянно обновляются (кстати для CF7 — это не всегда хорошо, ниже по тексту решим и эту проблему).
- Плагины хорошо интегрируются между собой.
- Результат быстрый и удобный.
А теперь, разберем пошагово, как делать попапы (всплывающие окна) с встроенными формами.
Устанавливаем и настраиваем CF7
Далее помещаем получившийся шорткод между тегами сюда вставляем код , должно получится так:
Устанавливаем и настраиваем Popup maker
С куки будьте осторожны, можно настроить их так, что форма откроется для посетителя всего один раз, и если он не намерен оставлять данные прямо сейчас, то второго шанса у него не будет. Хоть затыкайся. Поэтому если нам надо, чтобы форма всегда работала при клике, не выставляйте Cookies.
После публикации проверим работу всплывающей формы на нашем сайте WordPress. Для этого откройте страницу или статью, где необходимо разместить форму, вставьте изображение, к которому нам необходимо будет добавить класс .audit, чтобы всплывающая обратная связь работала по клику на картинку.
Тег у вас должен приобрести вид
Если вы работаете в классическом редакторе, что кажется гораздо удобнее, то для вас я прилагаю более доступный скрин.
Как вы понимаете класс можно прописать к любой части текста, к ссылке, к картинке, целому абзацу и так далее.
В целом выглядит она не плохо, да стандартно, но нормально ). Вы же всегда можете можете настроить ее внешний вид.
Видео для тех, кому так удобнее воспринимать.
Стилизация внешнего вида Contact Form 7
Теперь откройте страницу с вашей формой. И поиграйте с настройками. Плагин очень удобный так как имеет визуальный редактор CSS классов. Все изменения в моменте принимают нужный вид.
У меня получилась вот такая всплывающая форма.
Но что делать если на сайте несколько форм обратной связи и они должны иметь свой неповторимый вид? Ну например одна форма у вас на странице, а вторая форма в сайдбаре или где-то еще… Плагин который описан выше по тексту в таком случае не подойдет.
Если необходимо придать разный внешний вид, то есть разные стили формам Contact Form 7, то я рекомендую использовать плагин «Contact Form 7 Style«, он удобен тем, что при стилизации формы, вы можете выбрать какой форме, какие стили прописать и соответственно придать индивидуальный вид каждой по отдельности.
А также, заметки ради, оставлю здесь название еще одного плагина стилизации широкого формата с визуальным редактором «Contact Form 7 Styler for Divi«.
Сontact form не отправляет письма
Проверьте какая версия Contact Form 7 у вас сейчас установлена. Если у вас стоит версия 4.7 или более ранняя, то этой проблемы у вас быть не должно. А если у вас стоит версия 4.8 и выше, то обратите особое внимание на работу форм на вашем сайте.
Если же у вас на сайте все-таки обнаружилась проблема с отправкой писем с Contact Form 7, то для её решения вам необходимо будет сделать откат плагина до версии 4.7.
Делать мы это будем при помощи специального плагина, который называется WP Rollback.
Все стандартно, переходим в соответствующий раздел ищем плагин, устанавливаем и активируем.
После переустановки плагина, вам необходимо его снова активировать. И теперь проверить работоспособность отправки писем.
Аналогично вы можете сделать откат других плагинов WordPress. Единственное, все равно желательно перед любыми операциями с обновлением, восстановлением, или откатом плагина, создавать резервную копию файлов сайта и резервную копию базы данных. Но как правило я сталкивался только с проблемой на плагине CF7, с другими дополнениями подобных действий никогда не проводил.
На этом у меня все. Статья получилось длинной как и само заголовок к ней. Надеюсь что она была для вас полезной и вы нашли здесь ответы на свои вопросы. Комментарии внизу если что ) пишите.
Читайте также: