Разное

Fancybox модальное окно с формой: Модальные окна на Fancybox 2

03.01.2023

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

Skip to content

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

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

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

В настройках плагина необходимо выбрать нужные опции ( всплывание при нажатии на изображение или ссылку).

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

ваше название формы связи» alt=» контактная форма » src=»ссылка на ваше изображение«>

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

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

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

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

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

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

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

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

Также есть кнопка, в которую вставляется шоткод:

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

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

А может вам надо кнопку быстрого заказа для woocommerce?

Обновление от 2021.05.14 — сама свежая информация о всплывающих окнах

Сейчас май 2021. На данный момент работаю с 2-мя темами — Avada (для сайтов), о которой я писал немного выше и Woodmart — для интернет-магазинов.

Всплывающее окно связи в Avada

В теме Avada придумали свое всплывающее окно и даже свою форму связи без необходимости загружать плагины Contact Form 7 и Popup Maker.

Для этого надо вставить на страницу кнопку и специальный элемент Modal. Дать элементу название и прописать это название в кнопке, в разделе «Modal Window Anchor». Один элемент Modal с одной формой связи (одним содержимым) может работать на всех кнопках страницы. Его не надо ставить под каждой кнопкой. В случае, если надо разные формы связи (спросить, заказать, узнать цену и т. д.), тогда надо создавать еще один элемент Modal.

Вот видео:

Всплывающая форма связи в теме Woodmart на конструкторе WPBakery

В теме Woodmart, которая в паре с плагином Woocommerce дает возможность создавать потрясающие интернет-магазины, есть также свой элемент — Popup, в который можно вставить контактную форму 7 или другой контент.

Видео:

Page load link

Go to Top

обзор 3 плагинов и настройка

В статье разберём как вставить contact form 7 во всплывающее окно. Скажу сразу принцип построен на связке с плагином Popup maker, который идеально совместим и не изменяет внешнего вида первого. Начнём с пошагового разбора с детальными инструкциями.

Создание новой формы contact form 7

Для начала создадим первый проект в contact form 7, с тремя полями имя, телефон и почта. Стандартный набор подходящий для сбора контактных данных в обратной связи. Сделали проект, теперь надо скопировать либо записать шорт код. С ним будем работать детальнее.

Как сделать интеграцию в PopupMaker

Устанавливаем PopupMaker, стандартно через административную панель поиском, либо скачиваем отсюда. После установки появиться в меню wordpress новый пункт, заходим и вводим новое модальное окно.

  1. Путь к добавлению нового всплывающего окна
  2. Название, оно не будет отображаться на сайте
  3. Заголовок попапа, если не нужно, то не пишем
  4. Шорт код из contact form 7

Далее спускаемся вниз. Нужно определить при каких условиях будет всплывать попап.

  1. Раздел Триггеры
  2. Нажимаем кнопку Добавить
  3. Выбираем один из двух триггеров, по нажатию какого либо элемента (открыть) или авто открытие, то есть по истечению какого либо времени.
  4. Добавляем

Выбрав “открыть”, появятся следующие опции. Задаём уникальный класс, я сделал .otkryt-modelnoe, с ним работаем дальше.

В contact form 7 существует поддержка cookie, поэтому можно добавить различные настройки где отображать или скрывать. Будет полезным поиграться с автооткрытием, но это тема других статей.

Теперь добавим класс к любому элементу в статье, например к ссылке на главной странице. Создадим новую запись, в ней вставим ссылку с прикреплением класса. Как видим на картинке, сначала во вкладке “визуально” создали ссылку, после перешли в текст и туда записали комбинацию.

class="otkryt-modelnoe"

Обновили или сохранили запись, обязательно проверяем работу на странице блога. Нажимая на “текст ссылки” отображается всплывающий элемент, а в нём наша форма созданная в contact form 7, оформление fancybox выставил.

Для данной операции подойдут плагины FancyBox и Easy Modal, но с ними операция боле сложная, приходиться писать код.

Всплывающее окно после заполнения и отправки

Разберём другой случай, когда модальное окно нужно после заполнения и отправки, то есть по достижении нажатия на кнопку “отправить”. С данной целью справиться плагин Popup for Contact Form 7, располагается здесь. Устанавливаем и активируем, после появится новый раздел.

  1. Раздел General Settings
  2. Основными настройки, выставляете галочками к каким проектам добавить постоповещение, настраиваем размеры окна (длину, ширину), а так же автоматическое закрытие, в нашем случае 5000 миллисекунд
  3. Сохраняем.

В Popup Text пишем содержимое, существует возможность применения стандартного редактора wordpress. В Popup Design делаем внешний вид, цвет шрифта и заднего фона. После сохранения проверяем работу.

Инструмент минимален, для более глубокой разработки и настройки внешнего вида понадобятся небольшие знания css. Отмечу наличие способов без применения плагинов при помощи скриптов, применяя хуки contact form 7, но не советуем их брать, ввиду сложного применения, и не всегда корректного поведения.

Таким не хитрым методом мы смогли создать модальное всплывающее окно, а в нём работающая по всем правилам, например, обратная связь или звонок.

Теперь вывести на сайте всплывающее окно легче легкого, ведь появился плагин My Popup WPShop.

P.S.  Для любителей смотреть прикладываю видео обзор:

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

jquery — Не удается создать модальное окно Fancybox

спросил

Изменено 2 года, 9 месяцев назад

Просмотрено 671 раз

У меня проблемы со стилем модального окна, которое я настроил на открытие с помощью модного окна.

Содержимое для модального / div отображается после нажатия без проблем, но кажется, что все стили, которые я применил к этому модальному div, отказываются отображаться.

 .скрытый{
дисплей:нет;
}

.красный{
фон: красный;
} 
 

<голова>
  <мета-кодировка="UTF-8">
  
  
  модальный
  
   

  
  
<тело>
  <дел>
     
Открыть модальное окно
<дел> <дел>

Здравствуйте

Вы великолепны.