WordPress форма обратной связи — плагин Contact Form 7

Ромчик
19

Contact Form 7Доброго времени суток, уважаемый читатель блога web-programming.com.ua. Сегодня мы остановимся на плагине для WordPress — Contact Form 7. Плагин Contact Form 7 позволяет создать нам форму обратной связи. А как Вы понимаете, что форма обратной связи для интернет ресурса является одной из важнейших составляющих для сайта. Поэтому мы и остановимся на столь важном вопросе, как создание формы обратной связи для WordPress. А поможет нам в этом, как уже говорилось выше, плагин Contact Form 7. Ну, что ж, давайте приступим к установке и настройке плагина для WordPress Contact Form 7…

[adsense][/adsense]

Скачать плагин можно с официального сайта. Установка плагина производиться стандартным образом и не требует каких либо усилий.
А вот с настройкой могут возникнуть вопросы. Поэтому давайте подробно рассмотрим настройку плагина Contact Form 7.
После того, как Вы установили и активировали данный плагин, переходим к его настройке.

Меню настройки плагина Contact Form 7Окно настроек плагина Contact Form 7 состоит из нескольких частей:

  1. Настройка title Вашей формы и кода формы.
  2. Непосредственно настройка самой формы (редактирования полей)
  3. Настройка адресата.

Обновленная статья по настройкам Contact Form «Настраиваем Contact Form для WordPress. Часть 1» и вторая часть «Настраиваем Contact Form для WordPress. Часть 2«

Рассмотрим настройку title.

Изменение заголовка формыВ данной области мы можем изменить заголовок для нашей формы обратной связи просто кликнув по заголовку “Форма для контактов 1” и введя необходимы заголовок нажать по “Сохранить”.
Настройка самой формы.

Настройка самой формыВ данной области мы можем добавлять/удалять поля в нашу форму. А также указывать какие поля являются обязательными для заполнения.
Для того чтобы добавить дополнительное поле, необходимо нажать по “Сгенерировать тег” и из выпадающего списка выбрать тип необходимого поля.

Добавление полей в формуДавайте для примера добавим текстовое поле, которое будет являться обязательным для заполнения. Для этого жмем по “Сгенерировать тег” и выбираем “Текстовое поле”

Добавление текстового поля в формуСтавим галочку напротив “Обязательное поле?”, тем самым мы указываем, что данное поле является обязательным для заполнения.
В поле “имя” вводим название нашего поля, например, message.
Теперь копируем предложенный нам код и вставляем его в правую часть

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


<p>Сообщение<br />
[textarea your-message] </p>

И на его место вставим наш код:


<p> [textarea* message]</p>

И немного его изменим


<p>Сообщение(обязательно)<br />
          [textarea* message]</p>

Должно получиться следующее:


<p>Ваше имя (обязательно)<br />
 </p>

<p>Ваш E-Mail (обязательно)<br />
[email* your-email] </p>

<p>Тема<br />
 </p>

<p>Сообщение<br />
<p>[textarea* message]</p>

<p>[submit "Отправить"]</p>

Обратите на порядок отображения полей, поля будут отображаться по порядку сверху вниз.
На этом настройка формы закончена.
Да, еще Вы можете добавить поле “Captcha” для предотвращения спама. Но для этого Вам понадобиться установить дополнительный плагин Really Simple CAPTCHA.
Настройка адресата.
В начале изменим сообщение

Структура сообщенияТак, как поля с именем your-message  уже нет, то удалим его. А на это место вставим:
[message]
И должно получиться следующее:


От: [your-name] <[your-email]>
Тема: [your-subject]

Тело сообщения:
[message]

--
Это сообщение отправлено посредством контактной формы на Все о WEB программировании https://web-programming.com.ua

На этом настройка тела сообщения завершена.
Настроим адресата.

Настройка адресатаВ поле “Адресат” вводим e-mail адрес на который будем отправлять сообщение.
В поле “Отправитель” указываем  параметры от кого поступило сообщение.
В поле “Тема” настраиваем отображение темы сообщения, которое ввел отправитель.
В поле “Дополнительные заголовки” вводим дополнительные заголовки сообщения.
В поле “Прикрепленные файлы” указываем какие файлы необходимо прикрепить к сообщению.
Также можно использовать второй адрес для получения данного сообщения. Это настраивается в поле “Использовать Адресат (2)”
На этом настройка формы обратной связи закончена. Осталось добавить ее на наш ресурс.

Добавление Формы обратной связи на сайт.
Для этого создадим на нашем ресурсе еще одну страницу. И назовем ее “Обратная связь”.

Меню страницВведем все необходимые данные. В заголовок страницы введем “Обратная связь”. А в само тело страницы подставим раннее предложенный код


[contact-form-7 404 "Not Found"]

Только редактор нужно перевести из визуального режима в режим html. И нажмем опубликовать.
Теперь перейдем на наш сайт:

Обратная связьи видим, что наша страница Обратной связи создана. Перейдем на нее.

Страница обратной связиИ так у нас все получилось, единственная проблема — это нашу страницу “Обратной связи” могут комментировать пользователи. А этого нам не надо. Давайте исправим это. Перейдем в админке WordPress: Страницы->Все страницы и перейти на свойства нашей страницы

Настройка страницы Формы обратной связиТеперь в окне свойств страницы надо убрать галочку с “Разрешить комментарии” и нажмем «Обновить»

Запрет комментирования страницы с формой обратной связиТеперь можем перейти на наш сайт и посмотреть страницу обратной связи. Все мы видим, что на данной странице комментарии запрещены. Пример использования плагина Contact Form 7, Вы можете посмотреть на этом блоге.

На этом статью, посвященную созданию формы обратной связи завершена. И хотелось бы отметить, что при помощи плагина Contact Form 7 можно создавать не только форму обратной связи. Плагин Contact Form 7 — это плагин создания форм и Вам уже решать как и где  его применять. А на этом все.
Если Вам понравились материалы данного блога, то подпишитесь на RSS-рассылку, чтобы не пропустить выхода новых статей, или ищите меня в twitter.

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

  • Art - 25.07.2012 в 09:48

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

    • Roman - 25.07.2012 в 09:54

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

  • Art - 25.07.2012 в 10:05

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

  • Евгений - 11.12.2012 в 21:02

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

    • Roman - 11.12.2012 в 22:08

      Немного не понял вопрос. Страница обратной связи одна. И Вы можете вставить любой адрес в письмо.

  • Павел - 22.02.2013 в 09:01

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

    Сейчас они очень большие и выглядит это некрасиво.

    Спасибо.

    • Roman - 22.02.2013 в 09:17

      Вся форма лежит в div с классом wpcf7 каждое поле лежит в теге p. С помощью CSS меняете отступ.

    • Павел - 22.02.2013 в 09:51

      Спасибо) Помогло.

  • Вера Кейда - 14.03.2013 в 22:58

    Спасибо большое за понятное объяснение. У меня все получилось.сделать.

  • Виталий - 20.04.2013 в 10:08

    У меня после нажатия на кнопку Отправить начинают крутится стрелки, но сообщение не отправляется. из-за чего такое может быть?

    • Roman - 20.04.2013 в 20:58

      Может быть несколько причин. Скорее всего у хостера запрещена отправка писем.

  • Андрей Бугаев - 05.10.2013 в 22:27

    Повторюсь как писали ранее но после отправки крутятся стрелки и на этом все…. у хостера разрешена отправка писем. Куда копать? Могу дать доступ к проекту дабы умельцы могли поправить или направить…

  • Ирина Истирина - 15.11.2013 в 08:10

    Спасибо за пошаговое, подробное объяснение,

  • Василий - 02.03.2014 в 11:38

    У меня домен на кирилице в зоне РФ соответсвенно почтовый адрес выглядит mail@сайт.рф при использование такой почты обратная связь не работает а с другим почтовым ящиком работает не подскажите может есть другой плагин обратной связи!

  • Андрей - 10.04.2014 в 15:43

    Здравствуйте.Спасибо за Ваш труд,все понятно и все настроил.Подскажите,как я могу настроить саму капчу?Я уже скачал really simple captcha,попробовал ее прописать,сами буквы установились,а поля куда их вводить нет.Как можно исправить или может что то другое лучше?

  • Zawer - 25.06.2014 в 21:26

    Настроил форму на сайте http://www.home-engineer.ru , но не знаю как прописать в css доп. настройки.

  • Ромчик - 26.06.2014 в 06:19

    @Zawer
    В основном файле css темы. Так, например, у меня на сайте форма лежит в div-е с id=»wpcf7-f12-p205-o1″ и class=»wpcf7″, ну и дальше смотреть.

  • Максим - 04.07.2014 в 15:23

    Добрый день! Я составил на базе Contact Form 7 опросный лист для клиентов и посетителей сайта. Существует ли возможность как-нибудь задать стили для тела сообщения, чтобы приходящее письмо приобрело вид некоего бланка, соответствующего корпоративному стилю фирмы? Спасибо.

  • Анна - 05.08.2014 в 15:20

    Действительно, на хостере была выключена функция php mail(). Обратитесь к ним, или сами включите в админ панели.

  • ©2012-2017 По всем вопросам обращайтесь через форму обратной связи

    Яндекс.Метрика