С комплектами форм вы можете самостоятельно делать уникальные вагаси

Отмечайте необязательные поля

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

Отмечайте необязательные для заполнения поля. Впишите слово «Необязательно» или «По желанию» прямо в поле. Это сделает процесс заполнения формы более комфортным для пользователя.

События DOM

Отслеживая события DOM, вы можете сделать что-либо в нужный момент при работе с формой. К примеру, после успешной отправки формы сказать «Спасибо» в всплывающем окне или перенаправить пользователя на другую страницу.

Этот способ пришёл на смену коду on_sent_ok и on_submit, который мы писали во вкладке формы «Дополнительные настройки».

Список событий формы

Обеспечивайте возможность ставить флажок в чекбоксе нажатием на текст

Если текст расположен слева или справа от полей формы, пользователь потратит больше времени на ее заполнение. Это связано с особенностями восприятия: чтобы внести нужные сведения, человек совершает больше визуальных фиксаций.

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

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

С комплектами форм вы можете самостоятельно делать уникальные вагаси

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

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

Эта проблема решается помещением текста над полями формы.

Капча останавливает не только спам-роботов, но и пользователей

Как бороться со спамом в плагине Contact Form 7? Предусмотрено несколько механизмов, но лишь пара являются популярными: reCAPTCHA и Akismet.

Есть простой способ отслеживать события формы через Google Analytics.

Бесплатный плагин Flamingo позволяет сохранять отправленные формы Contact Form 7 в базе данных. А затем их можно читать и экспортировать в файл с расширением CSV.

Плагин работает сразу после установки. Создадим форму.

Шаблон формы

Ваше имя
[text name-client]

Ваш email
[email email-client]

Ваше сообщение
[textarea your-message]

[submit "Отправить"]

Шаблон письма

Имя: [name]

Сообщение:
[your-message]

Сообщение №[_serial_number]

Здесь вставлен тег [_serial_number], который преобразуется в номер (ID) сообщения.

Вы наверное заметили, что некоторые поля, такие как Subject (тема) и From (от кого) заполнены некорректно. Дело в том, что плагин ориентируется на дефолтную форму, которую создал Contact Form 7, в который есть такие поля, как your-subject, your-name и your-email. Если Flamingo полей с такими именами не находит, то получается такой казус.

flamingo_name: "[name-client]"
flamingo_email: "[email-client]"
flamingo_subject: "Сообщение от клиента"

Список сохраненных сообщений

Сохраненное сообщение с правильно прописанными тегами

Заметьте, в моем шаблоне формы не было поля flamingo_subject, но чтобы в админке колонка subject была осмысленно подписана, а не так как на скриншоте, я задал тему письма «жёстко» в виде строки.

flamingo_name: "[first-name-field] [last-name-field]"

Если вы страдаете от наплыва спама или нежелательных сообщений, а CAPTCHA или Akismet не справляются, то выручить может встроенный в движок функционал «Черный список».

Черный список находится в админке по пути Настройки -{amp}gt; Обсуждение.

Если сообщение, отправляемое через Contact Form 7, содержит какие-либо из этих слов в своём тексте, имени автора, URL, адресе e-mail или IP — оно будет помечено, как спам, и отправлено не будет. Каждое слово или IP с новой строки. Используется поиск по подстроке, то есть по слову «купи» будет найдено «купить».

Как узнать IP-адрес, с которого приходит спам через форму Contact Form 7? Самый простой способ заключается в использовании специального тега [_remote_ip]. Данный тег вставляется в шаблон письма и будет заменен на IP-адрес отправителя при отправке письма.

Как в теге select объединить похожие option в отдельные группы? Данный функционал может обеспечить html тег optgroup, но по умолчанию плагин Contact Form 7 это не умеет. Рассмотрим способы решения этой нестандартной для плагина задачи.

[select engines "optgroup-Бесплатные движки" "Wordpress" "Joomla!" 
				"Drupal" "Grav" "endoptgroup" "optgroup-Платные движки" 
				"1С-Битрикс" "DLE (DataLife Engine)" "UMI.CMS" "NetCat" 
				"ImageCMS Shop" "endoptgroup"]

Имя поля выбрано engines, потому в шаблоне письма используем тег [engines], чтобы на почту пришло выбранное пользователем значение.

Добавляем JavaScript

jQuery(document).ready(function($){

	var selectEngines = $('select[name=engines]');
	var foundin = $('option:contains("optgroup-")', selectEngines);

  $.each(foundin, function(value){
	var updated = $(this).val().replace('optgroup-','');
	$(this).nextUntil('option:contains("endoptgroup")').wrapAll('{amp}lt;optgroup label="' updated '"{amp}gt;{amp}lt;/optgroup{amp}gt;');
  });

  $('option:contains("optgroup-"), option:contains("endoptgroup")', selectEngines).remove();

});

Данный код реализован на jQuery. Вставлять его следует в js файл темы или создать новый js и подключить. Так как имя тега было engines, то в этом коде указываем именно его, то есть select[name=engines].

Оригинальный html код поля select

Еще одна причина поместить текст над полями формы

Кнопки «Отменить», «Cancel», «Нет» делают формы менее эффективными. Во-первых, они позволяют пользователю отказаться от покупки, подписки или регистрации. Во-вторых, клиенты могут нажимать эти кнопки случайно.

Кнопка «Отменить» уместна только в диалоговых окнах или индикаторах процесса.

Большинство дизайнеров помещают кнопку «Искать» справа от формы поиска. Это не лучшее решение: пользователь сначала оценивает форму, потом кнопку, затем возвращается к форме для ввода нужного слова, после чего снова возвращается к кнопке.

Если кнопка расположена слева, это сокращает число визуальных остановок до трех.

Лишние кнопки в форме подтверждения делают форму менее эффективной.

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

Если форма достаточно длинная, пользователь может не заметить одно или несколько сообщений об ошибках. Ему придется заполнять форму несколько раз. Эта проблема решается с помощью немедленной проверки корректности заполнения.

С комплектами форм вы можете самостоятельно делать уникальные вагаси

Если вы оставляете пустое пространство между полем поиска и кнопкой «Найти», это может привести к проблемам восприятия.

Чтобы решить эту задачу, воспользуйтесь следующими рекомендациями:

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

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

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

Подсказки должны появляться при наведении курсора на соответствующий знак или ссылку. Это избавляет пользователя от страха покинуть форму и потерять введенную информацию.

Формы поиска, состоящие из нескольких полей, пугают пользователей.

Чтобы найти ближайшее отделение, пользователь должен заполнять только одно поле.

Это значительно увеличивает скорость заполнения и избавляет пользователей от ошибок. Подсказка может находиться непосредственно в полях формы или под ними.

Если поле для входа на сайт находится в верхнем правом углу страницы, пользователи могут перепутать его с формой поиска.

С комплектами форм вы можете самостоятельно делать уникальные вагаси

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

Contact Form 7 по умолчанию оформляет чекбоксы и радиокнопки в линию. Но это можно изменить с помощью настроек тега этих полей и простых CSS правил.

[checkbox your-cb label_first "Option 1" "Option 2" "Option 3"]

Допустим, нам нужно сделать контактную форму, где пользователю предлагают с помощью выпадающего списка выбрать его местоположение. Есть около 200 стран мира и создание такого списка выльется в мучение.

Добавление Cc, Bcc и других заголовков письма

Contact Form 7 во вкладке с настройкой шаблона письма имеет поле для отправки дополнительных заголовков (Additional Headers) по правилу название-заголовка: значение. Каждый заголовок должен идти с новой строки.

Рассмотрим самые популярные — Reply-To, Cc и Bcc, об остальных читайте на Википедии.

Reply-To
Имя и адрес, куда следует адресовать ответы на это письмо. К примеру, вы в форме попросили пользователя указать его email. Используйте его, чтобы почтовый клиент сразу знал, на какой email надо отправить ответ.
Cc
(от англ. carbon copy) содержит имена и адреса вторичных получателей письма, к которым направляется копия.
Bcc
(от англ. blind carbon copy) содержит имена и адреса получателей письма, чьи адреса не следует показывать другим получателям.

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

Теги отправки

5 самых убедительных слов в русском языке

Contact Form 7 автоматически использует перевод того языка, который вы используете в админке. Меняется язык в Настройки -{amp}gt; Общие -{amp}gt; Язык сайта (выпадающий список). Но так изменится язык для всего сайта. А что делать, когда у вас авторы говорят на разных языках?

Для этого разработчики предлагают использовать плагин Bogo, который для каждого пользователя даёт возможность переключать язык админки. После активации в тулбоксе рядом с вашим ником появится переключение языков.

  • Ты
  • Бесплатно
  • Потому что
  • Мгновенно
  • Новый

Думаю, вы выдели эти слова много раз, и запомнили их уже. Исследования показывают снова-снова, что эти слова не перестают работать.

Где попробовать: Призывы к действию, заголовки, email, в шапке, открывая предложения и абзацы.

Рецепт создания эффективных форм

Чтобы формы на сайте работали эффективно, сокращайте количество полей. Ярлыки должны находится над полями формы, так как это сокращает число визуальных фиксаций и облегчает работу с формой мобильным пользователям. Отмечайте необязательные поля, не используйте кнопку «Отменить», используйте подсказки.

P.S. У этой статьи есть еще одна часть: «Юзабилити для чайников. Часть 1: какими должны быть кнопки на сайте».

По материалам сайта UX Movement.

Понравилась статья? Поделиться с друзьями:
Инфознания
Adblock
detector