Wordpress контактная форма во всплывающем окне. Ajax форма обратной связи в модальном окне

(Последнее обновление: 08.07.2016)

Всем огромный привет! Это снова я, с полезным постом - всплывающее окно для WordPress - для начинающих и не только пользователей WordPress. Если вас интересует плагин всплывающего окна WordPress , его ещё называют плагин модального окна, то вы, друзья, попали точно по назначению.

Плагин, который я представлю чуть ниже, вы можете использовать для: Contact Form 7 в модальном окне; любая контактная форма (обратной связи) в модальном (всплывающем) окне; видео в модальном окне; картинки во всплывающем окне; размещение полезной информации с ссылками; форма подписки по почте на новые статьи в модальном окне и так далее, и так далее всего, и не перечислишь. Плагин совсем простой, без сложных настроек и почти не создающий дополнительную нагрузку на /сайт.

Плагин Easy Modal - всплывающее/модальное окно для WordPress
Плагин модального окна для WordPress - Easy Modal

Установить данный плагин можно стандартным способом, через админпанель - Плагины - Добавить новый и в поле Поиск плагинов вводите название Easy Modal, нажимаете Enter. В списке он должен быть первым. Устанавливаете и как обычно активируете его. А дальше можно переходить к созданию нового модального окна.

Для этого нажмите на новый появившейся раздел Easy Modal и выберите пункт Modals:

Easy Modal - создание нового модального окна

После этого, в самом вверху страницы нажмите кнопку Add New:

Добавить новое окно

А здесь, всё просто:

Создание всплывающего окна с видео

В общих настройках (вкладка General) даёте имя нового окна (отображаться оно не будет, это для вас, если например, вы создадите несколько модальных окон); тип загрузки Load Sitewide (для всего сайта); заголовок окна и наконец вставляете в редактор (режим Текст) нужный вам код. У меня в примере вставлен код видео с YouTube.

Настройка модального окна

В параметрах можно выбрать размер окна; использовать фон или нет; тип анимации для модального/всплывающего окна; расположение окна, а также можно окно зафиксировать (поставить галочку и указать отступ от верха экрана).

На вкладке Examples вы найдёте примеры кода для вывода всплывающего окна в WordPress:

Код вывода модального окна в WordPress

Тут можно выбрать простую текстовую ссылку, кнопку или иконку. Обратите внимание, что к каждому вновь созданному окну присваивается класс eModal - . Первое созданное окно будет иметь класс eModal - 1 второе eModal - 2 и так далее. Вам нужно только самому подставлять номер после знака - . Этот код можно вставлять в или в любом месте вашей статьи. Естественно, текст в коде вы можете написать любой. Да чуть не забыл, что после создания модального окна справа на странице не забудьте нажать кнопку Опубликовать (Publish).

Код модального окна с видео я вставил в сайдбаре в виде кнопки:

Кнопка на боковой панели блога

Посетитель нажимает на неё и открывается окошко с видео:

Модальное окно с видео

Надеюсь, друзья и товарищи, общий принцип работы с плагином Easy Modal вам понятен. Только лишь добавлю, что вы можете потом или сразу для модального окошка оформить внешний вид, нажав пункт Theme. К сожалению, в бесплатной версии плагина есть только одна тема для оформления, но её вы можете оформить как угодно, настроек достаточно. При настройке внешнего вида модального окна тут же вы можете видеть справа предпросмотр оформления:

Редактирование темы - оформления модального/всплывающего окна

После всех настроек внешнего вида окна нажимайте кнопку справа Save (Сохранить). И напоследок, дамы и господа, покажу пример вывода контактной формы Contact Form 7 в модальном окне.

Создайте новое модальное окно, как показано выше и в текстовый редактор просто вставьте шорткод Contact Form 7 (если у вас установлен этот плагин, если нет, ):

Создания Contact Form 7 в всплывающем окне
Кнопка написать автору после сообщения

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

Форма для связи с автором в модальном окне

Вот, как то, так. Ещё, все ваши созданные всплывающие окна будут отображаться на странице (пункт Modals), где кстати, указаны классы для каждого модального окошка:

Созданные модальные окна на WordPress

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

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

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

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

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

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

Оставить заявку

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

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

Оставьте ваши контактные данные и наш консультант свяжется с вами Хочу такую форму на свой сайт

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

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

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

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

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

$(document).ready(function () { $("form").submit(function () { // Получение ID формы var formID = $(this).attr("id"); // Добавление решётки к имени ID var formNm = $("#" + formID); $.ajax({ type: "POST", url: "mail.php", data: formNm.serialize(), success: function (data) { // Вывод текста результата отправки $(formNm).html(data); }, error: function (jqXHR, text, error) { // Вывод текста ошибки отправки $(formNm).html(error); } }); return false; }); });

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

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

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

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

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

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

Обновленная версия статьи находится

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

Внедрения формы в страницу обычно достаточно, однако что если вы захотите, чтобы форма появлялась во всплывающем окне, когда пользователь кликнет на ссылку Contact Us? Для реализации такого желания необходимо использовать два плагина WordPress одновременно: Easy FancyBox

1. Первым делом устанавливаем плагины и Easy FancyBox .

2. Для простоты мы будем использовать форму Contact Form 7, уже созданную самим плагином при установке для примера. На странице настроек Contact Form берем код формы, который нужно скопировать и вставить в редактор WordPress для создания формы.

3. Создаем новую страницу в WordPress. Для того, чтобы добавить контактную форму вам нужно вставить код, находящийся в квадратных скобках со страницы настроек Contact Form 7, на вашу страницу. Убедитесь, что вставили код корректно, ровно также как его отображает плагин.

4. Теперь на вашем WordPress есть контактная форма. Мы решили сделать её всплывающей, в модальном окне после клика пользователем на ссылку. В дело вступает плагин Easy FancyBox. С его помощью можно заставить любой элемент страницы отображаться во всплывашке. Открываем редактирование станицы, кликаем на вкладку ТЕКСТ и добавляем следующий HTML-код:

Contact Us

5. Все, теперь у нас есть ссылка, которая «запускает» форму контактов во всплывающем окне. Поздравляем! Вероятно вам придется подправить CSS емейл-формы для корректного отображения ширины и высоты, а также сообщений о возможных ошибках при заполнении. Для начала этого должно быть достаточно.

Недавно для одного сайта меня попросили сделать форму обратной связи для WordPress в модальном окне. То есть при клике по ссылке «напишите нам» вместо перехода на соответствующую страницу пользователю должно открываться новое всплывающее окно, где и будет находится функция отправки сообщения. Это более интерактивное решение, хотя далеко не всем оно нравится. Я лично предпочитаю классическую реализацию со страницей контактов, однако формы на сайтах бывают разные — поэтому полезно будет рассмотреть решение данной задачи. В работе использовал 2 плагина: известный многим Contact Form 7 и модуль Easy Modal, чтобы сделать модальное окно в вордпресс.

Обновление 18.05.2017: Судя по последним отзывам в репозитории, в некоторых случаях могут наблюдаться проблемы с его работой. Если вас тоже это коснулось, попробуйте новое решение от разработчиков под названием Popup Maker . Еще в качестве альтернативы можно рассматривать .

Детально останавливаться на установке и настройке Contact Form 7 не буду, всю информацию о нем . В блоге также была статья про , что может пригодиться.

Перейдем сразу к модулю Easy Modal . Найдете его . Разработчики утверждают, что это лучшее решение создания модальных окон на сайте с разными инотересными возможностями для подачи контента.

Загрузок более 10 тысяч, оценка 4.6. Допустимые версии 3.4 — 4.0.8, хотя я успешно запустил его на WP 4.3.1. Не смотря на то, что сейчас плагин трансформировался в новое решение Popup Maker, на сайте wordpress.org и при поиске плагинов внутри админки все еще можно найти обычный Easy Modal версии 2.0.17. На его примере я и расскажу про создание модального окна обратной связи в WordPress.

После установки появится одноименный раздел, где есть несколько пунктов. Нам понадобится самый первый из них — Modals . Кликаете там по кнопке Add New.

Это действие создаст новое модальное окно для вашего вордпресс сайта. В настройках элемента будет 4 закладки:

• General — общие параметры.
• Display Options — опции отображения.
• Close Options — настройки закрытия окна (с помощью клика или кнопки Esc).
• Examples — примеры кода для использования.

Общие настройки содержат название окна (не отображается на сайте), его заголовок, контент и тип загрузки. В блоке контента, переключившись в HTML режим, добавляем шорткод своей формы обратной связи в модальном окне.

Тип загрузки Load Type имеет 2 варианта:

• Load Sitewide (для всего сайта).
• Per Page/Post (для конкретных постов и страниц).

Весьма интересная опция. Если вам нужно всплывающее окно, которое будет выводиться на всех страницах сайта (ссылка располагается в сайдбаре, например), то выбиваете первый вариант. Во втором случае на страницах/постах сайта при редактировании появится соответствующий блок настройки:

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

Вторая закладка параметров модуля — Display Options (опции отображения) .

Здесь указываете:

• размер окна — автоматический, средний, адаптивный, маленький, большой и т.п.;
• подложку — можно использовать фон для формы или выводить ее без него;
• анимацию вывода всплывающего окна;
• позицию (расположение) — сверху по центру, справа снизу и т.п.; фиксированная или нет;
• отступ сверху экрана.

Примеры отображения вывода модального окна в вордпресс с помощью плагина Easy Modal найдете в последней вкладке.

Вставлять этот код нужно через виджет в сайдбаре или в текстовом редакторе. Он ничем не отличается о любого другого HTML кода, единственное, что здесь указан класс конкретного модального окна (eModal-1). Для, созданного вами, второго элемента класс будет eModal-2 и т.п. Дабы не совершить ошибку при вставке кода проще всего копировать его с данной страницы.

Редактирование темы оформления модального окна

В плагине Easy Modal кроме настроек для конкретного элемента вы можете определять темы оформления всплывающих окон (Theme). В базовой бесплатной версии модуля есть только один шаблон, но этого более чем хватает.

В данном инструменте 6 закладок:

• General — указываете название темы;
• Overlay — фон (тут можно выбрать цвет и прозрачность подложки формы);
• Container — разные настройки самого модального окна (отступы, рамка, тень);
• Title — параметры заголовка всплывающего окна (шрифт, тень);
• Content — шрифт и цвет текстов в блоке;
• Close — элемент закрытия формы (текст и оформление).

Как видите, внешний вид можно настраивать как угодно под ваши нужды. У меня получилось вот такая простенькая WordPress форма в модальном окне:

После установки всех настроек на забудьте их сохранить (кликаете по кнопке Save).

Видео добавления Contact Form 7 во всплывающем окне Easy Modal

Кстати, нашел видео по работе с плагином Easy Modal, демонстрирующее процесс создания в вордпресс модального окна обратной связи. Там интерфейс модуля слегка устаревший (некоторые настройки выглядят по другому), но общую суть получается уловить. Возможно, кому-то будет проще разобраться в данном вопросе с помощью видео.

Итого про модальные окна для wordpress

Как уже говорилось выше, сейчас плагин Easy Modal (судя по официальной странице) преобразовали в Popup Maker. В репозитории удалось найти одноименный модуль, но его я не тестировал. Рассказываю вам об этом дабы знали что искать, если вдруг Easy Modal в WordPress последующих версий перестанет работать.

Оба решения бесплатны, хотя и имеют платные дополнения (аддоны). Они позволяют настраивать таргетинг, добавлять больше тем оформления, содержат аналитику а также некоторые другие фишки. Если вам нужен более продвинутый механизм модальных окон, — можете рассмотреть детальнее эти расширения.

Что же касается задачи открытия формы обратной связи Contact Form 7 во всплывающем окне, то тут хватает базовых возможностей Easy Modal. Причем данное решение может использоваться и для вывода других модальных окон в вордпресс — полезных подсказок, дополнительной информации и т.п. Учитывая наличие редактора вставки HTML кода, во всплывающем окне можно показывать видео, формы и т.п. В общем, полезный плагин. Если будут вопросы по нему, пишите в комментариях.

Привет мой любимый читатель! В этом выпуске я расскажу как я реализовал всплывающую форму обратного звонка на сайте WordPress.

Дело в том, что форма обратного звонка очень часто используется большинством вебмастеров именно для удобства пользователей, чтобы они совершили как можно скорее целевое действие – т.е оставили заявку на сайте.

Вы можете часто их видеть на множестве коммерческих сайтов, предоставляющих услуги или предлагающих купить какую – либо продукцию. По сути интернет магазины не полного цикла, т. е когда корзины нет, а есть что-то вроде предзаказа через эту форму. Вот как они могут выглядеть:

Или в виде кнопочки также в шапке сайта:

Кто-то их может использовать и в футере сайта, это тоже допускается. Смотрится вот так:

Итак, друзья. Все это были примеры, теперь мы с вами реализуем такую же форму обратного звонка для сайта на WordPress уже на практике. Делать я ее буду на сайте, занимающемуся благоустройством территории Калининграда.

Первым делом нам нужно войти в и перейти в раздел плагины, где мы с вами добавим новый плагин под названием Contact Form 7. Это самое популярное решение для создания простых и сложных для блогов.

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

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

Теперь нам нужно добавить поля, которые будут участвовать. Они у вас по умолчанию уже стоят, в принципе их можете оставить, не удаляйте. Единственное, что я бы еще добавил обязательное поле с номером телефона.

Для этого нам необходимо в правой части экрана нажать на кнопку «сгенерировать тег» и выбрать соответствующий пункт. Вот таким образом:

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

В левой части у вас будет такая запись:

Разместите поле с номером телефона под .

В левой части шаблон приходящих писем у нас будет такая запись:

Не забудьте поставить также галочку в чекбоксе «Использовать HTML формат письма»

Внизу вам нужно будет строчку такого вида «Please fill in the required field» перевести на русский, примерно так: «Пожалуйста заполните обязательное поле»

В поле адресат добавьте электронную почту куда будут падать заявки с сайта.

Отлично! Форма обратного звонка для сайта почти готова. Теперь нам нужно сделать всплывающий при ее нажатии.

Создание всплывающей формы

Наша задача состоит в том, чтобы при нажатии на кнопку-ссылку у нас появлялась всплывающая форма обратного звонка. Для ее создания нам потребуется специальный плагин, основанный на языке Jquery, называется он – Easy FancyBox. Он также доступен для установки прямо из админки. Давайте теперь добавим его.

Нажимаете просто на «Установить» и он начнет на вас работать. В нем есть настройки для медиафайлов. Можем пробежаться вкратце по ним.

Размеры изображения – устанавливаете свои значения для миниатюр, средних и крупных картинок.

Эффект FancyBox для следующих категорий медиафайлов:

• Картинок
• Pdf документов
• Инлайн контента
• SWF графики
• Youtube
• Vimeo
• Dailymotion
• IFrames

Указываете то, что хотите в дальнейшем использовать. Я оставлю только для картинок.

Также можете задать прозрачность (Opacity) и цвет. Я ничего не задавал, оставил по умолчанию все как есть.

Окно (Window)

• Показывать значок закрытия окна
• Цвет заголовка и цвет рамки вокруг
• Размеры (по умолчанию 560x340x10)
• Поведение (задержка в секундах когда появляется форма обратного звонка на сайте и скорость закрытия).

Совместимость с другими браузерами и устройствами

• Включить правила для браузера IE 6 и 7 версии (стили имеется ввиду)
• Включить правило для стилей к браузеру IE 8

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

Изображения

• Автоопределение для расширений картинок – jpeg, png, jpg. Можете добавить свои расширения
• Применить ко всем изображениям ссылкам
• Далее я просто не изменял настройки, оставил все как есть. Поступайте также.

Здорово! Теперь все это богатство опций сохраним.

Теперь очень внимательно слушаем, смотрим и повторяем за мной. Лучше всего форму обратного звонка ставить на самом видном месте, т.е в самом верху шапки сайта, под телефонами и контактами. Мы так и поступим. Переходим в шаблон header . php и вставляем вот этот код:

Обратный звонок

< a id = "myButton" href = "#contact_form_pop" class = "fancybox" > Обратныйзвонок< / a > < div style = "display:none" class = "fancybox-hidden" > < div id = "contact_form_pop" > < / div > < / div > < / div >

Не пугайтесь, что здесь лишний тег div, в моей верстке сайта он не испортил дизайна и не вызвал ошибку, а в другом случае ошибка была. На разных шаблонах поэкспериментируйте и так, и так.

Обратите внимание на функцию в которой выводится форма:

[ contact - form - 7 id = "92" title = "Форма обратного звонка" ]

Вы спросите, а где ее получить? Все элементарно, Ватсон! Идем в Contact Form 7 -> Формы и там вы увидите шорткод для вставки в любом месте на сайте.

Теперь я сохраню страницу, которую редактировал и посмотрю, что у меня в итоге вышло.

размер полей, шрифт и оформить кнопку «Отправить». Потерпите немного J

Дизайн для формы обратного звонка

Я решил в дизайне поменять размер полей имени, email и телефона. Стандартный input не совсем подходит. Как узнать их правильный класс? Делается это с помощью инспектирования элементов, нажатием правой клавиши мыши и нажав на просмотр кода элемента и внизу вы увидите все элементы и классы.

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