Не пропусти
Главная 20 Интернет 20 Открытие формы обратной связи в лайтбоксе
thumbn - Открытие формы обратной связи в лайтбоксе

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

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

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

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

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

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

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



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

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

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

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

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

текст ссылки

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

22 600x396 - Открытие формы обратной связи в лайтбоксе
31 600x398 - Открытие формы обратной связи в лайтбоксе

О admin

Оставить комментарий

x

Check Also

div bloki - Про тег div замолвим мы слово

Про тег div замолвим мы слово

Добрый день друзья! Как то в своих нескольких уроках по html я говорил и употреблял такое понятие как div верстка. У вас наверняка возникли вопросы, ...

addresspic - Что такое html тег address и как он работает?

Что такое html тег address и как он работает?

Всем хорошего и бодрого утра! На линии обучения азам сайтостроительства Макс Метелев и сегодня мы рассмотрим такой интересный тег, который применяется в html 5 версии ...

1f642 9 - Как правильно подключить шрифты в CSS на сайте?

Как правильно подключить шрифты в CSS на сайте?

Всем привет дорогие друзья! Наконец то к сайту вернулась посещаемость, а то с праздниками народ вообще подзабил на полезные статьи. Ну это понятно, кто в ...

bigstock website building 10145534 1 - Как выбрать бесплатный конструктор сайта?

Как выбрать бесплатный конструктор сайта?

Всем привет дорогие друзья и читатели моего блога! Средства, облегчающие процесс создания веб-сайтов создаются постоянно, с тех пор как к Интернету получил доступ обычный обыватель. ...

website contact us icons post internet page concept icon five paper isolated white background 32678534 - Идея для бизнеса: разработка иконок для сайта

Идея для бизнеса: разработка иконок для сайта

Основной принцип. Когда человек первый раз попадает на веб сайт, то первое на что он обращает свое внимание – это иконки для заголовков. Именно по ...

1f642 8 - Как скруглить углы и края в фотошопе

Как скруглить углы и края в фотошопе

Рад снова и снова видеть вас мои дорогие читатели! Сегодня очередной урок по фотошопу и расскажу сегодня как скруглить края (углы) у фото или картинки ...

1f642 7 - Как скруглить края или углы у картинки онлайн

Как скруглить края или углы у картинки онлайн

Добрый день друзья и подруги! Рад вас всех видеть в обновленном составе. Почему в обновленном? Да потому как активность ваша на блоге растет с каждым ...

2012 Ford Mustang LX Red - Оптимизация картинок на сайте с помощью полезных сервисов и программ

Оптимизация картинок на сайте с помощью полезных сервисов и программ

Всем привет друзья! В этой статье я расскажу про важность оптимизации изображений и картинок на вашем сайте, без разницы используете ли вы CMS WordPress, Joomla ...

choosing colors - Как подобрать цвета для своего сайта? Обзор 4 сервисов

Как подобрать цвета для своего сайта? Обзор 4 сервисов

Всех снова рад видеть! В этой статье я расскажу как наилучшим образом сделать подбор цвета для вашего сайта, мы вместе с вами определим лучшие цвета ...

razrabotka dizajna sajta - Разработка качественного и продающего дизайна сайта

Разработка качественного и продающего дизайна сайта

В реалиях современного интернет-бизнеса дизайн сайта уже не является исключительно эстетическим элементом, он выполняет рекламные функции, а главное – может стать конкурентным преимуществом. Существует немало ...

sklikivaniye 300x226 - Скликивание рекламы

Скликивание рекламы

Скликивание рекламы Всем привет! Данная статья будет посвящена такому вопросу, как скликивание рекламы. Частично суть проблемы была описана в данном посте, но чаще всего под ...

addstudio 300x171 - Promo-soft AddStudio

Promo-soft AddStudio

Promo-soft AddStudio Всем привет! На данном блоге давно не было обзоров SEO софта и поэтому сейчас постараюсь исправиться. На этот раз виновником торжества; стала программа ...

add2board 300x219 - Promo-soft Add2Board

Promo-soft Add2Board

Promo-soft Add2Board Всем привет! Я продолжаю обзор SEO софта от компании Promo-soft и на этот раз речь пойдет про Add2Board. Основное предназначение программы  автоматическая рассылка на ...

addsite 300x205 - Promo-soft AddSite

Promo-soft AddSite

Promo-soft AddSite Всем привет! Как вы уже, наверное, заметили я делаю обзор всей линейки программ от Promo-soft  и сегодня на очереди AddSite . До этого ...

xrumer7crack 300x168 - Xrumer 7.0.12 Elite and Hrefer 3.85 взломан

Xrumer 7.0.12 Elite and Hrefer 3.85 взломан

Xrumer 7.0.12 Elite and Hrefer 3.85 взломан Всем привет! Собственно новость не первой свежести, но до этого многие полагали что это фейк и что взломанного ...

keycollector 300x173 - Key collector

Key collector

key collector Всем привет! В этой статье будет дан небольшой обзор программы, без которой не представляют себе жизнь многие оптимизаторы key collector ( кей коллектор). ...