Окт
19
53

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

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

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

Детально останавливаться на установке и настройке 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, демонстрирующее процесс создания в вордпресс модального окна обратной связи. Там интерфейс модуля слегка устаревший (некоторые настройки выглядят по другому), но общую суть получается уловить. Возможно, кому-то будет проще разобраться в данном вопросе с помощью видео.

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

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

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

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

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 4, средний балл: 7,00 из 7)
Загрузка...

категория Категории: Плагины;
теги Теги: , , , , , .

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

  • Сергей   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 для этой страницы, проверить могли ли повлиять на нее какие-то установленные модули. Либо, если ничего не помогает, обратиться в поддержку хостинга, где размещен сайт.

Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

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

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости