Как сделать всплывающее окно связи в WordPress

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

Но сам плагин не создает всплывающего окна. Когда его активировать (вставить шоткод на нужную страницу) — появится поле для заполнения формы, которое занимает много места и смотрится некрасиво. Шоткод для вставки ( пример: [contact-form-7 404 "Not Found"]) создается автоматически после создания новой формы связи и его необходимо вставить на страницу или виджет.

Для всплывающего окна надо загрузить еще один плагин — Eacy FancyBox. После активации плагин находится в разделе: меню-настройки-медиафайлы. В настройках плагина необходимо выбрать нужные опции ( всплывание при нажатии на изображение или ссылку).

Плагин существует не только для создания всплывающих окон, но и для красивого оформления просмотра медиа-файлов на сайте. Если у вас включен Lightbox для просмотра изображений, плагин Eacy FancyBox создаст новое всплывающее окно поверх Lightbox и вам придется после просмотра закрывать сразу 2 окна. По этому, Lightbox лучше отключить. Далее можно оформить в фото-редакторе (например, photoshop) красивую надпись и даже изображение, потом загрузить его на свой сайт, скопировать url  и вставить этот url в следующий код:

<a href=»#contact_form_pop» class=»fancybox-inline»><img title=»ваше название формы связи» alt=» контактная форма » src=»ссылка на ваше изображение«></a>

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

<div id=»contact_form_pop»>

[вставить сюда ваш шоткод contact form 7]

</div>

</div>

Код можно вставить куда угодно: в хедер, футер, сайдбар, или на страницу.

Новый метод всплывающей формы связи

Дописываю 11 марта — 2018 год. Нашел более интересный способ создать обратную связь — кнопка со всплывающим окном. Делаю такие кнопки в двух визуальных редакторах страниц + Popup Maker + Contact form 7:

  1. Elementor (бесплатный плагин для визуальной разбивки страниц на части с последующим внедрением разных элементов;
  2. Fussion Builder от темы Avada — мега крутой плагин с контейнерами для страниц, но идет в комплекте с мультиконструктором

Установите на wordpress плагины контактной формы и всплывающего окна (popup maker и contact form 7). О форме связи есть уйма материалов, ее настроить проще простого. Опишу немного плагин попап мейкер. Ставится он стандартно. После установки виден в админке. Сначала создаем в нем новое всплывающее окно связи, настраиваем внешний вид, ширину и длину, потом вставляем шоткод нужной формы:

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

Вот как это выглядит в плагине визуального редактирования Elementor:

А вот еще вариант всплывающего окна обратной связи на базе конструктора Авада. Также есть кнопка, в которую вставляется шоткод:

Вид в админке:

Вообще то можно прописать и без визуальных конструкторов, используя прямое редактирование файлов css, но мне так удобнее и быстрее

От | 2018-08-17T12:37:54+00:00 Февраль 14th, 2017|WordPress, Как создать красивый сайт|0 Комментариев

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