Продолжая тему интерактивных элементов на сайте некоммерческой организации, сегодня мы остановимся подробнее на одном из них – контактной форме. Мы рассмотрим назначение этого интерактивного элемента, вопросы его оптимизации, и конечно, практический пример, который поможет нам сконструировать такую форму на собственном сайте.
К сожалению, многие некоммерческие организации на своих сайтах не уделяют контактной информации вообще и контактной форме в частности должного внимания. Иногда они и вовсе отсутствуют. А между тем, контактная форма является важным инструментом прямой коммуникации (иногда единственно возможным) между организацией, проектом и посетителями сайта, которые, в свою очередь, могут выступать в различных ипостасях – от нуждающегося в помощи до потенциального партнера.
Почему сайту некоммерческой организации в принципе необходим какой-либо инструмент прямой коммуникации?
Ответ на этот вопрос со всей очевидностью вытекает из самой природы некоммерческой организации и, соответственно, сайта как такового. Любая НКО нуждается в контактах – нуждается в обращении тех, для кого она работает, в предложениях о партнерстве, в помощи волонтеров и т.п. Без этих контактов деятельность НКО вряд ли осуществима. В то же время сайт – это не просто способ информирования «общественности» о деятельности НКО, но также и средство поощрения к действию. После знакомства с сайтом у посетителя должно возникать желание действовать, и наша задача при построении сайта – дать ему такую возможность. Наличие прямого способа связи с организацией, возможности сразу к ней обратиться (предложить свою помощь, попросить разрешения на публикацию материалов, запросить дополнительную информацию по какому-либо проекту и т.п.) является простым и очевидным решением для реализации этого желания действовать.
Почему именно контактная форма?
Мы ведь и так публикуем на сайте контактную информацию, телефон, email, зачем нам еще какая-то форма?
– ответ на этот вопрос тоже довольно прост. У посетителя не всегда есть возможность немедленно воспользоваться другими контактными способами (неудобная ситуация, чужой компьютер, нет почты и т.п.). В результате, контакт должен быть вынуждено отложен, и в конечном итоге, может вообще не состояться, потому что человек либо не зафиксировал контактную информацию, либо его желание действовать уже ослабло под воздействием других дел и забот.
Для самой организации сбор информации через форму также имеет важное преимущество: передаваемые таким образом данные централизованно аккумулируются в одном месте, например, в базе данных сайта. К ним всегда можно обратиться в случае необходимости, сколько бы времени ни прошло с момента контакта.
Не наносит ли контактная форма ущерба безопасности сайта?
Вероятность того, что контактной формой воспользуются не по назначению, например, для рассылки спама, существует. И чем популярнее сайт, тем эта вероятность выше. Но разве это повод отказывать от таких нужных «добросовестных» контактов? А дело борьбы со спамом следует доверить спам-фильтрам.
Давайте посмотрим, какими интересными могут быть в своем разнообразии контактные формы.
Контактные формы на сайте могут быть и более специального назначения, в тех случаях, когда они призваны обслуживать сбор информации по конкретной задаче, например, регистрация участников конференции или запись волонтёров для участия в акции. Но и в самом общем случае контактная форма позволяет с одной стороны посетителям сайта «проявить» свое желание в той или иной форме сотрудничать с организацией, а с другой — самой организации накапливать информацию о таких «заинтересованных» и обращаться к ней в случае необходимости.
Однако, простое наличие контактной формы еще не гарантирует того, что посетители действительно будут ею пользоваться. Чтобы добиться этого, необходимо обратить внимание на ее устройство и размещение. Какие факторы влияют на эффективность формы?
1. Состав требуемой информации
В большинстве случаев простое решение оказывается самым лучшим. Не требуйте от посетителя слишком подробной информации — форма не должна содержать слишком много обязательных полей. Опираясь, например, на результаты исследования, проведенного маркетинговой компанией Hubspot, можно сделать вывод, что оптимальная контактная форма должна содержать 3 поля. Одно из эти полей предназначено собственно для текста сообщения, состав двух других может варьироваться, но призван так или иначе идентифицировать отправителя сообщения.
Важное значение имеет также кнопка отправки формы. Удачным можно признать вариант, когда эта кнопка единственная (иногда в формы включают кнопку «очистить» или «отмена», но в данном случае они скорее запутывают посетителя) и содержит надпись, позволяющую легко определить назначение этой кнопки, например, «отправить сообщение».
Несмотря на кажущуюся очевидность этих правил, они нарушаются довольно часто, что в конечном итоге приводит к неэффективному использованию форм. Так что перед тем, как включать в форму дополнительное поле, спросите себя: действительно ли необходимо раздельно указывать имя и фамилию? Действительно ли мы хотим заставить посетителя формулировать тему сообщения? Действительно ли нам так уж необходим его телефон или домашний адрес?
2. Фактор доверия
Иррациональный компонент доверия при установлении прямого контакта важен как никогда (о чем у нас уже шла речь в прежних публикациях). Принимая решение о том, стоит ли воспользоваться формой, посетитель интуитивно оценивает, насколько этот контакт будет желателен для другой стороны (владельца сайта), насколько он там востребован и ожидаем. В частности, имеют значения следующие аспекты:
- Название формы. Простое обращение «напишите нам» побуждает к конкретному и ожидаемому действию эффективнее, чем безликое «форма для обращений».
- Описания полей формы. Притом что они должны быть просты и однозначны, не стоит впадать в излишний формализм — желание воспользоваться формой, «звучащей» как милицейский протокол, у посетителя скорее всего не возникнет.
- Гарантия конфиденциальности. Когда вы просите посетителя указывать персональные данные, стоит со своей стороны заверить его в том, что они не будут использованы недобросовестно.
- Вероятность получить ответ. Следует в той или иной форме указать, что посетитель не адресуется «в пустоту», что его сообщение будет как минимум прочитано, и ответ, если он необходим, также будет отправлен.
3. Размещение и дизайн формы
Обычное, и как следствие ожидаемое, размещение формы — на странице с контактной информацией. Соответственно, ее внешний вид должен соответствовать оформлению контактной страницы в целом. При этом необходимо следить за выполнением нескольких условий:
- размер полей формы и размер шрифта текста в них должен быть достаточным, чтобы вмещать в себя необходимую информацию
- при попадании поля формы в фокус (например, когда в него ставится курсор), оно должно визуально «откликаться» на это действие, тем самым давая пользователю понять, что можно начинать ввод
- должно быть предусмотрено достаточно места для сообщения об отправке формы или ошибке
За иллюстрациями к сказанному загляните в галерею Patterntap, содержащую большое количество примеров визуального оформления контактных форм и контактных страниц.
4. Подтверждение отправки
После отправки формы необходимо проинформировать посетителя о том, что его сообщение действительно передано. Наиболее простой способ – вывести на экран уведомление. Иногда осуществляется перенаправление посетителя на другую страницу с таким уведомлением, но такое поведение воспринимается как неожиданное, и лучше использовать его в качестве «подстраховки», например, в случаях отключенного JavaScript.
Давайте посмотрим еще на несколько практических примеров.
The Michael J.Fox Foundation представляет контактную форму вместе с остальной контактной информацией на отдельной странице, предлагая выбрать тему сообщения из выпадающего списка.
Фонд Предание при отправке сообщения не требует от посетителя определять его тему, но с помощью указателей в верхней части формы можно выбрать, кому это сообщение должно быть адресовано.
На сайте Французской ассоциации филантропических организаций контактная форма появляется в виде модального диалога.
Создание формы для сайта на платформе WordPress
Теперь, вооружившись всеми вышеизложенными полезными соображениями, давайте попробуем самостоятельно создать форму для сайта, работающего на WordPress (популярной во всем мире системе управления контентом с открытым кодом).
Для этого нам потребуется установить плагин, позволяющий создавать формы. В качестве простого и эффективного варианта выберем Contact Form 7 (впрочем, если он вас чем-то не устраивает — в официальном репозитории достаточно альтернатив). Этот плагин позволяет встраивать предварительно настроенные формы прямо в страницы (или записи) сайта. Информация, отправляемая посетителем через форму, пересылается на специально указанный email.
Установить плагин можно прямо из административной части WordPress. В разделе Плагины -> Добавить новый укажите в строке поиска название Contact Form 7 и затем в списке предложенных вариантов выберите Установить для соответствующей позиции. После завершения установки активируйте плагин, нажав на соответствующую ссылку.
После установки плагина в административном меню появляется раздел Контакты (СF7). Редактировать формы в нем можно практически также, как вы редактируете страницы или записи. Первая форма уже создана плагином по умолчанию и вот ее-то мы и будем настраивать.
Экран редактирования формы содержит несколько областей. Подробнее об их назначении и доступных опциях вы можете прочесть в документации к плагину. Но общий принцип следующий – каждое поле формы представлено в виде специального кода (тэга) заключенного в квадратные скобки [ ]. Остальные элементы формы (подписи, подсказки и т.п.) форматируются с помощью стандартных тэгов HTML. Если вы совсем не знакомы с HTML, то, возможно, наступило время обратиться к нетленной серии «для чайников», а именно книге «HTML, XHTML и CSS для чайников», изданной на русском языке издательством Диалектика, и прочесть из нее хотя бы первые 140 страниц. Поверьте, и вы и ваш сайт от этого только выиграете.
Форма, создаваемая плагином по умолчанию, содержит 4 поля: Ваше имя, Ваш Email, Тема, Сообщение и собственно кнопку Отправить. Каждое поле вместе с наименованием форматируется как отдельный блок с помощью HTML-тэга абзаца <p>...</p>. Наименование поля отделяется от него HTML-тэгом перехода на новую строку <br />. Надо признать, это не самый лучший вариант разметки для формы (особенно с точки зрения доступности сайта), но он вполне дееспособен и может быть принят за основу.
Исходя из того, что мы уже знаем, становится очевидным, что форма требует некоторой оптимизации. Поэтому мы уберем поле темы и изменим наименование кнопки на Отправить сообщение. В нижней части формы мы также добавим небольшое сообщение, гарантирующее конфиденциальность передаваемой информации.
Сохранив достигнутый результат с помощью кнопки Сохранить, обратим свое внимание на раздел Адресат. Он предназначен для настроек email-сообщения, которое будет отправляться с данными, собранными через форму. Указанные в нем параметры должны соответствовать параметрам формы, в противном случае часть информации может быть потеряна. Во-первых, необходимо проверить и при необходимости изменить адрес получателя email. Имя отправителя формируется по шаблону в соответствии с полями формы. Так как из формы мы удалили поле темы, то в данном разделе в качестве темы необходимо указать какой-либо постоянный текст, чтобы иметь возможность идентифицировать сообщения — например, Обращение через сайт. Аналогичные изменения необходимо произвести и в поле Тело сообщения, позволяющем настраивать шаблон содержания отправляемого письма.
Сохранив изменения, можно переходить к настройке уведомлений об отправке формы и возможных ошибках в разделе Сообщения. Но для на нашего случая и начальное их содержание можно признать вполне подходящим.
Последний шаг, который нам необходимо предпринять для появления формы на сайте, — это копирование специального кода формы в верхней части экрана (выделен коричневым цветом) и вставка его в конец текстового содержания страницы Контакты. Вставленный код также можно сопроводить заголовком, например Напишите нам.
Полученный результат теперь можно увидеть, посетив страницу Контакты в основной части сайта. Для тестирования работы формы можем отправить пробное сообщение и убедиться, что оно благополучно добралось до назначения.
Если этого не произошло, то необходимо еще раз проверить корректность настроек нашей формы (в первую очередь, адрес получателя), а также проверить, не оказалось ли наше сообщение в спаме. Если все это не дает положительного результата, тогда возможно проблема заключается в том, что настройки вашего хостинга не позволяют отправлять email таким образом. В этом случае, можно порекомендовать установить дополнительное расширение Contact Form 7 to Database Extension, которое позволяет сохранять информацию, передаваемую через форму в базе данных сайта. После этого ее можно просматривать через административный интерфейс WordPress или интерфейс управления базой данных.
Визуальное отображение формы определяется настройками вашей темы оформления и для изменения этих настроек скорее всего потребуется помощь специалиста (или, как минимум, базовые знания в области CSS, почерпнутые из выше упомянутой книги «HTML, XHTML и CSS для чайников». Но даже в своем начальном состоянии «по умолчанию» наша контактная форма вполне пригодна к использованию. И кто знает, какие новые возможности и связи она способна принести вашему проекту.