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

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

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

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

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

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


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

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

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

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

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

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

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