WordpressПлагины

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

contact form 7 shortcode

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

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

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

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

Нажми на меня

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

(удалите лишние скобки по краям кода, чтобы он выглядел вот так: Всплывающая форма wordpress)

[[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="27" title="Форма обратной связи"][/su_lightbox_content]
[/su_lightbox]]

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

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

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

      Остальное вы заполняете на свое усмотрение, если не пользуетесь пользовательским файлом стилей. И нажимаете «Вставить шорткод».

    • Далее вам необходимо создать сам лайтбокс (модальная форма обратной связи).
      для этого опять переходим в меню «Вставить шорткод» и выбираем «Лайтбокс»
      всплывающая контактная форма wordpress
      Заполняем поля:

      • Тип содержимого Html, Здесь же прописывает id, заданый в предыдущем пункте для содержимого лайтбокса (модальная форма обратной связи).
        всплывающая контактная форма wordpress
      • Указываем каким образом будет отображаться наша кнопка, например, «Заказать»
        всплывающая контактная форма wordpress
    • Вот и все!
      Вот как выглядит кнопка на сайте:
      всплывающая контактная форма wordpress
      А так выглядит модальное окно при нажатии на кнопку.
      всплывающая контактная форма wordpress

Успехов в работе!

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

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