Открытие формы обратной связи в лайтбоксе опубликовал alex@it категория  
просмотры 15 679

Открытие формы обратной связи в лайтбоксе

Рассмотрим вариант с формой сгенерированной с помощью плагина ContactForm7. Об установке, настройке и генерации плагина мы рассказывали в статье Contact Form 7 — конструктор форм для WordPress.

Установка плагина лайтбокса

Для начала нужно будет установить плагин prettyPhoto Media. Об установке и активации плагинов мы рассказывали в статье Установка плагина WordPress через админ панель или FTP.

Создание шаблона страницы

Следующим шагом нам нужно будет создать шаблон страницы которая будет открываться в лайтбоксе. Шаблон должен быть очищен от всего дизайна и содержать стандартный механизм вывода страницы WordPress.


Обратите внимание, что необходимо задать имя шаблона, которое будет отображаться в административной панели WordPress. В нашем случае шаблон называется Form.
Также Вы можете подключить отдельный css для определения внешнего вида содержимого лайтбокса.
Файл шаблона сохраняете (мы его назвали page_form.php) и помещаете в папку Вашей темы.


Создание страницы обратной связи

Следующим шагом нам необходимо создать страницу WordPress, в которую мы вставляем шот-код сгенерированной формы. В разделе «Артибуты страницы» административной консли WordPress необходимо изменить шаблон страницы с базового на созданный нами шаблон Form.
Для удобства подключения лайтбокса мы установили следующий путь к созданной странице: адрес сайта/form/
Открытие формы обратной связи в лайтбоксе - Создание страницы обратной связи

Вставка ссылки в шаблон сайта

Для подключения лайтбокса необходимо в нужном месте требуемого шаблона (в нашем случае это шаблон header.php) разместить следующий код:

где width и height – размеры вашего лайтбокса

Открытие формы обратной связи в лайтбоксе - Вставка ссылки в шаблон сайта
Открытие формы обратной связи в лайтбоксе - Результат

Теги:

12 Комментарий

Оставить комментарий
  1. Илья Июнь 28, 2013 at 8:28 пп #

    Добрый вечер!
    А как можно сделать, чтоб кнопку вызова формы вставить в горизонтальное меню навигации. Как-то ссылкой… Ну и назвать «Для связи»

    • alex@it Июнь 29, 2013 at 2:39 дп #

      Здравствуйте!
      В разделе административной консоли Внешний вид/меню Вы можете добавить в Ваше меню произвольную ссылку. В верхней правой части консоли во вкладке «настройки экрана» в разделе «показывать расширенные свойства меню» выбираете «Классы CSS». Дальше добавляете в меню произвольную ссылку. Прописывате название, которое будет отображаться в меню — «Для связи», адрес ссылки в нашем случае /form/?iframe=true&width=400&height=550 и класс CSS, например PrettyPhoto

      Для того, чтобы ссылка обрабатывалась плагином prettyPhoto Media, в шаблон сайта, например в footer.php нужно вставить следующий скрипт:

      • Илья Июнь 29, 2013 at 1:14 пп #

        Почти получилось!
        Но lightbox почему-то не срабатывает… Перечитывал статью, пересмотрел все и что-то не так. Записал видео, посмотрите пожалуйста http://youtu.be/EufMK3OZSUg

        • alex@it Июнь 29, 2013 at 3:31 пп #

          Попробуйте в скрипте вместе класса css PrettyPhoto использовать класс, который назначает WordPress. В Вашем случае это menu-item-319
          Т.е. скрипт будет выглядеть так:

      • Илья Июнь 29, 2013 at 6:13 пп #

        Когда поменял на «menu-item-319» в меню начало открываться как надо!!
        Получается что почему-то плагин prettyPhoto у меня не работает…
        Пробовал таким же способом сделать с кнопкой «Сделать заказ» сделанную плагином Page builder не получилось. Множество классов перепробовал вставлять в footer.php (и «class=»panel widget widget_origin_call-to-action panel-first-child panel-last-child» и «origin-widget origin-widget-button origin-widget-button-simple-black align-none»).
        Так хотелось в такой красивой полоске сделать при нажатии на кнопку «Сделать заказ»

      • Илья Июнь 29, 2013 at 7:04 пп #

        Огромное спасибо вам! Получилось!!!
        Я был невнимательным.
        Делал так, на кнопке не работало:

        jQuery(function($) {
        $(‘li[class^=»origin-widget origin-widget-button origin-widget-button-simple-black align-none»] a’).prettyPhoto();
        });

        уже потеряв надежду сменил на div:

        jQuery(function($) {
        $(‘div[class^=»origin-widget origin-widget-button origin-widget-button-simple-black align-none»] a’).prettyPhoto();
        });

        и работает!

      • Илья Июнь 29, 2013 at 7:06 пп #

        в кооментариях часть кода исчезла, так работает на кнопке «Сделать заказ» http://imger.ru/jpg/g2yEo0UutGfK7PgR/

      • Gennady Июнь 29, 2013 at 10:17 пп #

        данный селектор li[class^="prettyPhoto"] a относится к ссылке находящейся внутри тега li c атрибутом class начинающимся c prettyPhoto, и если wordpress вставит нужный класс не первым, то работать не будет, более правильный селектор для меню будет иметь вид:
        li.prettyPhoto a — любой тег a внутри тега li c классом prettyPhoto
        т.е для меню получится:

        — неважно каким по счету будет прописан нужный класс…

  2. Денис Июль 8, 2013 at 6:42 пп #

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

    • Gennady Июль 9, 2013 at 5:47 пп #

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

  3. Анастасия Октябрь 8, 2013 at 9:46 пп #

    Добрый день, подскажите пожалуйста, проблема такая же как у Ильи.
    Хочу сделать открытие фрейма на кнопке. Открывает на новой вкладке…
    При вставке в header — все работает нормально.
    Пробовала менять в футере класс как в вышеизложенных примерах… ничего не выходит. Кнопка — изображение в контентном поле.

  4. Юрий Октябрь 26, 2014 at 9:53 пп #

    Я у себя описывал другой способ получения всплывающей контактной формы, там используется связка Contact Form 7 и Fancy Box. Инструкция здесь http://www.yura-blog.ru/blogovedenie/interesnaya-fishka-dlya-bloga-vsplyvayushhaya-forma.html

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

vk_like_site