Как в WordPress добавить форму обратной связи.

Опубликовано автором Владимир Меньшиков


Этот пост станет замечательным окончанием эффективного для меня дня, сегодня я установил на свой блог форму обратной связи, а сейчас я хочу рассказать Вам как это можете сделать Вы. Но сначала давайте подумаем, а нужна ли вообще эта форма?
Обратная связь с посетителями нужна нам для получения информации от наших читателей, рекламодателей и позволяет им задавать нам вопросы, не пользуясь комментариями, с этим не поспоришь. Для создания такой связи можно на сайте указать свой e-mail, аську, телефон и т.д. И если последнее для серьезных организаций обязательно, я имею ввиду телефон, то размещение своего адреса эл.почты чревато последствиями:
  • открыто размещенный е-майл рискует попасть в базу СПАМеров, а убрать его оттуда уже ну никак. результат-ежедневно 10-100 писем рекламного характера на Ваш адрес, Вам обеспечено.
  • существует вероятность потери клиента. Всегда найдется человек которому нужна Ваша услуга или информация, которую Вы распространяете. Представьте, посетитель готов заказать у Вас то что ему нужно, но не может отправить письмо по е-майл. Причины могут быть самыми разнообразными: он вошел в сеть с чужого компьютера; ему тяжело открывать свою почтовую программу и т.д.
Эти минусы «прямого контакта» перетекают в плюсы формы обратной связи, кроме этого, посетителю гораздо проще составлять свое сообщение заполняя готовые поля. Ну а Вам, поданную таким образом информацию, обрабатывать будет проще.
Для себя я решил, нужна. Следовательно-ставим.
Поиск плагиновДля осуществления задуманного нам понадобиться плагин для wordpress «Contact Form 7», как обычно открываем панель администратора, в меню справа выбираем раздел «Плагины»—«Добавить новый», вводим для поиска название плагина и устанавливаем. Или по старинке, скачиваем себе на компьютер затем распаковываем и заливаем на свой сайт в папку /wp-content/plugins/. Как Вам больше нравится. После чего идем в панель администратора находим в списке плагинов-неактивный «Contact Form 7» и кликаем на «Активировать».
Почему «Contact Form 7»? Потому что лучше этого плагина я пока не нашел. Это не только форма обратной связи, это целый конструктор форм. Имеет много вкусностей: поддержка нескольких форм; технология ajax; капча; антиспам akismet и в добавок – поддержка русского языка.
Если все закончится без ошибок, то в правом меню административной консоли появится новый пункт-«Contact».
Установленный плагин уже определил наш язык, т.е. русский, и сделал заготовку для нас. Но, что бы показать весь процесс создания формы с начала, я, удалил эту заготовку. После удаления доступна лишь одна ссылка-«Добавить новую»:
После клика на эту ссылку плагин запрашивает на каком языке создать форму, на языке по-умолчанию или выбрать из списка доступных языков:
Перед нами откроется несколько окон:
  1. Название формы. Используется в качестве тега, который мы добавим на странице контактов. К тому же это удобно, если Вы будете создавать несколько форм.
  2. Форма обратной связи. Собственно сам генератор форм. В правом окне мы будем выбирать тег, а слева устанавливать поля на свои места. Подробно далее.
  3. Почтовые настройки. Здесь мы будем настраивать как и куда будут направляться сообщения, и в каком формате они будут к Вам приходить.
  4. Сервисные сообщения. В этом окне настраивать нечего. Все уже настроено.
  5. Additional Settings. Какие-то дополнительные настройки, но что делать в этом окне я так и не понял, а Вы?
С названием формы определились и, переходим ко второму окну.
Там уже введена простая форма и ее можно использовать, но все же хочется, для изучения плагина, настроить форму самому. Поэтому все что там было, я стер. Затем методом проб и ошибок я создал симпатичную форму для обратной связи. Вот что я делал:
В правом окне в выпадающем списке выбираем первый пункт «Text field». Это будет поле, текстовое, в которое посетитель введет свое имя. Нам нужно знать имя отправителя, поэтому поле должно быть обязательно к заполненным, для этого ставим галочку в пункте «Required field?».
В поле «Name» вводим имя поля, я назвал его «your-name».
Ниже располагаются два поля, которые необязательно заполнять, это id и class. В id заносим уникальный идентификатор созданного поля. Я его заполнил и ввел «name-user». class отвечает за внешний вид полей. Я особо не утруждался и взял стили от disqus. В конце статьи я расскажу как.
Еще ниже, опять таки опционально, находятся еще два поля: size и maxlength. Т.е. размер поля (ширина) и максимальное количество символов. Я их не заполнял.
У меня установлен плагин Akismet, поэтому я включаю эту опцию в пункте «This field requires author’s name», т.е. в этом поле должно быть имя автора.
В следующее поле можно ввести значение по-умолчанию, т.е. то, что уже будет прописано в созданном поле. Это может быть подсказка, например «Ваше имя» или что либо подобное. Следующая опция «Use this text as watermark?», поставив галочку в этой опции, текст, который Вы пропишите по-умолчанию, будет пропадать при вводе текста пользователем.
В результате проделанных операций внизу блока сгенерировались теги.
Первый, в коричневом окне, необходимо вставить в окно слева, поскольку этот тег отвечает за вывод созданного нами поля на странице. Второй, он находится в зеленом окне, отвечает за вывод содержимого созданного поля в сообщении, которое придет на e-mail.
В левом окне я также прописал подсказку для пользователей, что же это все-таки за поле. В итоге у меня получился вот такой код:

<p>Ваше имя (обязательно)<br />
[text* your-name id:name-user class:feedbackform akismet:author] </p>

Из зеленого поля, перетаскиваем созданный тег в поле «From» (От кого) и в тело сообщения, у меня это выглядит вот так:
Сделали? Великолепно! Поле для ввода имени пользователя у нас сделано. Но нам, как минимум, потребуется от пользователя еще и адрес его электронной почты, а может быть и адрес его сайта, если он есть, но не обязательно, капча, тема и собственно само сообщение.
Со всеми перечисленными выше полями проблем не будет, кроме капчи, для нее потребуется установка дополнительного плагина «Really Simple CAPTCHA».
Ну что ж, двигаемся дальше.
Закрываем открытый блок под текстовое поле, нажимая на крестик в правом верхнем углу. Кликаем на «Generate Tag» и в выпадающем списке выбираем пункт «Email field».
Описывать также подробно как и выше не имеет смысла, тут все также. Скажу лишь, что я поставил это поле обязательным («Required field?»), прописал id и class, а также включил опцию akismet («This field requires author’s email address»).
Теперь код в левом окне у меня выглядел вот так:

<p>Ваше имя (обязательно)<br />
[text* your-name id:name-user class:feedbackform akismet:author] </p>
<p>Ваш E-Mail (обязательно)<br />
[email* your-email id:email-user class:feedbackform akismet:author_email] </p>

А содержимое «From» и тело сообщения вот так:
Выполненно. Возможно что пользователь является счастливым обладателем своего сайта или блога, поэтому дадим ему возможность его указать, но делать это поле обязательным разумеется не стоит.
Закрываем блок с опциями e-mail поля и в выпадающем списке «generate tag» выбираем «text field». Тут нам в общем-то ничего нового не предлагается. Только имя свое прописываем, id, class и, если пожелаете, опцию акисмета включаем «This field requires author’s URL».
После того как я прописал теги, у меня получился следующий код будущей формы:

<p>Ваше имя (обязательно)<br />
[text* your-name id:name-user class:feedbackform akismet:author] </p>
<p>Ваш E-Mail (обязательно)<br />
[email* your-email id:email-user class:feedbackform akismet:author_email] </p>
<p>У Вас есть сайт? (необязательно):<br />
[text site-user id:site-user class:feedbackform akismet:author_url watermark "http:\\\\ваш сайт"]</p>

Тег из зеленого окна достаточно, в этот раз, прописать только в тело сообщения.
Мы наверное попросим у пользователя сообщить нам тему его обращения. Создаем «text field», ставим признак обязательного к заполнению поля, прописываем имя, id, class и прописываем теги в левое окно из коричневого поля, вниз, в поле «Subject», из зеленого. Готово.
Далее вводим поле для сообщения. В уже знакомом нам выпадающем списке выбираем пункт «Text area». Ставим галочку «Required field?», т.е. поле обязательно к заполнению, имя, id, class и в этот раз я указал ширину и высоту поля (cols и rows), 80?7.
Для завершения формы, нам осталось добавить только кнопку «Отправить». В выпадающем списке выбираем опцию «Submit button». Здесь, в поле «Ярлык», нам необходимо прописать имя кнопки. Я так и написал «Отправить». Также прописываем id и class. Копируем тег кнопки в поле слева.
Ну что ж, осталось добавить проверку на спам, капчу. Для этого устанавливаем, любым, понравившемся Вам способом, плагин «Really Simple CAPTCHA», и активируем его.
Далее в правом окне настроек «Contact Form 7», из выпадающего списка, выбираем «Generate Tag —> CAPTCHA:»
И копируем по очереди в правое окно две строчки, вставляя их перед кнопкой «Отправить».
Да и не забудьте дать подсказку читателям, например «Введите код с картинки». Все и от спама защитились.
Форма готова! Да, не забудьте нажать кнопку «Сохранить».
Но это еще далеко не все возможности. Ведь я не зря назвал этот плагин генератором форм. Помимо всего выполненного нами, можно дать возможность пользователям прикреплять файлы, сделать опрос и т.д. Опций действительно много.
Но это уже предмет другой статьи. Чтобы Вы могли сравнить Ваше произведение с тем, что получилось у меня:
А вот весь код мой формы:

<p>Ваше имя (обязательно)<br />
[text* your-name id:name-user class:feedbackform akismet:author] </p>
<p>Ваш E-Mail (обязательно)<br />
[email* your-email id:email-user class:feedbackform akismet:author_email] </p>
<p>У Вас есть сайт? (необязательно):<br />
[text site-user id:site-user class:feedbackform akismet:author_url watermark "http:\\\\ваш сайт"]</p>
<p>По какому Вы вопросу? (тема, обязательно):<br />
[text* your-subject id:subject-mail class:feedbackform] </p>
<p>Что Вы хотели мне сообщить? (обязательно)<br />
[textarea your-message mail-full 80x7 id:mail-full class:feedbackform] </p>
<p>Введите код с картинки<br />
[captchac captcha-153 class:feedbackform]
[captchar captcha-153]</p>
<p>[submit id:button class:buttonfeedback "Отправить"]</p>

Настало время разместить эту форму на странице контактов или обратной связи, это уж кому как нравиться. Если такой страницы нет, то создаем ее. В панели администратора, в левом ищем пункт «Страницы->Добавить страницу». Заполняете страницу как Вам нравиться и, в нужном месте, добавляете тег созданной формы.
Этот тэг находится под названием формы, в коричневом поле. Да, не забудьте, этот тег необходимо добавлять в режиме HTML.
Ну вот и все, обратной связью мы обеспечены.
Выше я обещал отдать Вам стили, которые взял от дискуса и прикрепил к своей форме обратной связи. Как выглядит эта форма Вы можете посмотреть здесь. Нравится? Тогда берите изображения, их нужно скопировать на ваш сервер в папку /wp-content/theme/Ваша тема/папка с картинками. А в файле style.css нужно добавить следующий код:

#Форма обратной связи
.feedbackform {
-moz-border-radius:3px 3px 3px 3px;
background:url("images/inputshadow.gif") no-repeat scroll left top #FFFFFF;
border:1px solid #999999;
margin:3px 0;
padding:3px 5px;
font-family:Arial,Helvetica,sans-serif #333;
font-size:12px;
}
.buttonfeedback {
background:url("images/button-large.png") repeat-x scroll left bottom transparent;
border:1px solid #999999;
color:inherit;
font-family:Arial,Helvetica,Calibri,sans-serif;
margin:0;
overflow:visible;
-moz-border-radius:4px 4px 4px 4px;
font-size:12px;
font-weight:bold;
padding:6px 8px;
}

Стиль “feedbackform” прописываем всем полям, а “buttonfeedback” соответственно кнопке. Все это пишем в опцию class.
Успешных Вам писем в почтовые ящики!

No related posts.

24 thoughts on “Как в WordPress добавить форму обратной связи.”

  3. Здравствуйте!

    Очень полезная статья!

    Установила плагин. завтра буду разбираться с помощью Вашей статьи.

    Спасибо!

    Ответить

  13. Нихрена не понятно, если честно!
    Гораздо проще было бы — ещё видео записать.

    Ответить

    1. Планирую записать серию видеоуроков по созданию блога, от регистрации доменного имени, до установки джентельменского набора плагинов.

      Ответить

  14. Я никогда не думала об обратной связи на сайте. Но Вы меня убедили. Надо будет разобраться и сделать.

    Ответить
  15. Уведомление: Паради

  16. Отлично. Спасибо за статью. Начал разбираться с WP. Статьи подобные вашей очень выручают. Еще раз с благодарносью,пишите дальше, пишите больше!))

    Ответить

    1. Хорошая статья. Хотел сделать у себя в блоге тоже через форму обратной связи. А в итоге просто оставил открытыми комменты. В результате блог наполняется контентом, вместо того, чтобы просто отправлять письма на ящик.

      Ответить

  17. Всем Здравствуйте! Ух ты, классная подборка, пойдет в избранное.И сайт мне очень понравился. Удачи и побольше посетителей!

    Ответить

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *