Создаем в WordPress форму обратной связи

Всем привет! В этом уроке мы создадим и настроим форму обратной связи, называемую в простонародье «контактной формой». Поможет нам любимый мною плагин Contact Form 7, благодаря которому на создание функциональной и красивой формы времени понадобится немного. Плагин русифицирован, поэтому проблем в его освоении у вас не возникнет (о популярности этого дополнения к базовым возможностям WordPress говорит количество скачавших его с репозитория: три миллиона пользователей!)

Приготовьтесь читать – я постарался подробно объяснить все этапы, поэтому урок получился длинным.

Алгоритм создания в WordPress контактной формы

1. Установите плагин Contact Form 7 (об установке плагинов я рассказывал в специальном уроке). Активируйте его.
2. В боковом меню вашей админпанели появился раздел Contact Form 7. Войдите через него в подраздел Контактные формы.
3. В перечне форм скопируйте код из строки Контактная форма 1.
4. Создайте страницу Контакты (или откройте для редактирования любую другую) и вставьте в нее скопированный код. Нажмите Опубликовать (или Обновить, если вы редактировали страницу).

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

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

Алгоритм создания формы с нуля в Contact Form 7

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

• обязательное для заполнения поле Имя
• поле Фамилия
• обязательное для заполнения поле Телефон
• поле выбора удобного для звонка времени

Определившись с полями, создайте форму:

1. Перейдите в подраздел Добавить новую раздела Contact Form 7 в боковом меню админпанели (слева).
2. Кликните Добавить новую. По умолчанию язык формы будет русским. Для изменения языка выберите нужный из выпадающего списка.
3. В верхнее поле загрузившегося редактора форм впишите заголовок создаваемой формы. На вкладке Шаблон формы находится код нескольких стандартных полей. Соседняя вкладка, Письмо, позволяет настроить правильный email и содержимое письма, которое вы получите после заполнения пользователем формы. На следующей вкладке можно настроить сообщения, которые увидит пользователь после успешной или неудачной отправки формы.
4. Перейдите в Шаблон формы и удалите из него весь код, кроме строки с кнопкой Отправить.
5. Создайте новое обязательное поле Имя. Для этого кликните Текст. Отметьте «птичкой» чекбокс в строке Обязательное поле. Скопируйте сгенерированный шорт-код и вставьте его в Шаблон формы (или нажмите Вставить тег). Разместите над ним название поля, заключенное в теги < p >.
6. Повторите описанные выше операции для создания полей Телефон и Фамилия. Для поля Фамилия чек-бокс в строке Обязательное поле отмечать не нужно. Теперь Шаблон формы должен выглядеть так:
7. Создайте поле Удобное для звонка время. Нажмите В раскрывающемся меню и впишите варианты в поле Выбор (по одному в строке). В нашем примере это двухчасовые интервалы в диапазоне от 08:00 до 20:00.
8. Скопируйте и добавьте готовый код в Шаблон формы, которая после этого получит следующий вид:
9. Кликните Сохранить.
10. Скопируйте шорт-код созданной формы и вставьте его на нужной странице. Опубликуйте (обновите) страницу. Если ошибок вы не допустили, то получите такую форму заказа обратного звонка:

Это значит, что форма работает. Вы добавили на сайт еще один канал общения со своей целевой аудиторией. Только что вы с нуля сконструировали форму заказа обратного звонка. Поздравляю!

Конечно, на первый взгляд приведенный алгоритм действий кажется сложным. Чтобы избавиться от этого неприятного ощущения, создайте в Contact Form 7 свою первую форму. Вы удивитесь, как это быстро и легко!

Часто блогеры устанавливают стандартную контактную форму. Она хорошо выполняет свою задачу, но иногда ведь хочется большего, согласитесь?

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

Помните! На странице с контактной информацией форма обратной связи должна быть обязательно!