Всплывающая форма обратного звонка на сайте WordPress

Привет мой любимый читатель! В этом выпуске я расскажу как я реализовал всплывающую форму обратного звонка на сайте WordPress.

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

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

Или в виде кнопочки также в шапке сайта:

Кто-то их может использовать и в футере сайта, это тоже допускается. Смотрится вот так:

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

Первым делом нам нужно войти в админ панель блога и перейти в раздел плагины, где мы с вами добавим новый плагин под названием Contact Form 7. Это самое популярное решение для создания простых и сложных форм обратной связи для блогов.

Ни хухры мухры – 24 миллиона закачек уже о многом говорит. Нажимаем на кнопку установить и она появится у нас в левой части панели администратора.

Нажимаем на название и далее выбираем «Добавить новую»

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

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

Теперь нам нужно добавить поля, которые будут участвовать. Они у вас по умолчанию уже стоят, в принципе их можете оставить, не удаляйте. Единственное, что я бы еще добавил обязательное поле с номером телефона.

Для этого нам необходимо в правой части экрана нажать на кнопку «сгенерировать тег» и выбрать соответствующий пункт. Вот таким образом:

Нажимаем на пункт «Номер телефона», ставим галочку в чекбоксе обязательное поле и затем скопируем получившийся в тег в форму слева вместе с другими наименованиями и в шаблон для письма.

В левой части у вас будет такая запись:

Разместите поле с номером телефона под адресом электронной почты.

В левой части шаблон приходящих писем у нас будет такая запись:

Не забудьте поставить также галочку в чекбоксе «Использовать HTML формат письма»

Внизу вам нужно будет строчку такого вида «Please fill in the required field» перевести на русский, примерно так: «Пожалуйста заполните обязательное поле»

В поле адресат добавьте электронную почту куда будут падать заявки с сайта.

После всех этих действий не забудьте сохранить изменения, нажав на кнопку в правой верхней части экрана.

Отлично! Форма обратного звонка для сайта почти готова. Теперь нам нужно сделать всплывающий эффект при ее нажатии.

Создание всплывающей формы

Наша задача состоит в том, чтобы при нажатии на кнопку-ссылку у нас появлялась всплывающая форма обратного звонка. Для ее создания нам потребуется специальный плагин, основанный на языке Jquery, называется он – Easy FancyBox. Он также доступен для установки прямо из админки. Давайте теперь добавим его.

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

Нажимаете просто на «Установить» и он начнет на вас работать. В нем есть настройки для медиафайлов. Можем пробежаться вкратце по ним.

Размеры изображения – устанавливаете свои значения для миниатюр, средних и крупных картинок.

Эффект FancyBox для следующих категорий медиафайлов:

• Картинок
• Pdf документов
• Инлайн контента
• SWF графики
• SVG
• Youtube
• Vimeo
• Dailymotion
• IFrames

Указываете то, что хотите в дальнейшем использовать. Я оставлю только для картинок.

Ссылки и затемнение области с контентом (Overlay) : первый чекбокс – показывать затемнение вокруг контента, открытого в FancyBox, второй – закрыть форму, при клике на затемненную область.

Также можете задать прозрачность (Opacity) и цвет. Я ничего не задавал, оставил по умолчанию все как есть.

Окно (Window)

• Показывать значок закрытия окна
• Цвет заголовка и цвет рамки вокруг
• Размеры (по умолчанию 560x340x10)
• Поведение (задержка в секундах когда появляется форма обратного звонка на сайте и скорость закрытия).

Совместимость с другими браузерами и устройствами

• Включить правила для браузера IE 6 и 7 версии (стили имеется ввиду)
• Включить правило для стилей к браузеру IE 8

Я ничего в них не указывал, хотя можете поэкспериментировать кросссбраузерность формы.

Изображения

• Автоопределение для расширений картинок – jpeg, png, jpg. Можете добавить свои расширения
• Применить ко всем изображениям ссылкам
• Далее я просто не изменял настройки, оставил все как есть. Поступайте также.

Здорово! Теперь все это богатство опций сохраним.

Теперь очень внимательно слушаем, смотрим и повторяем за мной. Лучше всего форму обратного звонка ставить на самом видном месте, т.е в самом верху шапки сайта, под телефонами и контактами. Мы так и поступим. Переходим в шаблон  header.php  и вставляем вот этот код:

Не пугайтесь, что здесь лишний тег div, в моей верстке сайта он не испортил дизайна и не вызвал ошибку, а в другом случае ошибка была. На разных шаблонах поэкспериментируйте и так, и так.

Обратите внимание на функцию в которой выводится форма:

Вы спросите, а где ее получить? Все элементарно, Ватсон! Идем в Contact Form 7 -> Формы и там вы увидите шорткод для вставки в любом месте на сайте.

Теперь я сохраню страницу, которую редактировал и посмотрю, что у меня в итоге вышло.

размер полей, шрифт и оформить кнопку «Отправить». Потерпите немного J

Дизайн для формы обратного звонка

Я решил в дизайне поменять размер полей имени, email и телефона. Стандартный input не совсем подходит. Как узнать их правильный класс? Делается это с помощью инспектирования элементов, нажатием правой клавиши мыши и нажав на просмотр кода элемента и внизу вы увидите все элементы и классы.

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

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