Как сделать все поля обязательными для заполнения

Содержание
  1. Пометка обязательных полей в формах
  2. Обязательные поля формы
  3. Обязательные поля в формах — отмечать или нет?
  4. Искушение не отмечать обязательные поля
  5. Как пометить обязательные поля?
  6. Можно ли отмечать необязательные поля?
  7. Как насчет форм авторизации?
  8. Заключение
  9. Все обязательные поля формы заполнены. Поля обязательные для заполнения. Не заставляйте пользователей запоминать очередной логин
  10. Параметры для всех собственных полей
  11. 1.Используйте необязательные поля вместо обязательных
  12. 4. Располагайте метки полей справа или сверху
  13. Поля ввода данных о кредитке должны располагаться так, как на самой карте
  14. 5. Всплывающие подсказки помогут избежать хаоса в форме
  15. 6. Четко укажите, зачем вам нужна запрашиваемая информация
  16. 7. Не заставляйте пользователей запоминать очередной логин
  17. 8. Отображение этапов заполнения формы
  18. 9. Тестируйте капчи
  19. 10. Призыв к действию должен быть четким
  20. 11. Поля ввода данных о кредитке должны располагаться так, как на самой карте
  21. 12. Адрес доставки по умолчанию повторяет адрес плательщика

Пометка обязательных полей в формах

Перевод статьи Nielsen Norman Group.

Аннотация: Использование звездочки для пометки обязательных полей — это простой способ улучшить удобство использования ваших форм. Отметка только необязательных полей затрудняет заполнение формы.

Общий вопрос на многих наших UX Conference: следует ли помечать обязательные поля в форме? Если большинство полей в форме являются обязательными, должны ли мы пометить их? (Это много пометок,в конце концов.) Краткий ответ — да. И оставшуюся часть статьи я объясню, почему.

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

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

Приложение для кредитных карт Citicards (слева) содержит инструкции, написанные маленьким шрифтом и курсивом. Все поля обязательны для заполнения, если не указано иное в верхней части формы; Форма American Express (справа) вообще не содержала инструкций. В обеих формах были отмечены только необязательные поля: в случае Ситибанка с несколько неясной аббревиатурой опт.

Что не так с этими “стратегиями”? Есть несколько проблем:

Люди не читают инструкции в верхней части форм

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

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

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

Люди должны анализировать форму, чтобы определить, является ли поле обязательным

Мы увидели, что независимо от того, указали ли вы инструкции в верхней части формы или нет, результат, скорее всего, будет одинаковым — люди будут их игнорировать или забывать. Итак, что происходит, когда пользователь заполняет форму? Как они узнают, обязательно ли поле для заполнения?

Что ж, более прилежные пользователи будут оглядываться, пытаясь выяснить — они анализируют форму и находят поле, помеченное как необязательное (иногда прокручивая страницу выше, как в примере с American Express, где первое необязательное поле появляется ниже мобильного сгиба); если пользователи найдут такое поле, они будут считать, что все, что не отмечено, обязательно для заполнения. Но это требует времени и затрат на взаимодействие — и опять же, зачем вам усложнять заполнение формы для ваших пользователей?

Однако большинство пользователей не будут искать примеров и анализировать форму, они просто сделают предположения. Например, они скажут: «Ну, номер телефона — им действительно не нужен мой номер телефона, не так ли? Может быть, я оставлю это поле пустым ». И даже если они заполняют это поле, необходимость сделать паузу, чтобы решить, нужно ли заполнение, замедляет взаимодействие и делает процесс более длительным и утомительным.(Помните, как бы вам ни хотелось думать иначе, никто не хочет заполнять форму — ни на маленьком, ни на большом экране.) Результатом будет ошибка отправки формы, которая означает, что потребуется еще больше времени на решение проблемы.

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

Здесь есть как минимум два варианта: звездочка (красная или нет) и слово «обязательно».

Источник

Обязательные поля формы

Дата публикации: 2016-10-03

От автора: приветствую вас, друзья. В этой статье мы с вами поговорим о валидации форм. Мы узнаем, как проверить форму перед отправкой на заполнение обязательных полей формы. Начнем?

Исходные файлы текущей статьи вы можете скачать по ссылке.

Итак, перед нами есть простейшая форма с полями, каждое из которых мы хотим сделать обязательным к заполнению. Каждое поле формы имеет тип text и примерно следующий код:

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

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

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

Ранее для валидации формы на клиенте нельзя было обойтись без возможностей JavaScript. Есть множество плагинов, позволяющих гибко провести валидацию формы и, в частности, проверить, заполнены ли обязательные поля. Однако в HTML5 можно вовсе обойтись без JavaScript и провести валидацию только средствами HTML5. Давайте посмотрим, как это сделать.

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

А теперь попробуем отправить форму, не заполняя ее.

Как видим браузер не дает отправить форму, подсказывая, что поле не заполнено. Чтобы помочь и подсказать пользователю, какие поля являются обязательными, принято рядом ставить красную звездочку, примерно так:

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

Читайте также:  Как сделать самодельный эхолот для рыбалки

Также стоит упомянуть о том, что кроме атрибута required, HTML5 предлагает нам и другие средства, позволяющие произвести простейшую валидацию и проверку формы на клиенте. Например, мы может проверить введен ли именно email в поле email, а не просто некая строка. Как это сделать — мы узнаем уже в следующей статье. Также не забывайте о том, что гибкая валидация формы возможно с помощью JavaScript. По этой теме вы можете посмотреть данный урок. На этом все. Удачи!

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

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

Источник

Обязательные поля в формах — отмечать или нет?

Популярный вопрос, часто задаваемый на наших занятиях UX Conference: следует ли отмечать обязательные поля в форме? Как быть, если большинство полей в форме являются обязательными, следует ли их все отметить? (Это же так много отметок, в конце концов.) Короткий ответ — да. И в этой статье я дам объяснение, почему.

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

Часто дизайнеры чувствуют, что наличие отметки для каждого отдельного элемента — уродливое повторение, которое занимает слишком много места и, с более длинными формами, даже может выглядеть угнетающе (форма требует от пользователя очень много!). Таким образом, они обычно принимают одну или обе из следующих стратегий:

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

2. Они отмечают необязательные поля, так как их обычно меньше.

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

Что не так с этими подходами? Тут есть несколько проблем:

• Люди не читают инструкции в верхней части формы.

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

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

Мы выяснили, что независимо от того, предоставили вы инструкции пользователю в шапке формы или нет, результат, скорее всего, будет одинаковым: их будут игнорировать или забывать. Итак, что происходит, когда пользователь заполняет форму? Как они понимают, что поле обязательно для заполнения? Наиболее прилежные пользователи будут присматриваться внимательно, пытаясь выяснить это — они просмотрят всю форму и найдут поле, отмеченное как необязательное (иногда для этого необходимо проскроллить страницу, как в примере с AmericanExpressвыше, где первое необязательное поле появляется ниже, за пределами экрана; если они найдут одно такое поле, они будут считать, что все не отмеченные поля — обязательные. Но это взаимодействие потребует времени и усилий — и опять же, зачем вам усложнять для пользователей заполнение формы?

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

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

Как пометить обязательные поля?

Здесь есть как минимум два варианта: звездочка (красная или нет) и слово «обязательно».

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

Должна ли звездочка быть красной? Необязательно, но красный цвет стал ожидаемым требуемым цветом маркера в web, что само по себе является причиной для того, чтобы придерживаться этого выбора (согласно Jakob’s Law). В любом случае, есть некоторая ценность использования разных цветов для звездочки и для текстового названия поля: это позволяет пользователям быстро отделить их и сфокусироваться на названии поля, пытаясь осмыслить, что означает это поле. В то время как красный предпочтителен, мы настоятельно рекомендуем избегать бледно-серых или низко контрастных цветов для звездочки. В некоторых случаях приглушенные цвета могут иметь эстетические преимущества, но в реальности низко контрастные символы создадут проблемы доступности для слабовидящих или пожилых пользователей и замедляют визуальную обработку формы для всех.

Можно ли отмечать необязательные поля?

Хотя это и не обязательно, отметка опциональных полей снижает когнитивную нагрузку пользователя: при отсутствии этого обозначения пользователь должен осмотреть поля и сделать вывод, какие именно из них являются необязательными, если часть из них помечена как обязательные. Если слово «необязательно/опционально» находится рядом с названием поля, эта задача становится немного легче.

Не указать, что поле является необязательным, не является ошибкой, но, если его также отметить — это будет очевидным плюсом.

Читайте также:  Как сделать боковую надпись в word

Как насчет форм авторизации?

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

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

Заключение

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

Источник

Все обязательные поля формы заполнены. Поля обязательные для заполнения. Не заставляйте пользователей запоминать очередной логин

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

Параметры для всех собственных полей

1.Используйте необязательные поля вместо обязательных

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

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

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

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

Печатать утомительно, согласны? Сделайте часть работы за посетителей и используйте «умные» значения по умолчанию. Если у вас уже есть какая-то информацию о клиенте, впишите её автоматически (например, email, который получили ранее).

Также можно определить местонахождение пользователя по IP и вписать в нужные поля страну или город проживания, чтобы он не листал длинные списки. Вот как это реализовано на сайте издательства «Манн, Иванов и Фебер»:

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

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

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

4. Располагайте метки полей справа или сверху

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

Поля ввода данных о кредитке должны располагаться так, как на самой карте

Выбранный месяц рождения не может превышать 29 дней в течение високосного года. Если вы хотите получать электронные письма от нас, введите другой адрес. Введите его сейчас или выберите другое название работы. Укажите академическую степень. Идентификатор пользователя не может быть длиннее 50 символов. Введите название работы. Введите пароль. Ввод регистрационного номера является обязательным. Год рождения должен включать 4 номера. Теперь вы готовы зарегистрироваться! Нажмите «Отправить». Действительные символы.

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

5. Всплывающие подсказки помогут избежать хаоса в форме

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

Нажмите «Отправить», чтобы завершить процесс регистрации. Неверный формат. Введенный вами адрес электронной почты уже зарегистрирован. Если это ваш адрес электронной почты, пожалуйста, следуйте этим ссылкам: или. Почтовый индекс должен быть не менее 5 цифр. Введенное вами имя пользователя уже зарегистрировано. Если это ваше имя пользователя, перейдите по этой ссылке. Введенное расширение неверно. Ваши адреса электронной почты не совпадают. Имя не может быть длиннее 35 символов. Вступление в региональную консульскую службу Медицины является обязательным.

Читайте также:  Как сделать прошивку на андроид explay

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

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

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

6. Четко укажите, зачем вам нужна запрашиваемая информация

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

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

Это значение невозможно. Фамилия не может быть длиннее 35 символов. Требуется фамилия Пожалуйста, выберите секретный вопрос. Укажите год рождения. Альтернатива В качестве альтернативы у меня есть один: введите свой адрес электронной почты. Почтовый код не должен превышать 5 цифр. Выберите основной отдел. Требуется, чтобы вы ввели свой предполагаемый год окончания. Укажите год окончания обучения. Введенный вами последний год недействителен. Требуется вопрос безопасности. Для выполнения определенных действий, перечисленных в этой статье, необходимы разрешения администратора.

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

Не забудьте сообщить, для чего вам нужны вводимые данные, если только ответ не очевиден. Хороший пример – номер телефона клиента. Никто не хочет, чтобы его начали бомбить телефонными звонками и смс. Примеры от Lamoda и Wildberries наглядно демонстрируют, как объяснить клиенту, зачем вам нужна дата рождения.

Wildberries

7. Не заставляйте пользователей запоминать очередной логин

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

Формы полностью настраиваются. Затем нажмите «Создать форму», чтобы начать. Здесь вы можете настроить поля, которые вы хотите, чтобы ваши клиенты заполнили форму. Вы можете пометить определенные поля как обязательные, которые сделают невозможным отправку формы, если в поле не указаны символы.

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

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

8. Отображение этапов заполнения формы

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

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

Это поля, которые ваши клиенты будут заполнять в форме. Любое поле может быть обязательным. Это означает, что клиент не может отправить форму, если вы не заполните все поля, которые вы отметили как обязательные. Обязательное поле: каждая форма содержит как минимум одно обязательное поле, которое должны заполнять ваши клиенты; это имя или имя.

Многие продавцы реализуют это посредством визуальной диаграммы, описывающей прогресс в заполнении формы заказа или оплаты. Не забудьте дать название каждому этапу:

9. Тестируйте капчи

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

Традиционные капчи требуют от посетителей ввести сложно читаемые символы с картинки. В то же время всё большую популярность приобретают логические задачи или визуальный тест (пример ниже):

10. Призыв к действию должен быть четким

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

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

11. Поля ввода данных о кредитке должны располагаться так, как на самой карте

Есть удобные jQuery-плагины (вроде jQuery.payment), которые позволят грамотно оформить форму ввода информации о кредитной карте. Например, 16-значный номер карты следует разделить на 4 группы – так он представлен на самой карте. Выпадающий список для выбора месяца также должен быть представлен в числовом формате.

12. Адрес доставки по умолчанию повторяет адрес плательщика

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

Источник

Оцените статью
Как сделать своими руками
Adblock
detector