Здравствуйте, давайте с помощью бесплатных wordpress плагинов создадим всплывающую контактную форму.
Скачать исходники для статьи можно ниже
Для этого нам понадобится установить два плагина:
– Popup Maker;
– Contact Form 7 (можно выбрать другой плагин форм, например: Ninja Forms, Gravity Forms и др. – главное чтобы можно было использовать шорткод для вставки формы на сайт).
1. Устанавливаем плагин Popup Maker, сведения о плагине (на момент публикации статьи) :
Количество активных установок: 300,000+
Последнее обновление: 4 недели назад
Сайт плагина: “wordpress.org/plugins/popup-maker/”
Автор плагина: WP Popup Maker
Установка и активация плагина стандартная – через панель управления wordpress (пункт “Плагины” , подпункт “Добавить новый” в левом меню админки wordpress).
После активации плагина в левом меню админки появится новый пункт “Popup Maker”, заходим в него и выбираем подпункт “Add Всплывающее окно”:
К сведению, у данного плагина есть 6 тем оформления всплывающего окна, которые можно выбрать и благодаря настройкам изменить под себя – для этого в нижней панели нужно выбрать пункт “Отображение”:
Давайте для нашего примера устаеовим тему Light Box:
Далее кликаем на кнопку “Опубликовать”:
2. Устанавливаем плагин Contact Form 7, сведения о плагине на момент публикации статьи:
Количество активных установок: 5 млн. +
Последнее обновление: 2 месяца назад
Сайт плагина: “ru.wordpress.org/plugins/contact-form-7/”
Автор плагина: Takayuki Miyoshi
Установка и активация плагина стандартная – через панель управления wordpress (пункт “Плагины” , подпункт “Добавить новый” в левом меню админки wordpress).
После активации плагина в левом меню админки появится новый пункт “Contact Form 7”, заходим в него и выбираем подпункт “Добавить новую”:
Придумываем название, всё остальное можно оставить по умолчанию и жмем на кнопку “Сохранить” :
После чего у нас появляется шорткод данной формы:
Копируем его.
3. Возвращаемся к созданному нами ранее всплывающему окну – для этого в левом меню админки выбираем пункт “Popup Maker”, заходим в него и выбираем подпункт “All всплывающие окна”:
Здесь мы видим созданнаное нами всплывающее окно Myform – кликаем по нему:
Переходим на вклалку “Текст” и вставляем скопированный шорткод формы:
Далее жмем кнопку “Обновить”.
4. Создадим кнопку для открытия всплывающего окна.
Переходим в нужную запись или создаем новую, открываем вкладку “Текст” и вставляем следующий код:
<button class="popmake-myform-2">Контактная форма!</button>
В шорткоде главное указать класс всплывающего окна, в данном примере:
class=”popmake-myform-2″
Где найти имя класса созданной вами всплывающей формы?
Для этого нужно войти в левом меню админки в пункт “Popup Maker”, и выбрать подпункт “All всплывающие окна” и встолбике “Классы CSS” копируем класс всплывающего окна:
В данном примере это: popmake-myform-2
Сохраняем и опубликовываем запись и переходим на неё, в итоге видим следующее:
Жмем на кнопку “Контактная форма!” и у нас открывается всплывающее окно с контактной формой внутри:
Также появление всплвающего окна можно настроить на автоматическое.
Например появление окна через 3 секунды автоматически – для этого в левом меню админки в пункт “Popup Maker”, и выбрать подпункт “All всплывающие окна”, далее выбираем созданную нами форму и в нижней панели настроек заходим в пункт “Триггеры” и жмем на кнопку “Добавить новый триггер”:
В открывшемся окошке выбираем Time delay / Auto open:
И жмем кнопку “Добавить”.
В следующем окошке устанавливаем 3000 ms (3 сек):
И жмем на кнопку “Добавить”.
Всё теперь наше всплывающее окно будет появляться через 3 сек автоматически.
Есть и другие интересные настройки…
На этом всё! Красивых Вам сайтов!
