Веб-формы — это поля, которые заполняет посетитель сайта, если хочет на нем зарегистрироваться, оставить комментарий или что-то купить. Чем проще и удобнее форма, тем больше вероятность, что пользователь заполнит ее до конца и таким образом совершит нужное владельцу сайта целевое действие. В этой статье мы расскажем о правилах, с которыми вы сможете создать эффективные веб-формы и получить с их помощью больше заявок и прибыли.
Зачем соблюдать правила создания веб-форм
Удобная форма поднимает конверсию сайта — потенциальному клиенту проще и приятнее регистрироваться и расплачиваться. Правило действует и в обратную сторону — чем сложнее, неочевиднее и требовательнее процедура регистрации или заказа, тем больше шансов, что клиент ее не завершит. Например, компания Marketo из США в рамках эксперимента сознательно вносила в формы необязательные строки — это приводило к снижению конверсии.
Если вас не устраивает конверсия сайта или вы видите в сервисах аналитики, что пользователи уходят, не завершив регистрацию или покупку, попробуйте улучшить веб-формы — например, упростить их или дать небольшую инструкцию по заполнению. Ниже мы расскажем, как это сделать. Наши советы пригодятся и тем, кто создает сайт с нуля и хочет сразу сделать его эффективным.
Стандарты оформления веб-форм
Главное правило — на заполнение веб-формы должно уходить как можно меньше сил и времени. Чем короче и проще форма, тем лучше. Еще стоит придерживаться таких стандартов:
Просите только данные, которые вам точно нужны. Постарайтесь не создавать лишние строки, оставив только обязательные поля. Например, вряд ли вам нужен адрес и индекс посетителя, если вы продаете онлайн-курсы или цифровые книги. Также можно обойтись и без телефона пользователя, если он просто регистрируется на сайте.
Первая форма требует слишком много данных. По возможности лучше делать короткие формы, как на второй иллюстрации. Чтобы зарегистрировать пользователя, нет нужды требовать от него столько информации
Подскажите, что надо вводить. Наверняка вы сталкивались с плейсхолдером — информацией, которая заранее введена в поле формы. Как правило, она объясняет пользователю, что нужно вводить. Также в плейсхолдере можно указать требования к данным — например, если требуется пароль длиннее определенного количества знаков.
Вход в VK ID. В поле автоматически указан телефонный код — это подсказывает пользователю, что нужно вводить свой номер
Подсвечивайте ошибки. Если пользователь ошибся во время заполнения полей, покажите ему, где именно он это сделал. Например, выделите такие поля красным. Не забудьте указать, как исправить ошибку: скажем, ввести серию и номер паспорта в одном поле.
Если во время регистрации в «Яндекс Маркете» указать неправильную почту, форма подсветит ошибку и подскажет, что нужно сделать
Сохраняйте введенную информацию. Пожалуй, со всеми так было: долго заполняешь поля, делаешь одну ошибку, а система сбрасывает данные. Это раздражает — есть риск, что гость не станет заполнять форму снова и уйдет с сайта. Чтобы этого не произошло, сохраняйте все данные, даже ошибочные. Пользователю будет проще их поправить, чем вводить заново.
Сервис «Суточно.ру» сохраняет введенную информацию, даже если она неправильная
Будьте аккуратнее с кнопкой «Отмена». Пользователь может случайно на нее нажать и после этого уже поленится повторно заполнять данные. Если без «Отмены» никак, то оформите эту кнопку иначе и попросите пользователя подтвердить свое действие.
Если без «Отмены» никак, сделайте ее как в нижнем варианте — с другим дизайном. Так меньше шансов, что пользователь по ошибке на нее нажмет. Источник
Показывайте, сколько форм осталось заполнить. Если нужно заполнить не одну форму, а несколько — показывайте ход заполнения. Например, укажите цифрами, что посетитель находится на первом шаге заполнения, а всего их будет пять.
Заказать товар можно в четыре этапа. Сайт показывает посетителю, на каком из этапов он сейчас находится
Возьмите у пользователя согласие на обработку данных. Это необходимо согласно статье 9 Федерального закона от 27.07.2006 № 152-ФЗ (ред. 06.02.2023) «О персональных данных». Почитать о соблюдении этого закона можно в нашей статье «Как соблюдать Федеральный закон „О персональных данных“». Чтобы посетитель мог дать согласие, разместите ссылку на пользовательское соглашение и уточните, что должен сделать пользователь — например, поставить галочку в специальном поле или просто нажать кнопку «Отправить».
Чтобы заказать отложенный звонок, пользователь соглашается на обработку его персональных данных
Как защитить веб-формы от спама
Чтобы на сайте не было спама, нужна специальная защита. Она устроена так: когда бот регистрируется на сайте, система пытается его выявить и не пустить. Защита обычно бывает двух видов: при помощи капчи и невидимая.
1. Капча. Это поле, в которое нужно ввести цифры, указать фрагмент картинки или вписать слово, показанное на фотографии. Можно установить сервисы Yandex SmartCaptcha или hCaptcha. Для работы первого сервиса потребуется подключить на сайт виджет SmartCaptcha (вот инструкция, как это сделать). Сервис hCaptcha интегрируется с WordPress и PHP. Капча неплохо обнаруживает ботов, но раздражает пользователя.
2. Невидимая защита от спама. Если вы не хотите заставлять гостей проходить капчу, можно использовать невидимые методы проверки. Их несколько, вот самые популярные:
- Время заполнения формы. В отличие от человека, бот заполняет поля мгновенно. Можно отказывать в регистрации, если видно, что форма заполнена слишком быстро. Правда, в таком случае систему может сбить с толку автозаполнение полей.
- Скрытое поле. Создается поле, скрытое от человеческого глаза, — в системе оно есть, но пользователь его не видит. Если поле заполнено — значит, форму заполнял бот. Увы, но схема работает не всегда — боты тоже умеют определять скрытое поле и обходить его.
- Фильтрация входящих данных. Можно попросить пользователя вводить данные определенным образом: например, указывать дату рождения через встроенный календарь. Если информация введена иначе — значит, дело рук бота.
Сам по себе ни один из способов не дает надежной защиты — программы обходят одиночные ограничения. Но если все условия соблюдены в комплексе, это отсечет большую часть ботов, особенно примитивных.
Как подключить веб-формы к сайту: практическое руководство
Чтобы самостоятельно добавить сложные многостраничные формы на сайт, нужно разбираться во frontend-разработке и UX-дизайне. Однако есть конструкторы форм для сайта — там можно создать форму буквально в несколько кликов. Как правило, в конструкторах небольшой выбор настроек, но для базовых нужд этого достаточно.
Как добавить форму в конструкторе сайтов RU-CENTER
Представьте, что нужно создать простую форму для сбора обратной связи от посетителей. Для этого вы хотите получить от пользователей их электронную почту и сопроводительные письма. Все эти данные будут приходить на почту.
1. Зайдите в административную панель сайта, сделанного в конструкторе RU-CENTER. Нажмите «Добавить контент», затем прокрутите до «Пользовательской формы» и перетащите ее на свой сайт.
2. Нажмите на форму. Вы попадете в панель настроек. Здесь можете добавить тему электронного сообщения, написать текст для кнопки и добавить адрес электронной почты, куда будут приходить пользовательские данные. В графе «Форма заголовка» напишите «Свяжитесь с нами», а в графе «Текст кнопки» — «Отправить». Нажмите «Добавить поле».
3. Дальше в графе «Тип поля» выберите «Поле для длинного текста» — ведь вы хотите получать развернутые истории. Нажмите «Добавить», затем «Сохранить». Всё, поле добавлено на сайт. В итоге форма выглядит вот так:
Как добавить форму для сайтов на WordPress
Если ваш сайт на WordPress, для создания формы нужно подключить плагин. Один из самых распространенных вариантов — WPForms. Там большой выбор инструментов для редактирования, есть и готовые формы. Но учитывайте, что для установки этого плагина нужен платный бизнес-аккаунт WordPress.
Как подключить плагин. Это займет несколько минут:
- Нажмите на кнопку «Плагины» в настройках WordPress.
- Затем введите «wpforms» в поиск.
- Выберите плагин WPForms и нажмите «Обновить и активировать».
Как настроить форму в WPForms. Создадим форму, где пользователю нужно будет ввести свое имя, фамилию и почту, а также рассказать, откуда он узнал о нашем сайте, и оставить комментарий. Вся информация отправится нам на почту. Для этого:
1. Откройте плагин — вы попадете в настройки. Выберите виджет Create a Simple Contact Form. По умолчанию уже есть поля Name, Email и Message. Чтобы добавить поле «Как вы о нас узнали», выберите вкладку Dropdown и перетащите ее в правый столбец. В настройках вкладки напишите название поля и вариантов выбора.
2. Затем зайдите в строку Settings и нажмите на General. Переименуйте форму и сохраните ее.
3. Осталось добавить форму на страницу. Для этого закройте плагин — вернетесь в настройки WordPress. Выберите Pages и нажмите Edit рядом со страницей, на которой вы хотите установить форму.
4. Нажмите Add Form и выберите в списке форму, которую вы создали. Всё — форма есть на сайте.
Итоговый результат. Пользователь может указать имя, фамилию и почту, а также уточнить, откуда он узнал о вас, и отправить письмо. Источник
Чек-лист: как сделать удобные веб-формы
Придерживайтесь таких правил:
- Не создавайте лишних полей.
- Помогите пользователю вводить правильные данные.
- Подсвечивайте ошибки.
- Сохраняйте введенную информацию.
- Будьте аккуратнее с кнопкой «Отмена».
- Показывайте ход заполнения.
- Запрашивайте у пользователя согласие на обработку данных.
Также старайтесь использовать невидимую капчу, которая не требует действий от пользователя.