Выделение обязательных полей формы с использованием CSS3. Порядок заполнения полей файлов (ZS) Y 2 поля помеченные обязательны к заполнению

Приложение №4
Наименование подрядной организации: ___________________________________________

Участвует в предварительном отборе по лоту:

ОПИСЬ ДОКУМЕНТОВ участника

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

До недавнего времени самым популярным способом было использование jаvascript. Очень удобной библиотекой является jquery validation. Данный способ является современным, но для его интеграции в форму на сайте нужны некоторые навыки работы и время.

С появлением html 5 и его повсеместной интеграцией на современные сайты можно отказаться от использования jаvascript. При этом для того, чтобы сделать поле в форме обязательным для заполнения нужно только добавить атрибут required.

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

А для создания таких полей потребуется не больше минуты.

Итак, допустим есть небольшая форма:

Вот так она выглядит в браузере:

Теперь делаем некоторые поля в форме обязательными для заполнения:

Вот и все. Мы сделали все поля обязательными для заполнения меньше, чем за 1 минуту. Если не заполнять обязательные поля, то мы увидим следующие сообщения:

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

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

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

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

1. Четкий и лаконичный заголовок

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

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

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

Заголовок (Title): «Заполните форму, чтобы получить каталог с ценами от производителя». Описание (Description): «Торопитесь! Заполните форму до конца дня и получите 20% скидку». Весь лендинг можно .

3. Никто не любит заполнять длинные формы

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

Ниже приведены 2 изображения, иллюстрирующие длинную и короткую лид-форму:

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

4. Размещайте текстовые метки слева над полями для заполнения

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

5. Осмысленные надписи на СТА-кнопке

• связан с содержанием лид-формы и
• показывать, что человек получит после нажатия на СТА-кнопку.

6. Располагайте форму на первом экране

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

7. Помощь посетителям при заполнении контактной формы

9. Подсветка заполняемых полей

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

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

10. Стиль и размер шрифта, а также цвет фона

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

11. Разграничение обязательных и необязательных полей для заполнения

Наилучший способ идентифицировать обязательные для заполнения поля — пометить их знаком звездочки (*):

В редакторе лид-форм от LPgenerator для полей Имя, Фамилия, Возраст, Email, Дата и Url можно задать разные конфигурации, в том числе и пометить поле в качестве обязательного для заполнения (опция №2)

Поля, обязательные для заполнения, помечены звездочками. Весь лендинг можно

Такое разграничение улучшает и, как следствие, содействует повышению коэффициента конверсии.

12. Оптимизируйте форму под мобильный трафик

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

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

Чаще всего длинное выпадающее меню в формах предполагает выбор страны проживания. Альтернативным вариантом в этом случае может быть автоматическое определение региона пользователя с помощью IP-адреса

14. Страница благодарности с элементами персонализации после заполнения лид-формы

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

15. Используйте простую капчу

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

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

Пример чек-бокса с надписью «Я не робот» (I`m not a robot), которая активируется посредством простановки галочки в выделенном для этого квадратном поле

Заключение

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

• ее назначение можно быстро и однозначно понять по заголовку и описанию;
• ее легко заполнять;
• она актуальна и нацелена на определенную целевую аудиторию.

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

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

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

Для реализации идеи обернем метки и поля формы в два элемента div , которые позволят нам применить различные эффекты. Внешний контейнер будет иметь дополнительный класс, если поле обязательно для заполнения (af-required ):

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

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

Af-outer { overflow: hidden; height: 70px; box-shadow: 0 1px 0 #f5f5f5 inset; transition: all 0.5s linear; }

Для внутреннего контейнера установим центр перехода в значение “center top”, чтобы видеть процесс уменьшения высоты. Изначально масштаб имеет значение 1 (не обязательно устанавливать его):

Af-inner { padding: 15px 20px 15px 20px; transform-origin: center top; transform: scale(1); transition: all 0.5s linear; }

В верху формы имеется кнопка (чекбокс) с id af-showreq . При нажатии на кнопку будет происходит изменение масштаба дополнительных полей. Мы используем псевдо-класс :not для получения нужных элементов, но можно устанавливать классы для дополнительных полей и получать к ним доступ через комбинаторы родственников.

Уменьшим высоту внешнего контейнера и масштаб внутреннего:

#af-showreq:checked ~ .af-form .af-outer:not(.af-required) { height: 0px; visibility: hidden; } #af-showreq:checked ~ .af-form .af-outer:not(.af-required) .af-inner { transform: scale(0); opacity: 0; }

Установка свойства visibility: hidden дает гарантию, что можно будет переключаться на другие поля с помощью клавиатуры. Здесь нельзя использовать display: none, потому что не будет работать переход.