Как сделать хорошую форму на сайте

Топ-10 конструкторов для создания форм для сайта

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

Что такое формы для сайта и какие задачи они решают

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

• обратная связь
• онлайн-заявка
• оформление заказа
• голосование
• тестирование
• подписка на рассылку

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

Отправка формы на почту. Верстка валидация и отправка формы без перезагрузки. AJAX. PHPMailer.

Топ-10 конструкторов форм для сайта

Google Forms

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

Особенности Google Forms:

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

Условия использования:

Программа полностью бесплатна. Вы получаете полный набор функций и 17 шаблонов оформления формы.

Яндекс.Формы

Сервис появился относительно недавно, но по некоторым параметрам он превосходит формы от Google.

Особенности Яндекс.Форм:

• Гибкая настройка уведомлений без дополнительных инструментов. Можно отправлять сообщения о заполнении на любую почту или в мессенджеры
• Широкий набор способов оформления. Реализация хромает, но при должном внимании можно сделать красивый дизайн для формы

Условия использования:

Доступ к сервису предоставляется бесплатно. Вы получаете понятный интерфейс и гибкие настройки.

TypeForm

Это сервис, главная фишка которого – дизайн. С ним вы получите форму с красивым оформлением: 80 шаблонов готового дизайна, которые можно внедрить в оформление формы. Для удобной аналитики и контроля обращений к TypeForm можно подключать Google Analytics и использовать Zapier для передачи данных между приложениями и сервисами.

Верстка сайта с нуля по макету — Форма обратной связи

Важные особенности сервиса:

• Широкие возможности оформления. Нескучные элементы – именно так можно описать TypeForm
• Более понятная форма подачи информации. Сервис показывает по одному вопросу за раз. Так пользователь не путается в данных и отвечает на поставленные вопросы более точно
• Удобное использование со стороны пользователя. Форму можно заполнить, используя только клавиатуру
• Удобство со смартфонов. Сегодня это приобретает максимальное значение, ведь большая часть трафика в интернете – это мобильные пользователи

Условия использования:

Сервис условно бесплатный. Условно, потому что в бесплатной версии можно создавать формы до 10 вопросов и с ограничением в 100 показов в месяц. При оплате полной версии, все ограничения снимаются. Набор способов оформления очень широкий: 80+ разнообразных шаблонов.

Cognito Forms

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

Особенности Cognito Forms:

• Удобная работа со стороны разработчика формы и пользователя. Интерфейс понятен для пользователя, для разработчика создан качественный интерактив. Блоки можно перетягивать, задавать любые типы данных
• Широкий выбор условий ответов: выборки, выпадающие списки, множественный выбор – все способы заполнения данных
• Доступ по ссылке и интеграция на сайт

Условия использования:

Сервис доступен на бесплатной основе, но с ограничениями до 500 просмотров записей. Цены полной версии 15$ для двух администраторов, 35$ – для 5 и 99$ – для 20.

stepFORM

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

Особенности:

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

Условия использования:

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

Askbox

Это сервис mail.ru, он задумывался как инструмент тестирования сотрудников компании, но дорос до сервиса сбора данных разной аудитории, в том числе клиентов в любой сфере бизнеса.

Особенности:

Главная фишка Askbox – гибкие настройки форм. Можно настраивать внешний вид блоков, подстраивать опрос под нужды аудитории, брендировать форму. Сервис не лишен недостатков, основная проблема, с которой сталкиваются пользователи – сложный редактор, настройка утяжеляется и со старта понять интерфейс будет трудно.

Условия использования:

Есть бесплатный тариф, включает 1 опрос, на который можно получить 100 ответов. Дальше придется платить от 990 рублей до 8300 в зависимости от потребностей вашей компании.

jotForm

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

Особенности:

• Возможность подключения сервисов онлайн-платежей 30+ шлюзов
• Широкий набор шаблонов оформления. Их в системе более 10 000. Можно реализовать любую форму с сотнями вариантов оформления
• Интеграция Dropbox, Zoom, продуктов Google и других сервисов

Условия использования:

Есть бесплатный тариф, но он ограничен: можно создать 5 форм и получить всего 100 ответов и 10 платежей. Дальше – доплачиваем за расширение возможностей:

EmailMeForm

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

Особенности:

Основная фишка – широкие возможности оформления и структуризации опроса. Можно делать разбивки и разграничения полей. Редактор позволяет посмотреть изменения в режиме реального времени, не публикуя форму.

Условия использования:

Есть бесплатный триал на 15 дней, дальше оплачивается один из тарифов.

123FormBuilder

Конструктор с большим выбором шаблонов: более 200 и инструментов для создания удобных опросов. Хорошо адаптирован для работы с CMS WordPress и конструктором сайтов WIX.

Особенности:

• Отправка уведомлений о заполнении формы сразу на три почтовых ящика. Отслеживайте обращения вместе с коллегами и своевременно реагируйте на заявки
• Возможности настройки CSS. Можно подстраивать оформление, брендировать форму, используя свои цвета и шрифты
• Создание тем. Отличная функция для переноса оформления на все создаваемые формы в вашем кабинете

Условия использования:

Есть бесплатный тариф с ограничениями в 5 форм до 10 полей и 100 показов ежемесячно. После внесения оплаты за тарифы, открывается дополнительный функционал: больше шаблонов, редактор HTML и CSS.

Formstack

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

Особенности:

• Поддерживает A/B-тестирование. Создавайте разные формы и тестируйте, какая работает лучше всего
• Редактор кода. Благодаря встроенному редактору кода, можно сделать любое оформление для формы
• Удобный интерфейс для пользователей разного уровня подготовки

Условия использования:

Есть бесплатный триал на 14 дней + тарифы под любые цели:

Дополнительные различия между тарифами:

Выводы

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

• Если нужно 100% бесплатное решение с простым функционалом, обратите внимание на Google Forms или такой же продукт Яндекса
• Если у вас сайт на WordPress и хотите интегрировать в него форму, обратите внимание на 123FormBuilder
• Если бизнес достаточно крупный и есть средства на реализацию нестандартных решений – выбирайте jotForm

Оцените потребности бизнеса → изучите нашу подборку → выбирайте оптимальный инструмент.

Источник

Формы для сайта: юзабилити форм

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

Основные виды форм для сайта

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

Форма заказа обратного звонка

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

В развернутой версии достаточно двух полей «Телефон» и «Имя» и где обязательно для заполнения только первое:

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

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

Форма консультации

«Форма-спасатель» для тех пользователей вашего сайта, которые не смогли найти нужную информацию на странице, но хотят сделать заказ. Лучше размещать в одном из двух вариантов: либо в свернутом виде в правом нижнем углу экрана, либо в развернутом – внизу на Главной и на страницах каталога товаров или услуг.

Первый вариант размещения (пример с сайта Танго и Кэш):

Второй вариант размещения (пример с сайта Okna-dpa):

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

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

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

Форма обратной связи на странице контактов YouDesign:

Форма заказа услуг

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

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

• «Вид услуги» или «Тариф» – данное поле лучше заполнять автоматически или разместить в виде текста в начале формы
• «Имя»
• «Телефон» – сделайте поле обязательным для заполнения
• «Email» – чтобы продублировать информацию о заказе клиенту
• «Комментарий» – возможно, у клиента есть уточнения

Каждый бизнес индивидуален и вам могут понадобиться дополнительные параметры, но рекомендуем размещать не более 5-7 полей, чтобы не отталкивать клиента. Если все-таки большого количества полей не избежать, то визуально группируйте их по тематикам, чтобы сократить количество ошибок при вводе информации. Пример простой формы заказа на сайте компании Строя:

Форма заказа товаров

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

Для новых клиентов. Не заставляйте их регистрироваться, чтобы возвратиться к заказу. Так вы только оттолкнете их. Достаточно добавить несколько полей с контактной информацией. Спросите имя, телефон, email и адрес доставки. Так пользователю не придётся совершать лишние действия, а вы получите нового клиента.

По email можно сделать автоматическую регистрацию и выслать клиенту пароль на почту.

Пример размещения полей в форме для новых пользователей на Ozon:

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

Форма заказа на Wildberries, где даже выводится прошлый выбор способа доставки и оплаты (но оставляют возможность их изменить):

Многие разбивают ввод адреса доставки на несколько полей, отдельно запрашивая индекс, название города, улицы, номер дома и т.д., что выглядит очень громоздко. Антипример с сайта Ангорочка:

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

Обязательными полями для ввода следует сделать контактные данные, адрес доставки, выбор способа доставки и оплаты. Форму можно выводит поэтапно, но и не возбраняется показать все поля сразу. Главное, визуально разделите их на смысловые группы.

Форма регистрации

Рекомендуем отделять ее от формы авторизации, потому что многих новых клиентов дезориентирует кнопка «Войти». Две ссылки рядом не будут занимать много места и сократят время поиска. Также форма всегда должна быть заметна, поэтому лучше разметить ее в шапке сайта. Самый привычный вариант – в верхнем правом углу в виде ссылки (пример от Аква-Вива):

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

Шикарная практика предлагать клиентам зарегистрироваться через соцсети. Так клиенту не придется придумывать пароль и в целом регистрация пройдет быстрее. Пример использования такой возможности на сайте Asos:

Данный интернет-магазин зарубежный, поэтому приведены популярные соцсети тех стран, для русскоязычной аудитории лучше убрать Twitter и добавить кнопки для Вконтакте, Одноклассников.

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

Форма авторизации

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

Пример хорошей формы авторизации от Lamoda, где предлагают два варианта входа на сайт:

Восстановление пароля привычнее всего делать по адресу почты, отправляя клиенту ссылку на форму ввода нового пароля. Генерирование автоматического «временного» пароля заставляет пользователя самому искать форму смены пароля, что неудобно и только лишние заморочки для клиента. Такого лучше не допускать.

Форма подписки на рассылку

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

Разместить форму следует на Главной странице, чтобы пользователь сразу увидел, что есть такая возможность. Лучше после всей основной информации, внизу страницы (пример от Lavkalavka):

Если на сайте есть блог, и в письмах, помимо товаров и услуг, вы анонсируете новые статьи, то тогда можно добавить форму на общей странице раздела, например, справа от статей, как это сделало у Vkusnosti by Mado:

В форме подписки, конечно же, нужно поле «Email», и еще можно спросить имя, чтобы сделать письма более персонализированными.

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

Общие рекомендации по юзабилити форм

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

Формы во всплывающих (модальных) окнах. Следует выводить их только после клика пользователем по нужной ссылке или кнопке. Никаких «всплывашек» при открытии Главной страницы или при попытке клиентов покинуть сайт. Онлайн-консультант тоже не должен «выскакивать», предлагая начать чат.

Такие вещи раздражают и отталкивают пользователей. Антипример от Delicat-Servis (сейчас ребята убрали эту проблему, и форма раскрывается только после клика):

Удобный вариант расположения подписей и подсказок (на сайте Xarakiri.ru):

Итоги

К каждой форме следует подходить индивидуально, поэтому невозможно описать все случаи в одной статье. Главный принцип, которым следует руководствоваться – минимум полей. Лучше позвонить клиенту и уточнить детали устно, чем заставлять его заполнять длинные формы. Возможно у клиента возникли какие-то дополнительные вопросы, тогда звонком вы решите две проблемы.

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

P.S. Если вам нужна информация о том, как создавать формы (техническая сторона вопроса), нужны рекомендации по коду, удобным конструкторам и т.д., тогда пишите вопросы в комментариях, сделаем по этой теме отдельную статью.

Источник

Юзабилити для чайников. Часть 2: какими должны быть формы на сайте

Дмитрий Дементий Редакция «Текстерры»

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

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

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

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

Помещайте текст над полями формы

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

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

В формах не должно быть кнопки «Отменить»

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

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

Избавляйте пользователей от бесконечных кликов по шаговым регуляторам

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

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

В форме поиска кнопка «Искать» должна быть расположена слева

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

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

Форма подтверждения возраста должна быть простой

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

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

Идеальная форма подтверждения возраста имеет одну кнопку:

Длинные формы должны немедленно проверять корректность заполнения полей

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

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

Соединяйте поле поиска и кнопку «Найти»

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

Если кнопка и поле имеют разную ширину, расположены слишком далеко друг от друга или смещены относительно друг друга, пользователь не воспринимает форму поиска единым целым. Он тратит слишком много времени на восприятие, оценку и интерпретацию объекта, что уменьшает эффективность формы. Хорошая форма поиска выглядит так:

Текст в поле повышает эффективность форм

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

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

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

Используйте капчу-слайдер. Эта защита эффективно работает против ботов, однако не заставляет людей отказываться от заполнения форм.

Сделайте форму регистрации максимально простой и удобной

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

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

• Используйте функцию автозаполнения для полей с географическими данными (страна, город).
• Позвольте пользователям входить на сайт с помощью ника или адреса электронной почты.
• Позвольте пользователям входить на сайт через учетные записи в Facebook, Twitter и других социальных сетях.

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

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

Объедините общий поиск по сайту с поиском по разделам

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

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

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

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

Сократите форму поиска ближайшего отделения до одного поля

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

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

Подсказывайте пользователям формат заполнения форм

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

Формы для входа на сайт не должны находиться на главной странице

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

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

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

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

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

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

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

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

Источник

20 советов по работе с HTML формами на сайте

Хорошие html формы для сайта требуют внимания, по крайней мере, в четырех пунктах:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Семантика

1: используйте fieldsets для инкапсуляции в аналогичных областях

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

2: ярлыки fieldsets с легендами

Вряд ли имеет смысл использовать FIELDSET не дав ему четкое название. Мы можем улучшить приведенный выше код, используя элемент legend в контейнере fieldsets. FIELDSET элемент имеет границу по умолчанию, и легенда будет заложена над этой границей.

3: Дайте имя inputs

Если вы хотите передать данные формы через скрипт, то каждый входной (input)элемент должен иметь имя, если вы используете PHP, эти имена станут ключом к глобальному массиву, как правило, $ _POST или $ _GET.

4: Используйте тег label

Давайте продолжать совершенствовать этот код, там нет ничего плохого в использовании тега label перед input.

5: Дайте тегу label атрибут «for»

Мне очень нравится атрибут «for»; он дает возможность привязать тег label к input. Значение ‘for’ должно быть такое же, как идентификатор данных, с которыми вы хотите связать его.

На первый взгляд, это одна из тех вещей, которая только кажется, что влияет на качество вашего кода, но они делают специальные работы в видимом содержании: когда определены атрибуты «for», label становится «интерактивной» областью , которая будет сосредоточена на input.

6: Используйте параметр OPTGROUP, чтобы классифицировать группы

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

Это дает нам следующие результаты:

7: Всегда назначайте полные атрибуты

При работе с формами в частности, соблазнительно написать так:

Да, он делает то, что должен делать. Нет, вы не должны так кодировать! Это не соответствует стандартам. Всякий раз, когда вы добавляете атрибуты элемента, не срезайте углы.

8: Используйте кнопки вместо Submit Inputs

Как правило, была универсальной кнопкой «Отправить». Но HTML имеет элемент (кнопка). Почему бы вам его использовать? Ну, обычно, легче стилизировать кнопки; Также, вы можете поместить изображения в пределах кнопки, поэтому кнопки действительно обеспечивают большую гибкость. Вы можете читать больше в этих двух статьях.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Доступность

9: Положите tabindex в inputs

Определенно легче сделать вкладку с помощью формы, чем использовать мышь… Однако, по умолчанию, ваш пользователь будет проходить вкладки в том порядке, в котором они прописаны в HTML. Если это не тот порядок, который вы хотите, вы можете легко добавить свойства TabIndex в input; TabIndex принимает числовое значение, и будет прыгать в input со следующего большего значения, когда вы нажмете клавишу табуляции.

10. Определите при необходимости ключ доступа

Ключ доступа атрибутов создает сочетание клавиш, которые будут определяться как ввод: Ярлык ALT (Option) + значения ключа доступа. Конечно, вы не установите ключ доступа на каждом вводе, но это, несомненно, будет полезно, например, поле поиска. Не забудьте указать пользователям о значении ярлыка, часто это делается подчеркиванием символа как части ярлыка.

11. Используйте хорошие методы фокусировки

Можно утверждать, что этот пункт также на стороне дизайна, как и доступность. Это всегда хорошо, если поле формы (как правило, в текстовом поле, в данном случае) изменяет цвет при наведении, но для инвалидов по зрению, это почти требование, если использовать форму корректно. Для этого можно использовать наведение psuedoclass в вашем CSS; это будет работать во всех распространенных браузерах, кроме версии IE7 и ниже. Вы также можете использовать JavaScript для этого; Jquery имеет Hover .

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

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

Функциональность

В большинстве случаев вам не нужно будет делать ENCTYPE атрибут тега form, он по умолчанию будет в «Application / X-WWW-форм-urlencoded». Однако, если у вас есть файл ввода (input), который позволяет пользователю загрузить файл, вы должны использовать «составные формы-данных (multipart/form-data)».

14: Знайте, когда использовать «Get» и когда использовать «Post»

Форма может отправить свои данные двумя способами: «Get» и «Post», вы определяете один из методов в атрибуте тега form. Какая разница, и когда вы должны их использовать? Игнорируя то, что происходит на сервере, основным отличием является то, как браузер посылает информацию. С GET, данные формы отправляются в качестве запроса, видимого в URL. Итак, эта форма. . .

. . . приведет к URL, когда это представляется: www.example.com/you.php?fname=Bill проверка в браузере позволяет предупредить пользователей об ошибках, прежде чем представить форму, которая требует менее одной транзакции с сервером. Тем не менее, всегда будьте готовы сделать проверку на сервере ради безопасности.

16. Дайте вашим пользователям хорошие предупреждения

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

Пусть текст о некорректном вводе поля отображается рядом с некорректным полем, и пусть ваш пользователь знает, что случилось с их входом. Мне нравится использовать JQuery’s Blur () в этом случае: как только пользователь переходит в следующее окно, предыдущие проверяются.

17. Попробуйте использовать AJAX для submit

Много раз результаты после заполнения формы были следующими: «Спасибо», «Проверьте свою электронную почту для подтверждения», или «Мы вернемся к вам, когда мы сможем». В таком случае, это ли не лучшее место для использования AJAX? Вы можете просто снизить форму передачи данных с JQuery или (Ваша любимая библиотека), и исчезнуть в своем сообщении.

18. Убедитесь, что форма работает без Javascript

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

Дизайн

19. Стиль формирует последовательность

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

Сохраните, по крайней мере, один край всех полей на одной линии. Tuts + формы комментариев – замечательные примеры хорошо-стилизованных форм.

20. Подумайте об использовании JavaScript последовательных Стилевых форм над разными платформами

С возрастными браузерами /операционными системами, согласованность элементов формы вряд ли возможна. . . без помощи JavaScript. Если вы хотите, чтобы ваши формы выглядели так же, практически на любом браузере нужно проверить jqTransform плагина Jquery, плагины, которые направлены непосредственно на решение проблемы совместимости. Просто включите его, звоните, и настройте CSS файл на свой вкус, оно работает с IE6 +, Safari 2 +, Firefox 2 +, и Chrome.

21.Пусть Вас вдохновляют другие

Если у вас возникли проблемы с придумыванием уникального дизайна формы для своего сайта, ищите вдохновение! Smashing Magazine имеет большую подборку форм и Smileycat «Элементы дизайна» Галерея имеет кучу Блогов Комментариев к формам, которые стоит проверить.

Заключение

22: Смотри вперед в HTML 5 Формы

HTML 5 имеет много функций для веб-форм. Две наиболее интересных из них имеют новые type для input (например, URL, электронной почты и дату) и DataList элемент, который может быть использован для простого автозаполнения. Когда эти и другие части спецификации выполнены, динамичные формы будут намного проще!

Перевод и редакция: Рог Виктор и Андрей Бернацкий.

Будем надеяться, что эти двадцать с лишним советов по работе с HTML формами на сайте, помогут вам.

Источник