Contact form 7- форма обратной связи для WordPress

В этой статье разберем как установить и настроить плагин Contact form 7 для формы обратной связи у сайтов созданных на WordPress.
Форма будет выглядеть отдельной страничкой и ее можно будет выбрать из пункта меню. Страничка обратной связи может содержат различные поля такие стандартные как «Имя», «Email», «Тема письма» и поле для самой сути вопроса. Но также можно добавлять свои специфические поля, например если вам нужно прикрепить файл или поле номера телефона.


Данный плагин очень популярен, у него более миллиона установок.

Установка

Для начала нужно установить плагин на веб сайт. В админ меню «Плагины >> Добавить новый«, в строке поиска введите «Contact form 7«, найдется нужный плагин, нажмите «Установить» и «Активировать«.

Настройка

 

После установки плагина в админ панели WordPress появится новый пункт, называется он так же как плагин «Contact form 7»

Перейдем в пункт меню «Contact form 7 >> Формы«. По умолчанию после установки тут всего одна форма и она называется «Контактная форма 1«. Можно ее отредактировать и сделать контактной формой сайта. Но давайте рассмотрим как все создается с нуля.
Вверху странички возле пункта формы есть кнопка «Добавить новую«, нажимаем на нее и создаем новую контактную форму для приложения на WordPress. В появившемся окне нужно дать название формы (по сути название шорткода). Например «Форма для страницы обратной связи«.
Ниже уже есть готовый шаблон формы, там уже есть некоторые поля, не нужные можно удалить, а можно что то наоборот добавить, например телефон или поле для прикрепления файла. Для этого поставите курсор в большой области «Шаблон формы«, над этим полем найдите кнопку «Телефон» и нажмите ее, появится всплывающее окно.

В этом окне нужно настроить новое поле, указать обязательное оно или нет, можно указать значение по умолчанию. Поле «Имя» — это по сути идентификатор конкретно этого тега т.к. полей с телефоном можно добавить сразу несколько.
Поле «Атрибут id» и «Атрибут class» указываются если предполагается использование css для дизайна этих полей.
В самом низу окна отображается код тега, который вставится в форму, и кнопка «Вставить«, нажимаем ее и код тега вставится в то место куда был перед этим помещен курсор. Вставляется только поле, название что это «Телефон» нужно дописывать самим по образцу имеющихся полей.

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

В этой вкладке необходимо прописать информацию в некоторые поля.
Поле «Кому» тут указывается на какой email будет отправлена информация из контактной формы.
Поле «От кого«, по умолчанию в этом поле тег имени который был создан во вкладке «Шаблон формы«.
Далее идет email, он обязателен без него форма не пройдет валидацию. Если у вас данные с контакт формы не отправляются, не приходят на почту, создайте почтовый ящик на хостинге с названием wordpress@[ваш домен]. Например, на этом сайте домен 3wblog.org, значит email будет таким wordpress@3wblog.org.
Поле «Тема» это то, что будет в теме письма, по умолчанию тут прописан тег «тема» созданный во вкладке «Шаблон формы» и тот текст который пользователь введет в поле «Тема» в контактной форме поместится сюда.
Поле «Тело письма» — это само письмо которое будет приходить на почту. По умолчанию тут вся информация есть, все теги уже добавлены, но мы добавляли поле телефона и чтобы эта информация попала в письмо, тег этого поля нужно прописать в «Тело письма«, просто скопировать и вставить.
Обратите внимание, если во вкладке «Шаблон формы» вы меняете теги которые там уже были по умолчанию или добавляете новые, то поменяйте их и во вкладке «Письмо«.
Внизу под полем «Тело письма» есть опция «Использовать HTML-формат письма«, ее можно включить, тогда в поле «Тело письма» можно будет использовать HTML теги.
Поле «Прикрепленные файлы«, если на вкладке «Шаблоны формы» вы добавили теги «Файл«, то их нужно прописать именно в этом поле.
Все сохраняем, и нам дается под названием формы код.

Мы копируем код и далее создаем новую страницу на веб ресурсе. В админ меню «Страницы >> Добавить новую«. Скопированный код нужно вставить не в «Визуальном«, а в «Текстовом» редакторе. Называем созданную страницу например «Контакты«. Далее опубликуем страницу нажав на кнопку «Опубликовать«. Для просмотра странички нажимаем на ссылку «Посмотреть страницу» в самом верхнем меню.

Получилась простая и рабочая форма обратной связи.

Если заполнить форму и отправить ее, то на наш email должно прийти письмо, это тот email что указан в пункте меню «Настройки>>Общие«

Добавить комментарий