Окт

Модальное окно для Contact Form 7 в wordpress (Easy Modal)

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

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

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

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

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

Настройка плагина Easy Modal

После установки появится одноименный раздел, где есть несколько пунктов. Нам понадобится самый первый из них — 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 кода, во всплывающем окне можно показывать видео, формы и т.п. В общем, полезный плагин. Если будут вопросы по нему, пишите в комментариях.

Оцените статью:

(голосов - 4, средний балл: 7,00 из 7)

Загрузка...

Категории: Плагины;

Теги: wordpress формы, вордпресс веб-разработка, вывод информации, интересные плагины, настройки плагина, полезные плагины.

комментария 53 к статье “Модальное окно для Contact Form 7 в wordpress (Easy Modal)”

← Ранее 1 2

Сергей 02.01.2017
Спасибо! Разобрался в чем причина. Выход нашел следующий:
На моем сайте если ставить свойство открытия для страниц, то easy models не работает. Решил поставить «для всего сайта» — получилось!
Ирина 12.02.2017
Спасибо автору за статью и Сергею за подсказку! У меня тоже заработало, только если ставить загрузку для всего сайта
Ника 16.02.2017
Здравствуйте!
Установила плагин согласно инструкции, все работает прекрасно.
Есть одно но:
В настройках внешнего вида мод.окна предлагают несколько шрифтов для содержимого, на выбор. Как выбрать шрифт, отличный от того, что предлагает настройка темы модального окна?
Пробовала прописать класс и «фонт-фэмили» в файле стилей с пометкой «импортэнт», для заголовка модального окна сработало, а для основного текста -нет. Основной текст формы остается без изменений.
Подскажите, можно ли как-то исправить ситуацию и поставить именно тот шрифт, который мне нужен?
Tod 16.02.2017
Ника, если у вас получилось подправить через CSS заголовок в форме, тогда по логике с текстом можно поступить также. Если же это не срабатывает, то 2 варианта — либо настройка прописана непосредственно в коде html (что важнее important) либо ошибка в css при указании стиля. В любом случае дистанционно без какой-либо информации я вам помочь не смогу.
Ника 16.02.2017
Вариант поступить так же, как с заголовком (через стили)почему-то не срабатывает. В заголовке шрифт поменялся, в основном тексте -нет. Возможно, проблема именно в том, что, как Вы упомянули, настройка прописана в самом html, но точно сказать не могу, т.к. я новичок-самоучка и многого еще не знаю.

К сожалению, ссылку на сайт дать не могу, т.к. сайт пока стоит на Денвере на моем компьютере.

Если это поможет разобраться, могу вместо адреса сайта сбросить Вам скрин-шот HTML-кода элемента (тот, что открывается через функцию «просмотреть код» в браузере Гугл Хром).
Tod 17.02.2017
Ника, пришлите информацию на почту stod84@gmail.com, гляну.
Екатерина 16.03.2017
Огромное спасибо за статью. Уже отчаялась настроить плагин, но к счастью наткнулась на этот материал. Все дело было в настройке «загрузка для всего сайта»
Tod 16.03.2017
Екатерина, рад, что вам пригодилось. Там по Contact Form 7 много интересных хаков, не успеваю все опубликовать. Но уже запланировал.
Елена 07.04.2017
Здравствуйте!
Не могу настроить форму с текстом -Имя, емайл, тел. Как это сделать?

С уважением, Елена
Tod 07.04.2017
Елена, при установке плагина Contact Form 7 создается пример формы. Вы можете отредактировать эти поля, убирав лишние и заменив названия на нужные вам значения.
Виталий 02.05.2017
День добрый! Как сделать, чтобы форма сама закрывалась после заполенния полей?
Tod 02.05.2017
Виталий, по идее, нужно через скрипты добавить обратку данного события, но если честно, без понятия как это конкретно можно сделать. Погуглите в англоязычных блогах, возможно, кто-то с таким сталкивался. Предположительно ключи — contact form 7 auto submit, contact form 7 auto send. Возможно, если добавить для плагина формы автоматическую отправку содержимого, то и окно будет закрываться.
Елена 18.05.2017
Добрый день!
Все сделала как описано, и кнопочка прекрасно встала на сайт где нужно (в шапке) вот только она на открывает форму, не пойму что не так? В чем может быть причина?
Tod 18.05.2017
Елена, модуль слегка «нестабильный», у некоторых пользователей в комментариях также не получалось его применить + на странице отзывов на их сайте вижу, что не всегда срабатывает. Я бы попробовал еще разок все переустановить и постепенно потестировать все варианты: 1) настроить форму на отдельной странице — если работает, то 2) добавить ссылку для модального окна в контент — если окей, то 3) вынести кнопки в шапку. Так можно локализовать проблему.
Ну, или как вариант, предлагаю посмотреть новый модуль разработчиков — Popup Maker. Там вроде и загрузок побольше и работа стабильнее.
Ирина 13.09.2017
Со вчерашнего дня после установки плагина сайт стал очень медленно загружаться и обновляться при работе в админке.
Tod 13.09.2017
Ирина, к сожалению, от этого никто не застрахован, придется искать другой модуль на замену, т.к. медленная скорость это плохо.
Марина 19.10.2017
Бьюсь 4ые сутки..никак

Кнопка есть. Ссылка есть. Картинка..но по клику не открывается.
В чем может быть проблема???
спасибо, скоро плакать буду, ничего не получается(((
Tod 22.10.2017
Марина, попробуйте плагин Popup Maker.. отписался вам на почту по поводу проблемы, виртуально без просмотра сайта не смогу подсказать.
Денис 16.02.2018
Модальные окна я для форм этого плагина делал https://ru.wordpress.org/plugins/ucalc/ Сами модалки без плагинов, на jquery набросал и чуть эффектов animate добавил
morehack 21.07.2018
Спасибо большое! Очень помогли, самая крутая статья!
Легко и удобно создал окно и вставил форму связи! Админку печенек!!!
Валерий 05.08.2019
Хороший способ, тоже использовал. Сейчас начал формы с модальными окнами через stepform.io/ru делать Там почти также настраивается все.
CredDorq66 24.09.2019
Здравствуйте! Скажите пожалуйста, в чем причина не могу прочитать последние добавленые посты!?, при клике по статье появляеться сообщение в котором ошибка «401» :( уже как целый день эта проблема…
Tod 24.09.2019
CredDorq66, я как-то писал статью про HTTP коды статусов и там сказано, что 401 код — это когда для входа на страницу нужна аутентификация (то есть ввод логина/пароля). Если это ваш сайт, то надо посмотреть настройки WordPress для этой страницы, проверить могли ли повлиять на нее какие-то установленные модули. Либо, если ничего не помогает, обратиться в поддержку хостинга, где размещен сайт.