Wordpress модальное окно обратной связи. Ajax форма обратной связи в модальном окне

Для Windows Phone 11.05.2019
Для Windows Phone

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

Внедрения формы в страницу обычно достаточно, однако что если вы захотите, чтобы форма появлялась во всплывающем окне, когда пользователь кликнет на ссылку Contact Us? Для реализации такого желания необходимо использовать два плагина WordPress одновременно: Easy FancyBox

1. Первым делом устанавливаем плагины и Easy FancyBox .

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

3. Создаем новую страницу в WordPress. Для того, чтобы добавить контактную форму вам нужно вставить код, находящийся в квадратных скобках со страницы настроек Contact Form 7, на вашу страницу. Убедитесь, что вставили код корректно, ровно также как его отображает плагин.

4. Теперь на вашем WordPress есть контактная форма. Мы решили сделать её всплывающей, в модальном окне после клика пользователем на ссылку. В дело вступает плагин Easy FancyBox. С его помощью можно заставить любой элемент страницы отображаться во всплывашке. Открываем редактирование станицы, кликаем на вкладку ТЕКСТ и добавляем следующий HTML-код:

Contact Us

5. Все, теперь у нас есть ссылка, которая «запускает» форму контактов во всплывающем окне. Поздравляем! Вероятно вам придется подправить CSS емейл-формы для корректного отображения ширины и высоты, а также сообщений о возможных ошибках при заполнении. Для начала этого должно быть достаточно.

Приветствую вас дорогой читатель, в этой статье я покажу вам как создать форму обратной связи во всплывающем окне на вашем сайте WordPress. Часто при разработке собственного сайта или блога необходимо установить возможность оперативной связи с посетителями интернет-ресурса. В этом случае как раз и пригодится всплывающая форма обратной связи для wordpress, которая поможет наладить быстрый контакт с пользователями.

Для чего нужна всплывающая форма обратной связи для wordpress

Причины использования

Рассмотрим, для чего нужна такая форма

  1. Экономия свободного места на сайте. Контактная форма может быть размещена где угодно: в подвале или шапке, в основном контенте страницы, в виде плавающей кнопки и т.д.
  2. Эффективное появление. Анимация возникновения нового окна выглядит интересно и необычно
  3. Доступность. Оставить записи в этой форме можно с любого места сайта, пользователям не нужно возвращаться на главную страницу.

Дополнительный бонус: форму легко видоизменить и настроить под нужды вашего сайта. Всплывающая форма обратной связи для wordpress может быть представлена в виде открывающегося окна для заказа звонка, услуги или товара, оформления подписки. При желании можно добавить визуальные эффекты, различные изображения и пр.

Плагины для установки всплывающей формы

Рассмотрим инструменты, необходимые для разработки всплывающих окон в wordpress – специального приложения для разработки и создания сайтов.

Contact Form 7

Данный плагин используется непосредственно для конструирования формы. Для его установки выполните следующие действия:

Easy FancyBox

Данный плагин пригоден для разработки эффекта всплывающего окна. Последовательность установки Easy FancyBox аналогична установке предыдущего плагина.

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

Настроить параметры дополнения Easy FancyBox можно через медиафайлы. Воспользуйтесь опциями меню «Настройки» -> «Медиафайлы».

В открывшемся блоке чуть ниже стандартных настроек будут расположены параметры самого плагина. Здесь обычно стоит галочка напротив пункта «Images», которая указывает на активирование выплывающего окна при клике по изображению. Желательно ее снять, так как при наличии других дополнительных инструментов создания всплывающей анимации будет происходить двойное открытие изображений.

Но это еще не все. Поставьте галочку напротив пункта «Inline content»

Все желающие могут дополнительно покопаться в настройках плагина и выставить их на свое усмотрение.

Совет: если вы хотите, чтобы форма всегда была открыта, тогда снимите в настройках Easy FancyBox галочку напротив опции «Close FancyBox when overlay is clicked», выполняющей функцию закрытия окна при клике мышкой за его пределами.

Пошаговая инструкция

Ну вот, со «скучной» предварительной подготовкой покончено, теперь перейдем к самой «вкусной» части – как, собственно, разрабатывается всплывающая форма обратной связи wordpress.

Обработка окна формы

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

Придумайте новое имя формы, например, «Эксперимент», вбейте его в поле ввода открывшегося окна, где расположен текст «Заголовок», и нажмите на кнопку «Сохранить». Можно изменять и другие параметры, в том числе и сам шаблон формы, но мы его трогать не будем. Сейчас наша главная цель – просто научиться созданию всплывающих форм.

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

Выведение формы

Теперь займемся программированием. Новый программный код можно вставить в любом месте сайта, например, в «Контакты», и других. В нашем примере новая форма будет выведена в виджете. Выберите в меню последовательно «Внешний вид», потом кликните на «Виджеты», затем в открывшемся окне нажмите на опцию «Текст».

Теперь щелкните по кнопке «Добавить виджет»

Вставьте в поле ввода «Содержимое» следующий программный код:

Написать письмо

Вот так будет выглядеть получившийся результат:

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

Дополнительно форму можно отредактировать: добавить или убрать поля ввода, ввести начальный и/или конечный текст до и после формы, преобразовать текст в заголовок или вывести его отдельным блоком, использовать различные стили, плэйсхолдеры и т.д. Были бы время и желание!

Стилизация ссылки

Рассмотрим также два способа преобразования ссылки в кнопку для улучшения ее визуального отображения.

1 способ – использование дополнительных стилей темы.

Приведенный ниже программный код можно вставить следующим образом:


Сам программный код выглядит так:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 /***Отображение ссылки в кнопочном виде****/ .contact-us a{ margin:auto; /*выстраивание блока в центре*/ display:block; width:199px; /*размер кнопки*/ padding:11px 22px; /*внутренние отступы*/ border:1px solid black; /*оттенок рамки*/ background:#3399ff; /*фоновый узор*/ text-decoration:none; /*преобразование надписи в неподчеркнутую*/ text-align:center; /*центрирование надписи*/ color:#ffffff; /*оттенок надписи*/ -moz-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } /**Изменение цвета ссылки при подведении курсора**/ .contact-us a:hover{ -moz-box-shadow: 0 0 7px #111; -webkit-box-shadow: 0 0 7px #111; box-shadow:0 0 7px #111; -moz-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; }

/***Отображение ссылки в кнопочном виде****/ .contact-us a{ margin:auto; /*выстраивание блока в центре*/ display:block; width:199px; /*размер кнопки*/ padding:11px 22px; /*внутренние отступы*/ border:1px solid black; /*оттенок рамки*/ background:#3399ff; /*фоновый узор*/ text-decoration:none; /*преобразование надписи в неподчеркнутую*/ text-align:center; /*центрирование надписи*/ color:#ffffff; /*оттенок надписи*/ -moz-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } /**Изменение цвета ссылки при подведении курсора**/ .contact-us a:hover{ -moz-box-shadow: 0 0 7px #111; -webkit-box-shadow: 0 0 7px #111; box-shadow:0 0 7px #111; -moz-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; }

Получилась такая кнопка:

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

2 способ – использование изображения в виде кнопки. Сначала загрузите на сайт необходимую картинку (любую по вкусу, не обязательно в виде кнопки, — это не имеет особого значения). Для этого щелкните на «Медиафайлы» -> «Добавить новый» и выберите нужный рисунок. Справа от изображения появится постоянная ссылка на файл (в данном примере http://www.sait.ru/wp-content/uploads/2017/04/depositphotos_2169498-E-mail-internet-icon.jpg), скопируйте ее и добавьте в код (кавычки не удалять):

Полученный код добавьте в основной код вывода формы вместо текста «Написать письмо».

1

На моем сайте отобразилась кнопка, приведенная на скриншоте ниже:

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

Добавление в меню

Чтобы всплывающая форма обратной связи для wordpress могла вызываться прямиком из меню, необходимо воспользоваться следующим кодом

1 2 3
  • Написать письмо

  • Написать письмо

    • Сначала нужно разобраться, куда именно необходимо вставить этот код. Зайдите в «Редактор» через «Внешний вид» и среди шаблонов выберите «Заголовок (header.php)»

    Теперь отыщите то место, где расположен код меню. Найдите следующую информацию:

    1 2

      Ниже вставьте ваш код как раз перед закрывающим тегом.

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

      Привет мой любимый читатель! В этом выпуске я расскажу как я реализовал всплывающую форму обратного звонка на сайте WordPress.

      Дело в том, что форма обратного звонка очень часто используется большинством вебмастеров именно для удобства пользователей, чтобы они совершили как можно скорее целевое действие – т.е оставили заявку на сайте.

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

      Или в виде кнопочки также в шапке сайта:

      Кто-то их может использовать и в футере сайта, это тоже допускается. Смотрится вот так:

      Итак, друзья. Все это были примеры, теперь мы с вами реализуем такую же форму обратного звонка для сайта на WordPress уже на практике. Делать я ее буду на сайте, занимающемуся благоустройством территории Калининграда.

      Первым делом нам нужно войти в и перейти в раздел плагины, где мы с вами добавим новый плагин под названием Contact Form 7. Это самое популярное решение для создания простых и сложных для блогов.

      Ни хухры мухры – 24 миллиона закачек уже о многом говорит. Нажимаем на кнопку установить и она появится у нас в левой части панели администратора.

      По умолчанию уже выбран русский язык, так что беспокоиться не стоит. Продолжаем наш процесс.

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

      Для этого нам необходимо в правой части экрана нажать на кнопку «сгенерировать тег» и выбрать соответствующий пункт. Вот таким образом:

      Нажимаем на пункт «Номер телефона», ставим галочку в чекбоксе обязательное поле и затем скопируем получившийся в тег в форму слева вместе с другими наименованиями и в шаблон для письма.

      В левой части у вас будет такая запись:

      Разместите поле с номером телефона под .

      В левой части шаблон приходящих писем у нас будет такая запись:

      Не забудьте поставить также галочку в чекбоксе «Использовать HTML формат письма»

      Внизу вам нужно будет строчку такого вида «Please fill in the required field» перевести на русский, примерно так: «Пожалуйста заполните обязательное поле»

      В поле адресат добавьте электронную почту куда будут падать заявки с сайта.

      Отлично! Форма обратного звонка для сайта почти готова. Теперь нам нужно сделать всплывающий при ее нажатии.

      Создание всплывающей формы

      Наша задача состоит в том, чтобы при нажатии на кнопку-ссылку у нас появлялась всплывающая форма обратного звонка. Для ее создания нам потребуется специальный плагин, основанный на языке Jquery, называется он – Easy FancyBox. Он также доступен для установки прямо из админки. Давайте теперь добавим его.

      Нажимаете просто на «Установить» и он начнет на вас работать. В нем есть настройки для медиафайлов. Можем пробежаться вкратце по ним.

      Размеры изображения – устанавливаете свои значения для миниатюр, средних и крупных картинок.

      Эффект FancyBox для следующих категорий медиафайлов:

      • Картинок
      • Pdf документов
      • Инлайн контента
      • SWF графики
      • Youtube
      • Vimeo
      • Dailymotion
      • IFrames

      Указываете то, что хотите в дальнейшем использовать. Я оставлю только для картинок.

      Также можете задать прозрачность (Opacity) и цвет. Я ничего не задавал, оставил по умолчанию все как есть.

      Окно (Window)

      • Показывать значок закрытия окна
      • Цвет заголовка и цвет рамки вокруг
      • Размеры (по умолчанию 560x340x10)
      • Поведение (задержка в секундах когда появляется форма обратного звонка на сайте и скорость закрытия).

      Совместимость с другими браузерами и устройствами

      • Включить правила для браузера IE 6 и 7 версии (стили имеется ввиду)
      • Включить правило для стилей к браузеру IE 8

      Я ничего в них не указывал, хотя можете поэкспериментировать кросссбраузерность формы.

      Изображения

      • Автоопределение для расширений картинок – jpeg, png, jpg. Можете добавить свои расширения
      • Применить ко всем изображениям ссылкам
      • Далее я просто не изменял настройки, оставил все как есть. Поступайте также.

      Здорово! Теперь все это богатство опций сохраним.

      Теперь очень внимательно слушаем, смотрим и повторяем за мной. Лучше всего форму обратного звонка ставить на самом видном месте, т.е в самом верху шапки сайта, под телефонами и контактами. Мы так и поступим. Переходим в шаблон header . php и вставляем вот этот код:

      Обратный звонок

    < a id = "myButton" href = "#contact_form_pop" class = "fancybox" > Обратныйзвонок< / a >

    < div style = "display:none" class = "fancybox-hidden" >

    < div id = "contact_form_pop" >

    " " ) ; ?>

    < / div >

    < / div >

    < / div >

    Не пугайтесь, что здесь лишний тег div, в моей верстке сайта он не испортил дизайна и не вызвал ошибку, а в другом случае ошибка была. На разных шаблонах поэкспериментируйте и так, и так.

    Обратите внимание на функцию в которой выводится форма:

    [ contact - form - 7 id = "92" title = "Форма обратного звонка" ]

    Вы спросите, а где ее получить? Все элементарно, Ватсон! Идем в Contact Form 7 -> Формы и там вы увидите шорткод для вставки в любом месте на сайте.

    Теперь я сохраню страницу, которую редактировал и посмотрю, что у меня в итоге вышло.

    размер полей, шрифт и оформить кнопку «Отправить». Потерпите немного J

    Дизайн для формы обратного звонка

    Я решил в дизайне поменять размер полей имени, email и телефона. Стандартный input не совсем подходит. Как узнать их правильный класс? Делается это с помощью инспектирования элементов, нажатием правой клавиши мыши и нажав на просмотр кода элемента и внизу вы увидите все элементы и классы.

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

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

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

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

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

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

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

    (Последнее обновление: 08.07.2016)

    Всем огромный привет! Это снова я, с полезным постом - всплывающее окно для WordPress - для начинающих и не только пользователей WordPress. Если вас интересует плагин всплывающего окна WordPress , его ещё называют плагин модального окна, то вы, друзья, попали точно по назначению.

    Плагин, который я представлю чуть ниже, вы можете использовать для: Contact Form 7 в модальном окне; любая контактная форма (обратной связи) в модальном (всплывающем) окне; видео в модальном окне; картинки во всплывающем окне; размещение полезной информации с ссылками; форма подписки по почте на новые статьи в модальном окне и так далее, и так далее всего, и не перечислишь. Плагин совсем простой, без сложных настроек и почти не создающий дополнительную нагрузку на /сайт.

    Плагин Easy Modal - всплывающее/модальное окно для WordPress


    Плагин модального окна для WordPress - Easy Modal

    Установить данный плагин можно стандартным способом, через админпанель - Плагины - Добавить новый и в поле Поиск плагинов вводите название Easy Modal, нажимаете Enter. В списке он должен быть первым. Устанавливаете и как обычно активируете его. А дальше можно переходить к созданию нового модального окна.

    Для этого нажмите на новый появившейся раздел Easy Modal и выберите пункт Modals:

    Easy Modal - создание нового модального окна

    После этого, в самом вверху страницы нажмите кнопку Add New:


    Добавить новое окно

    А здесь, всё просто:


    Создание всплывающего окна с видео

    В общих настройках (вкладка General) даёте имя нового окна (отображаться оно не будет, это для вас, если например, вы создадите несколько модальных окон); тип загрузки Load Sitewide (для всего сайта); заголовок окна и наконец вставляете в редактор (режим Текст) нужный вам код. У меня в примере вставлен код видео с YouTube.


    Настройка модального окна

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

    На вкладке Examples вы найдёте примеры кода для вывода всплывающего окна в WordPress:

    Код вывода модального окна в WordPress

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

    Код модального окна с видео я вставил в сайдбаре в виде кнопки:

    Кнопка на боковой панели блога

    Посетитель нажимает на неё и открывается окошко с видео:


    Модальное окно с видео

    Надеюсь, друзья и товарищи, общий принцип работы с плагином Easy Modal вам понятен. Только лишь добавлю, что вы можете потом или сразу для модального окошка оформить внешний вид, нажав пункт Theme. К сожалению, в бесплатной версии плагина есть только одна тема для оформления, но её вы можете оформить как угодно, настроек достаточно. При настройке внешнего вида модального окна тут же вы можете видеть справа предпросмотр оформления:


    Редактирование темы - оформления модального/всплывающего окна

    После всех настроек внешнего вида окна нажимайте кнопку справа Save (Сохранить). И напоследок, дамы и господа, покажу пример вывода контактной формы Contact Form 7 в модальном окне.

    Создайте новое модальное окно, как показано выше и в текстовый редактор просто вставьте шорткод Contact Form 7 (если у вас установлен этот плагин, если нет, ):


    Создания Contact Form 7 в всплывающем окне
    Кнопка написать автору после сообщения

    Если читатель захочет связаться с вами, то он нажмёт кнопку и контактная форма откроется в модальном окне:

    Форма для связи с автором в модальном окне

    Вот, как то, так. Ещё, все ваши созданные всплывающие окна будут отображаться на странице (пункт Modals), где кстати, указаны классы для каждого модального окошка:


    Созданные модальные окна на WordPress

    Рекомендуем почитать