Формы обратной связи на сайте – плагин Contact Form 7
Абсолютно всем сайтам нашего времени нужны формы обратной связи, которые в своем классическом виде и в большинстве иных случаев предоставляют возможность посетителям задать владельцам компании свой вопрос – вопрос о продукте или услуге, запрос коммерческого предложения, отправить отзыв и многое другое.
Предполагаем, что и вам понадобится на сайте своя форма обратной связи, потому как в большинстве бесплатных шаблонов функционал форм не включен в сборку, поэтому здесь мы расскажем, как нивелировать это упущение.
Изложенный далее материал может быть использован как независимая информация о самом плагине “Contact Form 7” , а так же и в рамках наших инструкций по самостоятельному созданию сайта, которая начинается здесь, и данная статья – ее продолжение.
Знакомьтесь – плагин Contact Form 7
Это крайне популярный плагин и большинство сайтов используют именно его, чтобы организовать обратную связь посетителям сайта.
Безусловно, вы можете поискать и другие плагины, но в наших инструкциях мы советуем работать именно с ним, потому как он достаточно простой и удобный, а также имеет возможность различных интеграций, включая и защиту от спама.
Переходим в консоли Вордпресс в раздел Плагины 
Добавить новый
В поле поиска вводим слово на английском языке, в нашем случае это слово “Contact Form 7” .
Анализируем полученные результаты:
На скрине выше мы уже поставили этот плагин. А вам нужно сперва его Установить, затем Активировать, эти кнопки вы увидите в том же месте, где сейчас выводится статус “Активен” .
Настраиваем форму в плагине Contact Form 7
После активации плагина в вертикальной левой колонке вы увидите новый раздел с подразделами:
Описание пунктов:
- Контактные формы – все формы, которые вы создали для сайта.
- Добавить новую – добавление новой формы, но вы можете продублировать любую созданную, просто наведите на ее название мышку.
- Интеграция – здесь можно добавить защиту от спама, что является обязательной процедурой, если не хотите, чтобы на вашу почту ежедневно сыпались десятки ненужных писем.
Т.к. по умолчанию форма уже создана, то мы уже можем добавить ее на наш сайт.
Проверяем, какие поля для ввода созданы, для чего кликаем по названию формы:
Созданные поля:
- Ваше имя
- Ваш email
- Тема
- Ваше сообщение
- И кнопка “Отправить” в конце формы.
В предложенном наборе полей для нас лишнее наверное поле “Тема” и не хватает поля для ввода телефона.
Вы можете заменить текст в поле на свой ЛИБО добавить по аналогии собственное поле, для чего просто копируете либо удаляете нужный фрагмент кода:
Чтобы добавить в форму телефон, нажмите на эту кнопку в шаблоне формы:
Откроется всплывающее окно, где можете указать доп.параметры, например, “Обязательное поле” :
Нажимаете на кнопку “Вставить тег” и добавляете ему код окружения по аналогии с другими полями (<label> Ваш телефон … </label>), вот так:
И сохраняете форму, кнопка “Сохранить” прямо под ней.
Форма готова, теперь приступим к ее установке на сайт.
Установка Contact Form 7 на страницу
Для начала нужно определиться, на какую страницу сайта добавляем форму обратной связи. В классическом жанре это страница “Контакты” .
Для добавления формы на сайт, нам нужно скопировать и вставить в нужное место сайта так называемый шорткод:
Копируем, открываем нашу страницу “Контакты” и в нужное место вставляем скопированный текст:
Важно: в некоторых шаблонах уже прописаны стили (оформление формы), которые поддерживают данный плагин и его формы, поэтому такие формы после добавления на сайт сразу визуально интегрируются в дизайн и ничем не выделяются, все гармонично.
Итак, сохраняем нашу страничку и смотрим ее в браузере на сайте:
Ура! Форма поддерживается шаблоном, поэтому смотрится все сразу гармонично.
Но пользоваться формой пока не получится, т.к. нам нужно сперва настроить почту, куда будет отправляться сообщения с формы, и сам текст письма.
Настройка письма в Contact Form 7
Вновь идем в консоль сайта и слева выбираем раздел “Contact Form 7” , далее кликаем по названию нашей формы и внутри формы кликаем на вкладку “Письмо” :
Описание блоков и полей:
- [tel-122] – это наш добавленный в форму телефон. Он выделен жирным, что говорит о том, что этот [tel-122] элемент не используется в письме. Копируете и добавляете в блок “Тело письма” .
- Кому – адрес получателя, ваш адрес почты.
- От кого – здесь нужно указать обратный адрес почты, он может совпадать с адресом “Кому” . Вы можете также указать почту посетителя, который отправил форму. Его почта находится в этой конструкции: [your-email] .
- Дополнительные заголовки – можно упустить (почистите поле).
- Тело письма – по сути, само письмо и данные, которые вы получите на свою почту после заполнения формы на сайте. Главное, чтобы все данные из формы были добавлены, например, чтобы приходил номер телефона, нужно добавить:
Телефон: [tel-122]
После добавления изменения сохраните форму.
Поздравляем!
Вы закончили настройку формы приема писем от посетителей на нашем сайте и вы можете провести тест – зайдите на страничку “Контакты” , заполните форму и проверьте свою почту.
Делитесь, сохраняйте, чтобы не забыть:
