Веб-мастерская EQQE / 21.04.2017 / Статьи

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

Всплывающая контактная форма wordpress

Приветствую Вас, мои дорогие! Рада видеть вас на моем сайте lu-web.ru.

Сегодня будем создавать форму обратной связи с помощью супер-плагинов Contact form 7 и Shortcodes Ultimate.

Вот так это выглядит в жизни:

Для тех, кто не хочет читать дальше, просто скопируйте данный код и вставьте свои данные:

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

[[su_lightbox type="inline" src="#order-sert" class="order-sertf-main"][su_button] Нажми на меня [/su_button]
[su_lightbox_content id="order-sert"][contact-form-7 id="1154" title="Оформить заказ"][/su_lightbox_content]
[/su_lightbox]]

Contact form 7 — это плагин создания контактных форм, самый популярный в репозитории WordPress очень гибкий и дружелюбный, если вы немного разбираетесь в коде.
Shortcodes Ultimate — это плагин шорткодов. Позволяет добавлять:
— Видео Youtube.
— Аудио записи.
— Документы.
— Анонсы записей.
— Стильные кнопки.
— Лайтбокс окна.
— Google карта.
— Вкладки.
— Таблицы.
— Колонки.
— Анимация.
— Спойлер и аккордеон.
— Заметки.
— Галерея.
— Слайдер.
— И многое другое !

И так, начнем.

- - Для начала скачайте данные плагины и установите их себе на сайт, как обычно.
- Всплывающая контактная форма wordpress — дальнейшее действия:
  Далее переходим к созданию контактной формы на админ панели Contact form 7. Можете для примера использовать уже готовую форму, поставляемую вместе с плагином.
- Создайте новую запись или страницу.
  Далее нам необходимо сначала создать содержание лайтбокса (модальная форма обратной связи). Заходим в раздел «шорткоды»
  
  Добавляем содержимое лайтбокса (модальная форма обратной связи)
- В открывшемся окне необходимо заполнить обязательно два поля
  - ID — любой идентификатор вашей формы, например, contact-form
  - Содержание лайтбокса (модальная форма обратной связи) — здесь вы прописываете шорткод контактной формы, созданной в плагине Contact form 7
  Остальное вы заполняете на свое усмотрение, если не пользуетесь пользовательским файлом стилей. И нажимаете «Вставить шорткод».
- Далее вам необходимо создать сам лайтбокс (модальная форма обратной связи).
  для этого опять переходим в меню «Вставить шорткод» и выбираем «Лайтбокс»
  
  Заполняем поля:
  - Тип содержимого Html, Здесь же прописывает id, заданый в предыдущем пункте для содержимого лайтбокса (модальная форма обратной связи).
  - Указываем каким образом будет отображаться наша кнопка, например, «Заказать»
- Вот и все!
  Вот как выглядит кнопка на сайте:
  
  А так выглядит модальное окно при нажатии на кнопку.