Всплывающая контактная форма (плагины)

Здравствуйте, давайте с помощью бесплатных 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 сек автоматически.

Есть и другие интересные настройки…

На этом всё! Красивых Вам сайтов!

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *