Дизайн форм и копирайтинг

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

Элементы форм

• высота поля для заполнения должна быть не менее 30px или 35px для мобильных устройств
• рекомендуемый текст на кнопке  CTA - глагол в неопределенной форме с обращением к действию: в форме авторизации “ВОЙТИ”, в форме оформления корзины товаров - “ЗАКАЗАТЬ СЕЙЧАС”, “ПОЛУЧИТЬ ПОДАРОК”
• в поле, где нужно ввести номер телефона, есть маска ввода номера
• располагайте поля в таком порядке, чтобы для их заполнения не приходилось переключать раскладку клавиатуры более одного раза
• по статистике, форма с одним полем заполняют 16%, с 2 и 3 полями - 14%, 4 и более полей - те же 14%. Старайтесь делать как можно меньше обязательных полей, но универсального рецепта нет - все зависит от сферы и особенностей интернет-магазина. Например, если у вас идет автокалькуляция доставки товара в зависимости от города или района, дополнительные уточняющие поля будут уместны. Однако их лучше разделить на модули, которые будут активны только при необходимости, как это сделано, например, на готовом интернет-магазине magaz.a25.ru
• не рекомендуется добавлять отдельное поле с для скидочного промо-кода, потому что до 93% покупателей  уходят гуглить промокод и оставляют брошенные корзины, не вернувшись. Рекомендуется добавить вопрос или утверждение с активной ссылкой (У меня есть промокод)

Функционал форм заказа и проверка ошибок при заполнении

• проверка правильности заполнения всех полей осуществляется только после завершения заполнения поля
• сообщения об ошибке содержат инструкцию по исправлению
• кнопка CTA-формы не активна до момента корректного заполнения всех обязательных полей
• при нажатии неактивной кнопки фокус (и курсор) возвращается к первому полю, требующего исправления
• после нажатия кнопка CTA становится неактивной - во избежание дублирования заявок
• после корректного отправления заявки обязательно поблагодарите заполнившего форму и сообщите на активной странице, что заявка успешно отправлена или заказ принят в работу
• сообщите обратную связь о том, когда пользователи смогут получить ответ на свою заявку: конкретное время ответа мотивирует заполнить все поля и предоставить максимально подробную информацию
• ограничение типа вводимой информации (для e-mail, номера телефона, индекса)
• форма “запоминает” введенные данные в случае ошибки, перезагрузки или случайного закрытия страницы
• все поля для ввода секретных данных (пароль, код безопасности, CVV и др.), с помощью звездочек скрывают вводимую информацию

Навигация между элементами формы

• переход между полями с помощью клавиши Tab в верной последовательности
• в элементах с выпадающим списком, чекбоксом или радио-кнопкой должна быть предусмотрена возможность сменить выбранный вариант с помощью стрелок и подтвердить выбор с помощью кнопки Enter
• лид-форма должна располагаться на первом экране и видна без прокрутки
• многоуровневые формы должны быть разбиты на модули и отображаться в виде статичной ленты прогресса, позволяющей вернуться на любой этап без потери введенных данных

Дополнительные элементы

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

Проверка оптимизации сайта