Эффективный сайт некоммерческой организации. Контактная форма своими руками

Контактная форма на сайте Alexander Wong
Контактная форма на сайте Alexander Wong
Про­дол­жая тему интер­ак­тив­ных эле­мен­тов на сай­те неком­мер­че­ской орга­ни­за­ции, сего­дня мы оста­но­вим­ся подроб­нее на одном из них – кон­такт­ной фор­ме. Мы рас­смот­рим назна­че­ние это­го интер­ак­тив­но­го эле­мен­та, вопро­сы его опти­ми­за­ции, и конеч­но, прак­ти­че­ский при­мер, кото­рый помо­жет нам скон­стру­и­ро­вать такую фор­му на соб­ствен­ном сай­те.

К сожа­ле­нию, мно­гие неком­мер­че­ские орга­ни­за­ции на сво­их сай­тах не уде­ля­ют кон­такт­ной инфор­ма­ции вооб­ще и кон­такт­ной фор­ме в част­но­сти долж­но­го вни­ма­ния. Ино­гда они и вовсе отсут­ству­ют. А меж­ду тем, кон­такт­ная фор­ма явля­ет­ся важ­ным инстру­мен­том пря­мой ком­му­ни­ка­ции (ино­гда един­ствен­но воз­мож­ным) меж­ду орга­ни­за­ци­ей, про­ек­том и посе­ти­те­ля­ми сай­та, кото­рые, в свою оче­редь, могут высту­пать в раз­лич­ных ипо­ста­сях – от нуж­да­ю­ще­го­ся в помо­щи до потен­ци­аль­но­го парт­не­ра.

Почему сайту некоммерческой организации в принципе необходим какой-либо инструмент прямой коммуникации?

Ответ на этот вопрос со всей оче­вид­но­стью выте­ка­ет из самой при­ро­ды неком­мер­че­ской орга­ни­за­ции и, соот­вет­ствен­но, сай­та как тако­во­го. Любая НКО нуж­да­ет­ся в кон­так­тах – нуж­да­ет­ся в обра­ще­нии тех, для кого она рабо­та­ет, в пред­ло­же­ни­ях о парт­нер­стве, в помо­щи волон­те­ров и т.п. Без этих кон­так­тов дея­тель­ность НКО вряд ли осу­ще­стви­ма. В то же вре­мя сайт – это не про­сто спо­соб инфор­ми­ро­ва­ния «обще­ствен­но­сти» о дея­тель­но­сти НКО, но так­же и сред­ство поощ­ре­ния к дей­ствию. После зна­ком­ства с сай­том у посе­ти­те­ля долж­но воз­ни­кать жела­ние дей­ство­вать, и наша зада­ча при постро­е­нии сай­та – дать ему такую воз­мож­ность. Нали­чие пря­мо­го спо­со­ба свя­зи с орга­ни­за­ци­ей, воз­мож­но­сти сра­зу к ней обра­тить­ся (пред­ло­жить свою помощь, попро­сить раз­ре­ше­ния на пуб­ли­ка­цию мате­ри­а­лов, запро­сить допол­ни­тель­ную инфор­ма­цию по како­му-либо про­ек­ту и т.п.) явля­ет­ся про­стым и оче­вид­ным реше­ни­ем для реа­ли­за­ции это­го жела­ния дей­ство­вать.

Почему именно контактная форма?

Мы ведь и так пуб­ли­ку­ем на сай­те кон­такт­ную инфор­ма­цию, теле­фон, email, зачем нам еще какая-то фор­ма? – ответ на этот вопрос тоже доволь­но прост. У посе­ти­те­ля не все­гда есть воз­мож­ность немед­лен­но вос­поль­зо­вать­ся дру­ги­ми кон­такт­ны­ми спо­со­ба­ми (неудоб­ная ситу­а­ция, чужой ком­пью­тер, нет почты и т.п.). В резуль­та­те, кон­такт дол­жен быть вынуж­де­но отло­жен, и в конеч­ном ито­ге, может вооб­ще не состо­ять­ся, пото­му что чело­век либо не зафик­си­ро­вал кон­такт­ную инфор­ма­цию, либо его жела­ние дей­ство­вать уже ослаб­ло под воз­дей­стви­ем дру­гих дел и забот.

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

Не наносит ли контактная форма ущерба безопасности сайта?

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

Давай­те посмот­рим, каки­ми инте­рес­ны­ми могут быть в сво­ем раз­но­об­ра­зии кон­такт­ные фор­мы.

Контактная форма на сайте Amazee Labs
Кон­такт­ная фор­ма на сай­те Amazee Labs
Контактная форма на сайте Alexander Wong
Кон­такт­ная фор­ма на сай­те Alexander Wong
Контактная форма на сайте Foundry Collective
Кон­такт­ная фор­ма на сай­те Foundry Collective

Кон­такт­ные фор­мы на сай­те могут быть и более спе­ци­аль­но­го назна­че­ния, в тех слу­ча­ях, когда они при­зва­ны обслу­жи­вать сбор инфор­ма­ции по кон­крет­ной зада­че, напри­мер, реги­стра­ция участ­ни­ков кон­фе­рен­ции или запись волон­тё­ров для уча­стия в акции. Но и в самом общем слу­чае кон­такт­ная фор­ма поз­во­ля­ет с одной сто­ро­ны посе­ти­те­лям сай­та «про­явить» свое жела­ние в той или иной фор­ме сотруд­ни­чать с орга­ни­за­ци­ей, а с дру­гой – самой орга­ни­за­ции накап­ли­вать инфор­ма­цию о таких «заин­те­ре­со­ван­ных» и обра­щать­ся к ней в слу­чае необ­хо­ди­мо­сти.

Одна­ко, про­стое нали­чие кон­такт­ной фор­мы еще не гаран­ти­ру­ет того, что посе­ти­те­ли дей­стви­тель­но будут ею поль­зо­вать­ся. Что­бы добить­ся это­го, необ­хо­ди­мо обра­тить вни­ма­ние на ее устрой­ство и раз­ме­ще­ние. Какие фак­то­ры вли­я­ют на эффек­тив­ность фор­мы?

1. Состав требуемой информации

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

Важ­ное зна­че­ние име­ет так­же кноп­ка отправ­ки фор­мы. Удач­ным мож­но при­знать вари­ант, когда эта кноп­ка един­ствен­ная (ино­гда в фор­мы вклю­ча­ют кноп­ку «очи­стить» или «отме­на», но в дан­ном слу­чае они ско­рее запу­ты­ва­ют посе­ти­те­ля) и содер­жит над­пись, поз­во­ля­ю­щую лег­ко опре­де­лить назна­че­ние этой кноп­ки, напри­мер, «отпра­вить сооб­ще­ние».

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

2. Фактор доверия

Ирра­ци­о­наль­ный ком­по­нент дове­рия при уста­нов­ле­нии пря­мо­го кон­так­та важен как нико­гда (о чем у нас уже шла речь в преж­них пуб­ли­ка­ци­ях). При­ни­мая реше­ние о том, сто­ит ли вос­поль­зо­вать­ся фор­мой, посе­ти­тель инту­и­тив­но оце­ни­ва­ет, насколь­ко этот кон­такт будет жела­те­лен для дру­гой сто­ро­ны (вла­дель­ца сай­та), насколь­ко он там вос­тре­бо­ван и ожи­да­ем. В част­но­сти, име­ют зна­че­ния сле­ду­ю­щие аспек­ты:

  • Назва­ние фор­мы. Про­стое обра­ще­ние «напи­ши­те нам» побуж­да­ет к кон­крет­но­му и ожи­да­е­мо­му дей­ствию эффек­тив­нее, чем без­ли­кое «фор­ма для обра­ще­ний».
  • Опи­са­ния полей фор­мы. При­том что они долж­ны быть про­сты и одно­знач­ны, не сто­ит впа­дать в излиш­ний фор­ма­лизм – жела­ние вос­поль­зо­вать­ся фор­мой, «зву­ча­щей» как мили­цей­ский про­то­кол, у посе­ти­те­ля ско­рее все­го не воз­ник­нет.
  • Гаран­тия кон­фи­ден­ци­аль­но­сти. Когда вы про­си­те посе­ти­те­ля ука­зы­вать пер­со­наль­ные дан­ные, сто­ит со сво­ей сто­ро­ны заве­рить его в том, что они не будут исполь­зо­ва­ны недоб­ро­со­вест­но.
  • Веро­ят­ность полу­чить ответ. Сле­ду­ет в той или иной фор­ме ука­зать, что посе­ти­тель не адре­су­ет­ся «в пусто­ту», что его сооб­ще­ние будет как мини­мум про­чи­та­но, и ответ, если он необ­хо­дим, так­же будет отправ­лен.

3. Размещение и дизайн формы

Обыч­ное, и как след­ствие ожи­да­е­мое, раз­ме­ще­ние фор­мы – на стра­ни­це с кон­такт­ной инфор­ма­ци­ей. Соот­вет­ствен­но, ее внеш­ний вид дол­жен соот­вет­ство­вать оформ­ле­нию кон­такт­ной стра­ни­цы в целом. При этом необ­хо­ди­мо сле­дить за выпол­не­ни­ем несколь­ких усло­вий:

  • раз­мер полей фор­мы и раз­мер шриф­та тек­ста в них дол­жен быть доста­точ­ным, что­бы вме­щать в себя необ­хо­ди­мую инфор­ма­цию
  • при попа­да­нии поля фор­мы в фокус (напри­мер, когда в него ста­вит­ся кур­сор), оно долж­но визу­аль­но «откли­кать­ся» на это дей­ствие, тем самым давая поль­зо­ва­те­лю понять, что мож­но начи­нать ввод
  • долж­но быть преду­смот­ре­но доста­точ­но места для сооб­ще­ния об отправ­ке фор­мы или ошиб­ке

За иллю­стра­ци­я­ми к ска­зан­но­му загля­ни­те в гале­рею Patterntap, содер­жа­щую боль­шое коли­че­ство при­ме­ров визу­аль­но­го оформ­ле­ния кон­такт­ных форм и кон­такт­ных стра­ниц.

4. Подтверждение отправки

После отправ­ки фор­мы необ­хо­ди­мо про­ин­фор­ми­ро­вать посе­ти­те­ля о том, что его сооб­ще­ние дей­стви­тель­но пере­да­но. Наи­бо­лее про­стой спо­соб – выве­сти на экран уве­дом­ле­ние. Ино­гда осу­ществ­ля­ет­ся пере­на­прав­ле­ние посе­ти­те­ля на дру­гую стра­ни­цу с таким уве­дом­ле­ни­ем, но такое пове­де­ние вос­при­ни­ма­ет­ся как неожи­дан­ное, и луч­ше исполь­зо­вать его в каче­стве «под­стра­хов­ки», напри­мер, в слу­ча­ях отклю­чен­но­го JavaScript.

Давай­те посмот­рим еще на несколь­ко прак­ти­че­ских при­ме­ров.

Контактная форма на сайте The Michael J.Fox Foundation
Кон­такт­ная фор­ма на сай­те The Michael J.Fox Foundation

The Michael J.Fox Foundation пред­став­ля­ет кон­такт­ную фор­му вме­сте с осталь­ной кон­такт­ной инфор­ма­ци­ей на отдель­ной стра­ни­це, пред­ла­гая выбрать тему сооб­ще­ния из выпа­да­ю­ще­го спис­ка.

Контактная форма на сайте фонда Предание
Кон­такт­ная фор­ма на сай­те фон­да Пре­да­ние

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

Контактная форма на сайте Французской ассоциации филантропических организаций
Кон­такт­ная фор­ма на сай­те Фран­цуз­ской ассо­ци­а­ции филан­тро­пи­че­ских орга­ни­за­ций

На сай­те Фран­цуз­ской ассо­ци­а­ции филан­тро­пи­че­ских орга­ни­за­ций кон­такт­ная фор­ма появ­ля­ет­ся в виде модаль­но­го диа­ло­га.

Созда­ние фор­мы для сай­та на плат­фор­ме Wordpress
Теперь, воору­жив­шись все­ми выше­из­ло­жен­ны­ми полез­ны­ми сооб­ра­же­ни­я­ми, давай­те попро­бу­ем само­сто­я­тель­но создать фор­му для сай­та, рабо­та­ю­ще­го на WordPress (попу­ляр­ной во всем мире систе­ме управ­ле­ния кон­тен­том с откры­тым кодом).

Для это­го нам потре­бу­ет­ся уста­но­вить пла­гин, поз­во­ля­ю­щий созда­вать фор­мы. В каче­стве про­сто­го и эффек­тив­но­го вари­ан­та выбе­рем Contact Form 7 (впро­чем, если он вас чем-то не устра­и­ва­ет – в офи­ци­аль­ном репо­зи­то­рии доста­точ­но аль­тер­на­тив). Этот пла­гин поз­во­ля­ет встра­и­вать пред­ва­ри­тель­но настро­ен­ные фор­мы пря­мо в стра­ни­цы (или запи­си) сай­та. Инфор­ма­ция, отправ­ля­е­мая посе­ти­те­лем через фор­му, пере­сы­ла­ет­ся на спе­ци­аль­но ука­зан­ный email.

Уста­но­вить пла­гин мож­но пря­мо из адми­ни­стра­тив­ной части WordPress. В раз­де­ле Пла­ги­ны -> Доба­вить новый ука­жи­те в стро­ке поис­ка назва­ние Contact Form 7 и затем в спис­ке пред­ло­жен­ных вари­ан­тов выбе­ри­те Уста­но­вить для соот­вет­ству­ю­щей пози­ции. После завер­ше­ния уста­нов­ки акти­ви­руй­те пла­гин, нажав на соот­вет­ству­ю­щую ссыл­ку.

Установка плагина Contact Form 7
Уста­нов­ка пла­ги­на Contact Form 7

После уста­нов­ки пла­ги­на в адми­ни­стра­тив­ном меню появ­ля­ет­ся раз­дел Кон­так­ты (СF7). Редак­ти­ро­вать фор­мы в нем мож­но прак­ти­че­ски так­же, как вы редак­ти­ру­е­те стра­ни­цы или запи­си. Пер­вая фор­ма уже созда­на пла­ги­ном по умол­ча­нию и вот ее-то мы и будем настра­и­вать.

Экран редак­ти­ро­ва­ния фор­мы содер­жит несколь­ко обла­стей. Подроб­нее об их назна­че­нии и доступ­ных опци­ях вы може­те про­честь в доку­мен­та­ции к пла­ги­ну. Но общий прин­цип сле­ду­ю­щий – каж­дое поле фор­мы пред­став­ле­но в виде спе­ци­аль­но­го кода (тэга) заклю­чен­но­го в квад­рат­ные скоб­ки [ ]. Осталь­ные эле­мен­ты фор­мы (под­пи­си, под­сказ­ки и т.п.) фор­ма­ти­ру­ют­ся с помо­щью стан­дарт­ных тэгов HTML. Если вы совсем не зна­ко­мы с HTML, то, воз­мож­но, насту­пи­ло вре­мя обра­тить­ся к нетлен­ной серии «для чай­ни­ков», а имен­но кни­ге «HTML, XHTML и CSS для чай­ни­ков», издан­ной на рус­ском язы­ке изда­тель­ством Диа­лек­ти­ка, и про­честь из нее хотя бы пер­вые 140 стра­ниц. Поверь­те, и вы и ваш сайт от это­го толь­ко выиг­ра­е­те.

Фор­ма, созда­ва­е­мая пла­ги­ном по умол­ча­нию, содер­жит 4 поля: Ваше имя, Ваш Email, Тема, Сооб­ще­ние и соб­ствен­но кноп­ку Отпра­вить. Каж­дое поле вме­сте с наиме­но­ва­ни­ем фор­ма­ти­ру­ет­ся как отдель­ный блок с помо­щью HTML-тэга абза­ца <p>…</p>. Наиме­но­ва­ние поля отде­ля­ет­ся от него HTML-тэгом пере­хо­да на новую стро­ку <br />. Надо при­знать, это не самый луч­ший вари­ант раз­мет­ки для фор­мы (осо­бен­но с точ­ки зре­ния доступ­но­сти сай­та), но он вполне дее­спо­со­бен и может быть при­нят за осно­ву.

Разметка контактной формы - начальный вариант
Раз­мет­ка кон­такт­ной фор­мы – началь­ный вари­ант

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

Разметка контактной формы - отредактированный вариант
Раз­мет­ка кон­такт­ной фор­мы – отре­дак­ти­ро­ван­ный вари­ант

Сохра­нив достиг­ну­тый резуль­тат с помо­щью кноп­ки Сохра­нить, обра­тим свое вни­ма­ние на раз­дел Адре­сат. Он пред­на­зна­чен для настро­ек email-сооб­ще­ния, кото­рое будет отправ­лять­ся с дан­ны­ми, собран­ны­ми через фор­му. Ука­зан­ные в нем пара­мет­ры долж­ны соот­вет­ство­вать пара­мет­рам фор­мы, в про­тив­ном слу­чае часть инфор­ма­ции может быть поте­ря­на. Во-пер­вых, необ­хо­ди­мо про­ве­рить и при необ­хо­ди­мо­сти изме­нить адрес полу­ча­те­ля email. Имя отпра­ви­те­ля фор­ми­ру­ет­ся по шаб­ло­ну в соот­вет­ствии с поля­ми фор­мы. Так как из фор­мы мы уда­ли­ли поле темы, то в дан­ном раз­де­ле в каче­стве темы необ­хо­ди­мо ука­зать какой-либо посто­ян­ный текст, что­бы иметь воз­мож­ность иден­ти­фи­ци­ро­вать сооб­ще­ния – напри­мер, Обра­ще­ние через сайт. Ана­ло­гич­ные изме­не­ния необ­хо­ди­мо про­из­ве­сти и в поле Тело сооб­ще­ния, поз­во­ля­ю­щем настра­и­вать шаб­лон содер­жа­ния отправ­ля­е­мо­го пись­ма.

Настройка шаблона email сообщения
Настрой­ка шаб­ло­на email сооб­ще­ния

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

Послед­ний шаг, кото­рый нам необ­хо­ди­мо пред­при­нять для появ­ле­ния фор­мы на сай­те, – это копи­ро­ва­ние спе­ци­аль­но­го кода фор­мы в верх­ней части экра­на (выде­лен корич­не­вым цве­том) и встав­ка его в конец тек­сто­во­го содер­жа­ния стра­ни­цы Кон­так­ты. Встав­лен­ный код так­же мож­но сопро­во­дить заго­лов­ком, напри­мер Напи­ши­те нам.

Вставка кода формы в текст контактной страницы
Встав­ка кода фор­мы в текст кон­такт­ной стра­ни­цы

Полу­чен­ный резуль­тат теперь мож­но уви­деть, посе­тив стра­ни­цу Кон­так­ты в основ­ной части сай­та. Для тести­ро­ва­ния рабо­ты фор­мы можем отпра­вить проб­ное сооб­ще­ние и убе­дить­ся, что оно бла­го­по­луч­но добра­лось до назна­че­ния.

Окончательный вариант контактной формы
Окон­ча­тель­ный вари­ант кон­такт­ной фор­мы

Если это­го не про­изо­шло, то необ­хо­ди­мо еще раз про­ве­рить кор­рект­ность настро­ек нашей фор­мы (в первую оче­редь, адрес полу­ча­те­ля), а так­же про­ве­рить, не ока­за­лось ли наше сооб­ще­ние в спа­ме. Если все это не дает поло­жи­тель­но­го резуль­та­та, тогда воз­мож­но про­бле­ма заклю­ча­ет­ся в том, что настрой­ки ваше­го хостин­га не поз­во­ля­ют отправ­лять email таким обра­зом. В этом слу­чае, мож­но поре­ко­мен­до­вать уста­но­вить допол­ни­тель­ное рас­ши­ре­ние Contact Form 7 to Database Extension, кото­рое поз­во­ля­ет сохра­нять инфор­ма­цию, пере­да­ва­е­мую через фор­му в базе дан­ных сай­та. После это­го ее мож­но про­смат­ри­вать через адми­ни­стра­тив­ный интер­фейс WordPress или интер­фейс управ­ле­ния базой дан­ных.

Визу­аль­ное отоб­ра­же­ние фор­мы опре­де­ля­ет­ся настрой­ка­ми вашей темы оформ­ле­ния и для изме­не­ния этих настро­ек ско­рее все­го потре­бу­ет­ся помощь спе­ци­а­ли­ста (или, как мини­мум, базо­вые зна­ния в обла­сти CSS, почерп­ну­тые из выше упо­мя­ну­той кни­ги «HTML, XHTML и CSS для чай­ни­ков». Но даже в сво­ем началь­ном состо­я­нии «по умол­ча­нию» наша кон­такт­ная фор­ма вполне при­год­на к исполь­зо­ва­нию. И кто зна­ет, какие новые воз­мож­но­сти и свя­зи она спо­соб­на при­не­сти ваше­му про­ек­ту.