Сделать форму обратной связи на сайте в лайтбоксе (lightbox) wp-prettyPhoto
Опубликовано: 05.09.2018
Недавно, в своей трудовой деятельности, я столкнулся с тем, что на сайте нужно было сделать форму заказа в лайтбоксе (Lightbox). Лайтбокс дает определенные преимущества, а именно, концентрирует внимание пользователя на содержимом (в нашем случае это форма заказа), и не дает пользователю сайта отвлекаться на остальной контент, так как затемняет полупрозрачным фоном все окружающее пространство.
Для реализации поставленой задачи, мне понадобился простой скрипт формы обратной связи на php и плагин лайтбокса wp-PrettyPhoto для WordPress, который открывает html страницу как Ифрэйм (iframe).
Далее все достаточно просто...
1. Устанавливаем плагин для wordpress wp-PrettyPhoto и активируем его.Инструкция - Пункт 4: Форма обратной связи в лайтбоксе (во всплывающем окне) в Adobe Muse
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. Подробнее, как это делается, я написал в этой статье , советую почитать ;)
Подписывайтесь и получайте полезные статьи на почту!