Окт

Модальное окно для 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 Далее →

Константин 11.12.2015
Здравствуйте. Не могу понять где поставить галочку для вывода мод.окна. Все сделал по инструкции, но при клике на ссылку или кнопку не открывается. Подскажите в чем проблема может быть. Спасибо.
Tod 11.12.2015
Константин, я помню, у меня разок не срабатывало, приходилось заново переустановить модуль и с нуля опять все настроить. Точно отмечена галочка выводить модальное окно на всех страницах сайта? (для теста можно сначала сделать).
Второй нюанс, который приходит на ум — проверить есть ли в шаблоне футера функция wp_footer(). Некоторые модули/скрипты без нее не работают.
Константин 11.12.2015
Я пытаюсь установить в шапку сайта и понял что не прокатит такой вариант?
Tod 12.12.2015
Константин, почему же, ссылку на модальное окно можно вставить куда одного — хоть в шаблон, хоть в контент. Возможно, где-то ошиблись в установке. Теоретически, должно работать.
Роман 11.01.2016
Что-то тоже не сработало у меня. По всякому пробовал, но вообще никакой реакции. И через картинку пробовал и ссылкой и просто текстом через span, но не работает.
Tod 12.01.2016
Роман, попробуйте добавить в футер функцию wp_footer() ну или еще разок переустановить плагин.
Роман 12.01.2016
wp_footer() у меня есть в футере. Попробую переустановить.
Рустам 24.07.2016
Всё получилось. Спасибо! За исключением одного. Нет заднего фона под модулем, который фонировал бы все страницу. В Вашем случае, он серый.
Tod 25.07.2016
Рустам, по идее, должно быть где-то в настройках.
Степан 21.10.2016
Здравствуйте. У меня проблема с изменением цвета кнопки для всплывающего окна. Как можно изменить цвет кнопки и текста в ней?
Tod 21.10.2016
Степан, если в настройках модуля нет опции изменения цвета, тогда нужно прописать соответствующие CSS стили для кнопки в файл style.css. Для цвета фона используется свойство background-color.
Степан 21.10.2016
Можете показать пример кода? И как определить конкретную кнопку?
Tod 21.10.2016
Степан, в Хроме с помощью контекстного меню (правая кнопка мышки) можно выбрать пункт Inspect и посмотреть код конретного элемента. Находите класс для своей кнопки, а потом добавляете цвет по типу .class-button {background-color: #4d90fe;} (без знаний CSS немного сложно объяснить).
Степан 24.10.2016
Цвет кнопки поменял с горем паполам, а вот цвет текста в этой кнопке не меняется почему то.
Tod 25.10.2016
Степан, для цвета текста используется другое свойство .class-button {color: #eeeeee;} Возможно, там идет конфликт с другими стилями, поэтому можно прописать данный цвет следующим образом .class-button {color: #eeeeee !important;}
Степан 25.10.2016
Tod,
/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */

button,
button[disabled]:hover,
button[disabled]:focus,
input[type=’button’],
input[type=’button’][disabled]:hover,
input[type=’button’][disabled]:focus,
input[type=’reset’],
input[type=’reset’][disabled]:hover,
input[type=’reset’][disabled]:focus,
input[type=’submit’],
input[type=’submit’][disabled]:hover,
input[type=’submit’][disabled]:focus {

color: #F5F5F5 !important;
border:1px solid #ccc;
background:#2674C8;
padding:10px 20px;
display:block;
text-align:center;
text-decoration:none;
width:200px;
/*margin:auto;*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}

В файле style.css этот кусок кода. Здесь я менял фон кнопки, все работает. Но цвет букв все равно не меняется а остается черным.
Tod 25.10.2016
Степан, нужно смотреть HTML код кнопки (в Хроме с помощью контекстного меню (правая кнопка мышки) можно выбрать пункт Inspect). Возможно, там есть какой-то стиль у кнопки дополнительный. Это все button/input общие значения для кнопок.
Степан 25.10.2016
Tod, Да есть. Но где он находится в коде понять не могу :(
button class=»eModal-1 gradient_» style=»color: rgb(0, 0, 0) !important; cursor: pointer;»>
Tod 25.10.2016
Степан, если цвет указан через style в самом HTML то стилями, по идее, его «не перебить». Нужно просмотреть файлы модуля и найти указанную вами конструкцию button class=»eModal-1 gradient_» style=»color: rgb(0, 0, 0). В настройках плагина/формы точно нет выбора цвета?
Степан 25.10.2016
Tod, Easy Modal плагин через который делал кнопки. Там я нашел настройки только для самого окна, а настроек для кнопки нет. Получается мне нужно найти страницу где эта кнопка и там уже отредактировать?
Tod 25.10.2016
Степан, пришлите на почту stod84@gmail.com ссылку на страницу сайта с формой, я посмотрю.
Ольга 01.11.2016
Здравствуйте! Спасибо — модуль отлично работает, но у меня не выходит его вставить как пункт меню. Подскажите как сделать так, чтобы кнопка отображалась в списке меню и при нажатии всплывало окно. Все, что пробую — открывает новую страницу и там уже сама модалка
Tod 02.11.2016
Ольга, единственное, что приходит в голову — попробуйте создать пункт меню без ссылки в wordpress. Если не получится, то придется формировать вывод меню через функцию wp_nav_menu с параметром echo=0 дабы не выводить меню сразу, а предварительно его обрабоать. И там уже убрать ссылку на страницу, которая срабатывает до модального окна.
Рустам 02.11.2016
Модуль хорош, использую. Возник правда один момент. В виджете темы WP есть кнопка, но в настройках дает прописать только url. Вот как можно сделать так, что бы вместо ссылки открывалось модальное окно. Вставка шорткода модального окна проблему не решает.
Tod 02.11.2016
Рустам, если честно, не совсем понял о чем речь. Если не получается использовать для модального окна специальном виджет темы, попробуйте создать обычный HTML виджет, где прописать нужный код для модального окна. И дальше уже оформить этот блок похожим на ту кнопку.
Роман 17.12.2016
Скажите пожалуйста, вот есть модуль кнопки, у этой кнопки есть настройки «ссылка» как мне сделать так чтобы при нажатии на эту ссылку открывалось модальное окно с contactform
Tod 17.12.2016
Роман, в последней вкладке настроек Easy Modal есть примеры. Нужно чтобы ваша кнопка содержала похожий код. Насколько я помню, там только класс специальный добавляется «eModal-1», и тогда сработает модальное окно.
Роман 17.12.2016
Но там в настройках нет функции для уже готовой кнопки(на ссылку уже готовую), там только либо на картинку либо кнопки через емодал, просто есть уже красивые готовые кнопки, а через е модал нужно в коде ковыряться чтоб переоформить кнопки, кто нить может помочь?
Сергей 01.01.2017
Всех с Новым годом!
У меня проблема. Уже второй день ломаю голову над всплывающей формой заявки. Сделал ее в Контакт форме 7.
Сначала пробовал запустить ее через плагин fancybox — при нажатии на ссылку окно появлялось, но без формы, чисто шордкод виден был.
Решил установить Easy Model. Делал все по инструкции. При нажатии на ссылку, находящуюся внизу страницы меня перекидывает вверх в центр (в область где должна по настройкам появиться форма заявки,но сама заявка не появляется). Помогите разобраться. В HTML особо не разбираюсь., но думаю по инструкциям в состоянии что-либо сделать. Спасибо
Tod 02.01.2017
Сергей, к сожалению, сказать что-то новое отличное от текста статьи не могу — рассмотрел там все нюансы. Можете глянуть в конце поста видео об интеграции модулей, возможно там найдете какую-то подсказку. Также советую сначала настроить корректное появление формы (например с текстом каким-то), а потом уже добавлять туда Contact Form 7. Попробуйте удалить оба модуля, а потом с самого начала пройти весь алгоритм, проверить, что всплывающее окно работает, фто форма показывается на отдельной странице и потом добавляйте ее в форму.
Если все равно не получится, придется гуглить и смотреть форум поддержки по плагину, вдруг ошибка не только у вас и появляется в более новых версиях модулей.