Форма обратной связи для wordpress

Пока только для wordpress, уж простите, но плотно работать приходится только с ним.

Этот пост станет отличным продолжением продуктивно проведенного мной дня, сначала я установил обратную связь на блог, а теперь хочу поделиться с Вами как это сделать можете Вы. Но прежде давайте определимся, а нужна ли эта форма вообще?

Связь с посетителями нам нужна однозначно, с этим не поспоришь. Для организации такой связи можно просто указать свой e-mail, аську, телефон и т.д. Если последнее для серьезных организаций обязательно, имею ввиду телефон, то размещение своего e-mail чревато последствиями:

• открыто размещенный е-майл может попасть в базу СПАМеров, а забрать его оттуда уже ну никак. По 10-100 писем рекламного характера ежедневно Вам обеспечено.
• есть вероятность потери клиента. В какой бы сфере Вы не работали, всегда найдется человек нуждающийся в Ваших услугах. Представляете, если посетитель решил заказать у Вас что-то, но не может связаться по е-майл. Причин этому может быть много: он вышел в инет с чужого компьютера; ему тупо лень открывать свой почтовый клиент и т.д.

Из этих минусов “прямого контакта” вытекают плюсы формы обратной связи, кроме того, посетителю гораздо легче формировать сообщение заполняя поля. Да и Вам обрабатывать информацию поданную таким образом будет легче.

Для себя решил, нужна. Значит ставим.

В реализации задуманного нам поможет плагин для wordpress “Contact Form 7“, проходим по ссылке и скачиваем. Лучше этого плагина я не нашел. Это не просто форма обратной связи, это целый конструктор форм обратной связи. Уйма фишек: поддержка нескольких форм; технология ajax; капча; антиспам akismet и в качестве бонуса – поддержка русского языка (правда какая-то она не доделанная или у меня руки из жо..).

Установка не должны вызвать у Вас каких-либо проблем. Скаченный архив распаковываем и заливаем на сервер (или заливаем, а потом распаковываем) в папку /wp-content/plugins/. После идем в панель администратора wordpress, в меню справа выбираем раздел “Плагины”. В списке плагинов находим неактивный “Contact Form 7” и кликаем на “Активировать”.

Если все пройдет удачно, то в меню справа появится новый пункт “Contact”.

Установленный плагин старается для нас , он уже определил правильный язык, т.е. русский, и сделал для нас заготовку. Но я, дабы описать весь процесс создания формы с ноля, удалил эту заготовку. После удаления для меня доступна лишь одна ссылка “Добавить новую”:

После клика на которую плагин спрашивает у нас на каком языке мы хотим создать форму, на языке по-умолчанию или выбрать из списка:

Перед нами появится, на первый взгляд, что-то очень сложное, но это не так. Несколько окон:

1. Название формы. Будет использовано в качестве тега, который мы вставим в страницу контактов. К тому же удобно, если Вы будете создавать несколько форм.
2. Форма обратной связи. Собственно сам генератор форм. Справа будем выбирать тег, слева расставлять поля на свои места. Ниже подробно.
3. Почтовые настройки. В этом окне будем настраивать куда и как будут отправляться сообщения, и в каком виде они будут приходить к Вам.
4. Дополнительная форма обратной связи. Я уже говорил, что Contact Form 7 поддерживает создание нескольких форм?
5. Сервисные сообщения. В этом окне в принципе и настраивать нечего. Все уже украдено настроено до нас.
6. Additional Settings. Какие-то дополнительные настройки, которые впрочем мне не понадобились. Да я так и не понял что в этом окне делать, а Вы?

С названием формы и так все понятно, потому спускаемся ко второму окну.

Там для нас уже заготовлена простая обратная связь и ей можно пользоваться, но все же хочется изучить плагин и настроить форму самому. Потому все что там есть, я стер. Затем методом проб и ошибок я таки создал довольно приличную обратную связь. Вот как я ее сделал.

В выпадающем списке выбираем первый пункт “Text field”. Это будет текстовое поле, в которое посетитель введет свое имя. Нам важно знать имя отправителя, потому поле должны быть обязательным к заполнению, значит ставим галочку в пункте “Required field?”.

В поле ниже вводим имя формы, я обозвал ее “name-user”.

Еще ниже два поля, которые необязательны к заполнению, это id и class. В id прописываем уникальный идентификатор элемента, т.е. созданного поля. Я его все же заполню, потому прописываю тоже самое, что и в имени формы, в данном случае “name-user”. class отвечает за внешний вид полей. Я особо не заморачивался и взял стили от disqus. Если нужны, заберете их в конце статьи.

Еще ниже, опять же опционально, два поля: size и maxlength. Т.е. размер поля (ширина) и максимальное количество символов. Я их не заполнял.

Когда я писал про disqus, то упоминал антиспам akismet. Этот плагин тоже использует возможности акисмета. У меня он есть, потому включаю эту опцию в пункте “This field requires author’s name”, т.е. в этом поле должно быть имя автора.

В следующем поле можно ввести значение по-умолчанию, т.е. то, что уже будет прописано в созданном поле. Это может быть подсказка, ну что-то вроде “Ваше имя” и т.д.  Напротив, опция “Use this text as watermark?”, поставив галочку в этой опции, текст, который Вы пропишите по-умолчанию, будет пропадать при вводе текста пользователем. Здесь я ничего не прописывал и не ставил, все подсказки у меня будут перед полями.

После проделанных операций внизу блока генерируются теги. Первый, в коричневом окне, необходимо вставить в окно слева, этот тег отвечает за вывод созданного нами поля на странице. Второй находится в зеленом окне и отвечает за вывод содержимого созданного поля в сообщении, которое придет к нам на e-mail. Вот так у меня выглядит блок с проставленными опциями:

В поле слева я также прописал подсказку для пользователей, что же это все-таки за поле. В итоге у меня получился вот такой код:

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

Из зеленого поля, перетаскиваем созданный тег в поле “From” (От кого) и в тело сообщения, у меня это выглядит вот так:

Сделали? Отлично! Поле под имя пользователя у нас сделано. Но нам как минимум потребуется от него еще и e-mail, можно сайт, но не обязательно, капча, тема и собственно само сообщение.

Со всем перечисленным выше проблем не будет, кроме капчи, она требует установки дополнительного плагина “Really Simple CAPTCHA”. У меня если честно никакого желания его устанавливать нет, потому попробую жить без нее. Если уж замордуют, тогда установим.

Поехали дальше.

Закрываем открытый блок под текстовое поле нажатием на крестик в верхнем правом углу. Кликаем на “Generate Tag” и в выпадающем списке выбираем пункт “Email field”.

Описывать также подробно как и выше не имеет смысла, тут все также. Скажу лишь, что я поставил это поле обязательным (Required field?), прописал id и class, а также включил опцию akismet (This field requires author’s email address).

Теперь код слева у меня выглядел вот так:

<p>Ваше имя (обязательно):<br />
 [text* name-user id:name-user class:feedbackform akismet:author]</p>
 
<p>Ваш e-mail (обязательно):<br />
 [email email-user 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* name-user id:name-user class:feedbackform akismet:author]</p>
 
<p>Ваш e-mail (обязательно):<br />
 [email email-user id:email-user class:feedbackform akismet:author_email]</p>
 
<p>У Вас есть сайт? (необязательно):<br />
 [text site-user id:site-user class:feedbackform akismet:author_url]</p>

Тег из зеленого окна в этот раз достаточно прописать только в тело сообщения.

Давайте попросим у пользователя сообщить также тему его обращения к нам. Создаем “text field”, ставим обязательную опцию, прописываем имя, id, class и прописываем теги в левое окно из коричневого поля, вниз, в поле “Subject”, из зеленого. Готово.

На очереди поле для сообщения. В известном нам выпадающем списке выбираем пункт “Text area”. Ставим галочку “Required field?”, т.е. поле обязательно к заполнению, имя, id, class и в этот раз я указал ширину и высоту поля (cols и rows), 80×7.

Завершающая стадия в генерации формы, а именно кнопка “Отправить”. В выпадающем списке выбираем опцию “Submit button”. Здесь, в поле “Ярлык”, нам необходимо прописать имя кнопки. Я так и написал “Отправить”. Также прописываем id и class. Копируем тег кнопки в поле слева.

Форма готова! А ну да, не забудьте нажать кнопку “Сохранить”.

Ну это не все. В смысле я не зря обозвал этот плагин генератором форм. Помимо всего проделанного, можно дать возможность пользователям прикреплять файлы, сделать опрос и т.д. Опций действительно куча.

Но я пока остановлюсь на этом. Чтобы Вы могли сориентироваться и сравнить, вот скрин того, что получилось у меня:

А вот весь мой код формы:

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

Пришло время разместить эту форму на странице контактов или обратной связи, это уж кому как. Если ее нет, тогда создаем. В панели администратора, в меню слева ищем пункт “Страницы->Добавить страницу”. Заполняете страницу по своему вкусу и добавляете тег созданной нами формы. Он находится под названием этой формы в коричневом поле. Кстати, тег этот необходимо добавлять в режиме HTML.

Все ребятки, обратной связью мы обеспечены.

Где-то там, наверху , я обещал отдать Вам стили, которые выдернул от дискуса и прилепил к своей форме обратной связи. Как выглядит эта форма Вы можете глянуть здесь. Подходит? Тогда забирайте изображения, их надо бы залить на ваш сервер в папку /wp-content/theme/Ваша тема/папка с картинками. А в файл style.css пропишите следующий код:

.feedbackform {
 -moz-border-radius:3px 3px 3px 3px;
 background:url("папка с картинками/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("папка с картинками/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.

Какой плагин используете Вы для обратной связи?

Удачных Вам писем в почтовые ящики!

Snapshot / @pervushin_com в twitter