Окт
19

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

Author admin    Category Полезное     Tags

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

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

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

Модуль 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.

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

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

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

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

Easy Modal - настройка модального окна

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

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

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

Модальное окно для конкретных постов и страниц

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

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

Display Options - настройки отображения модального окна

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

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

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

Easy Modal - примеры отображения модального окна

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

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

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

Темы оформления модального окна

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

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

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

Contact Form 7 в модальном окне

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

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

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

[embedded content]

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

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

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



Прокомментировать

Новые шаблоны и статьи

Рубрики

Популярные шаблоны

Мы помогаем детям


KosynokBannerNetwork