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

Форма заказа в лайтбоксе

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

Недавно, в своей трудовой деятельности, я столкнулся с тем, что на сайте нужно было сделать форму заказа в лайтбоксе (Lightbox). Лайтбокс дает определенные преимущества, а именно, концентрирует внимание пользователя на содержимом (в нашем случае это форма заказа), и не дает пользователю сайта отвлекаться на остальной контент, так как затемняет полупрозрачным фоном все окружающее пространство.

Для реализации поставленой задачи, мне понадобился простой скрипт  формы обратной связи на php и плагин лайтбокса wp-PrettyPhoto для WordPress, который открывает html страницу как Ифрэйм (iframe).

Далее все достаточно просто...
1. Устанавливаем плагин для wordpress wp-PrettyPhoto и активируем его.
2. Скачиваем скрипт формы обратной связи здесь, и закачиваем его на сайт с помощью FTP-клиента, желательно в корневой каталог сайта (я использовал бесплатный клиент FileZilla). Закачиваем скрипт формы заказа в корень сайта
Основа скрипта состоит из двух файлов, это config.php и form.php. В config.php необходимо будет указать e-mail адрес, куда будут отправляться данные формы заказа или обратной связи, как вам угодно :) А form.php - есть тело формы, и именно на этот файл я прописал ссылку насвоем сайте следующим образом:

<a rel="wp-prettyPhoto[iframes1]" href="/form1/form.php?iframe=true&width=315&height=300">Заказать</a>

В итоге, при нажатии на ссылку "Заказать", у меня открывается лайтбокс, в котором вставлена форма заказа (фото в начале поста).

С формой мне, конечно, пришлось немного повозиться, чтобы из стандартной формы обратной связи сделать форму заказа... Убрал Капчу, отредактировал необходимые поля и подкорректировал файл стилей style.css. Подробнее, как это делается, я написал в этой статье, советую почитать ;)