Г 2 виділені поля обов'язкові для заповнення. Порядок заповнення полів файлів (ZS)

додаток №4
Найменування підрядної організації: ___________________________________________

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

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

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

Ідея полягає в тому, щоб виділяти тільки обов'язкові до заповнення поля. Таке завдання зазвичай вирішується установкою маленького символу * або подібного позначення. Але ми підемо далі і додамо інтерактивний ефект для кращого візуального виділення обов'язкових полів.

Для реалізації ідеї обгорнемо мітки і поля форми в два елементи 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, бо не буде працювати перехід.

Будь-який інтернет-маркетолог знає, що зручність користувачів при взаємодії з Лендінзі - це важливий крок на шляху до конверсії. І в цьому процесі чималу роль відіграє, так як від її працездатності залежить не тільки загальне враження від компанії, але і те, чи залишиться залучений користувач на сторінці або піде на Лендінгем конкурента.

З цієї причини розробці форми зворотного зв'язку потрібно приділяти особливу увагу, навіть якщо вона є простою і не містить багато полів для заповнення. У цій статті ми в оглядовому режимі зупинимося на 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 «вступити в контакт» з відвідувачем цільової сторінки. На додаток до всього, ефективна контактна форма містить необхідні для користувача підказки, що запобігають до заповітної мети - повідомленням інформації про себе.

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

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

З появою html 5 і його повсюдної інтеграцією на сучасні сайти можна відмовитися від використання jаvascript. При цьому для того, щоб зробити поле в формі обов'язковим для заповнення потрібно тільки додати атрибут required.

З атрибутом required браузер перед відправкою форми перевірить, заповнене конкретне поле чи ні. Якщо немає, то користувачеві буде вказано на обов'язкове заповнення поля або навіть всіх полів форми.

А для створення таких полів буде потрібно не більше хвилини.

Отже, припустимо є невелика форма:

Ось так вона виглядає в браузері:

Тепер робимо деякі поля у формі обов'язковими для заповнення:

От і все. Ми зробили все поля обов'язковими для заповнення менше, ніж за 1 хвилину. Якщо не заповнювати обов'язкові поля, то ми побачимо такі повідомлення:

І, важливе. Дана перевірка працює у всіх сучасних браузерах і тільки для специфікації html 5. Для непосвячених - на початку html коду потрібно вставити тег.

Заповнення полів структурованих файлів заявок на отримання готівки при вивантаженні документів в ОрФК

Якщо при формуванні файлів для передачі в ОрФК з'являються повідомлення про помилку в структурі файлу, значить якийсь з обов'язкових реквізитів документа залишився незаповненим. Якщо по тексту повідомлення складно визначити, що це за реквізит, необхідно знайти в таблиці нижче (таблиця побудована на підставі вимог до форматів обміну *) відповідний блок (блоки виділені в таблиці жовтим кольором) і в ньому опис порядку заповнення потрібного поля (світло-сірим кольором виділені поля обов'язкові для заповнення), для зручності поля пронумеровані. На підставі отриманої інформації внести необхідні зміни і повторно вивантажити документ.

_______________________________________________________

* Повний текст вимог до форматів обміну розміщений на нашому сайті

(Версія 7.0)