Маркиране на задължителните полета на формуляра с помощта на CSS3. Ред на попълване на файлови полета (ZS) Y 2 отбелязани полета са задължителни.

Приложение №4
Име на изпълнителя: ________________________________________________

Участва в предварителен подборпо жребий:

СПИСЪК С ДОКУМЕНТИ НА УЧАСТНИКА

Почти всички модерни и нови сайтове имат формуляри, които ще бъдат проверени за попълване без презареждане на страницата. Така наречените задължителни полета на формуляра. Но какви методи се използват за създаване на такива форми?

Доскоро най-популярният начин беше използването на JavaScript. Много удобна библиотека е валидирането на jquery. Този методе модерен, но изисква известно умение и време за интегрирането му във формата на сайта.

С появата html 5и широкото му интегриране в съвременни уебсайтове, можете да откажете да използвате jаvascript. Освен това, за да направите поле във формуляра задължително, трябва само да добавите задължителен атрибут.

С необходимия атрибут браузърът ще провери дали определено поле е попълнено или не, преди да изпрати формуляра. Ако не, потребителят ще бъде инструктиран да попълни поле или дори всички полета на формуляра.

И ще отнеме не повече от минута, за да създадете такива полета.

И така, да кажем, че има малка форма:

Ето как изглежда в браузъра:

Сега правим някои полета във формуляра задължителни:

Това е всичко. Направихме всички полета задължителни за по-малко от 1 минута. Ако не попълним задължителните полета, ще видим следните съобщения:

И, което е важно. Тази проверка работи във всички съвременни браузъри и само за спецификацията html 5. За незапознатите трябва да поставите таг в началото на html кода.

Всеки интернет маркетинг знае, че потребителското изживяване при взаимодействие с целева страница е важна стъпка към реализация. И в този процес той играе важна роля, тъй като не само цялостното впечатление за компанията зависи от нейното представяне, но и дали привлеченият потребител ще остане на страницата или ще отиде на целевата страница на конкурента.

Поради тази причина разработването на формата обратна връзкатрябва да обърнете специално внимание, дори ако е просто и не съдържа много полета за попълване. В тази статия ще разгледаме набързо 15 точки, които са критични за създаването на перфектната форма за контакт.

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

1. Ясно и кратко заглавие

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

Докато доброто заглавие обяснява целта на водещия формуляр, информативното описание може допълнително да мотивира посетителите, които се колебаят да го попълнят. Това може да се постигне чрез включване на 2 стратегически важни точки в текста:

• какво точно се изисква от потребителя;
• какво точно ще получи посетителят след извършване на очакваните от него действия.

Заглавие: “Попълнете формата, за да получите каталог с цени от производителя.” Описание: „Побързайте! Попълнете формата до края на деня и получете 20% отстъпка." Възможна е цялата целева страница.

3. Никой не обича да попълва дълги формуляри.

Не трябва да претоварвате формуляра за потенциални клиенти с множество полета, които да попълвате ненужно. Използвайте само тези, които са критични за вашия бизнес. Ако е възможно, избягвайте дублирането на исканата информация (например „Имейл“ и „Потвърдете имейл“). Не бива да се прекалява с исканията за лична и лична информация (като „телефонен номер“, „адрес“ или „име на фирма“). Ако въпреки това има такива полета, информирайте потребителя (текстово и графично), че личните му данни са надеждно защитени и няма да бъдат прехвърляни на трета страна.

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

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

4. Поставете текстови етикети вляво над полетата, които трябва да се попълнят

Проучвания, използващи , показват, че заглавките на полетата, поставени над полетата, се представят по-добре от подравняването им вдясно или поставянето им от лявата страна на съответните полета. Ако трябва да направите формуляра по-компактен или визуално по-къс, имената на етикетите могат да бъдат поставени вътре в полетата, подравнени вляво (в този случай те действат като контейнери):

5. Смислени надписи върху CTA бутона

• свързани със съдържанието на водещата форма и
• показват какво ще получи човек, след като щракне върху бутона CTA.

6. Поставете формата на първия екран

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

7. Помогнете на посетителите да попълнят формата за контакт

9. Маркиране на полета за попълване

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

Освен това можете да допълните техниката, описана по-горе, като зададете автоматично поставяне на курсора и маркиране в първото поле за попълване. Този малък детайл не само спестява време, но и ненатрапчиво насърчава действието за реализация:

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

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

11. Разграничаване между задължителни и незадължителни полета за попълване

Най-добрият начин да идентифицирате задължителните полета е да ги маркирате със звездичка (*):

В редактора на формуляр за потенциални клиенти от LPgenerator можете да зададете различни конфигурации за полетата First Name, Last Name, Age, Email, Date и Url, включително маркиране на полето според изискванията (опция № 2)

Задължителните полета са маркирани със звездички. Цялата целева страница може да бъде

Това разграничение подобрява и в резултат на това насърчава по-високи проценти на реализация.

12. Оптимизирайте формата си за мобилен трафик

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

Някои полета изискват избиране на данни от дълъг списък възможни варианти. Ако има твърде много от тях, това може да затрудни намирането необходимата информацияи карат посетителя да напусне страницата. Следователно падащите менюта в водещите формуляри трябва да се използват разумно. Ако има твърде много данни, тогава могат да се използват технологии за автоматично попълване като алтернатива.

Най-често дълго падащо меню във формуляри изисква да изберете държавата си на пребиваване. Алтернативна опция в този случай може да бъде автоматично откриване на региона на потребителя чрез IP адреса

14. Благодарствена страница с елементи за персонализация след попълване на водещата форма

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

15. Използвайте проста captcha

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

Можете също да използвате просто квадратче за отметка, в което просто трябва да поставите отметка в квадратче, за да посочите, че посетителят на целевата страница е реален човек, а не робот:

Пример за отметка с надпис „Аз не съм робот“, която се активира чрез поставяне на отметка в квадратчето, предназначено за това

Заключение

Създаването на перфектно изживяване с целевата страница често се свежда до проектиране на перфектния формуляр за потенциални клиенти, който има следните характеристики:

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

Идеален в в такъв случайТова не означава, на първо място, зашеметяващ дизайн, а способността на този елемент на целевата страница да „влезе в контакт“ с посетителя на целевата страница. В допълнение, ефективната форма за контакт съдържа необходимите подкани, които потребителят да предотврати заветната цел- предоставяне на информация за себе си.

В този урок ще направим малък привличащ вниманието ефект за задължителните полета във формата. Повечето уеб формуляри са разработени по минимален начин, само за събиране на потребителски данни. Помислете колко посетители са изоставили попълването на формуляр, защото съдържа твърде много полета. Но има и много формуляри, които изискват допълнителна информация, която посетителят иска или трябва да предостави в незадължителни полета. Например формуляри за поръчки или класификационни формуляри.

Идеята е да маркирате само задължителните полета. Този проблем обикновено се решава чрез задаване на малък * или подобен символ. Но ние ще отидем по-далеч и ще добавим интерактивен ефект за по-добро визуално подчертаване на задължителните полета.

За да реализираме идеята, нека увием етикетите и полетата на формата в два елемента div, което ще ни позволи да приложим различни ефекти. Външният контейнер ще има допълнителен клас, ако полето е задължително ( af-задължително):

Нека да разгледаме стила на втория демонстрационен пример, който използва мащабиране, за да скрие незадължителни полета. Ще намалим височината на другия контейнер, тъй като вътрешният намалява.

Нека добавим преход за външния контейнер, да дефинираме фиксирана височина и да зададем изпъкнало да се скрие, за да скрие съдържанието, когато височината намалява.

Af-външен (преливане: скрито; височина: 70px; box-shadow: 0 1px 0 #f5f5f5 вмъкване; преход: всички 0,5 s линейни; )

За вътрешния контейнер задайте центъра на прехода на „централно отгоре“, за да можем да видим процеса на намаляване на височината. Първоначално скалата е зададена на 1 (не е необходимо да се задава):

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

В горната част на формата има бутон (чекбокс) с id af-showreq. Когато щракнете върху бутона, мащабът на допълнителните полета ще се промени. Ние използваме псевдо клас :неза да получите необходимите елементи, но можете да зададете класове за допълнителни полета и да получите достъп до тях чрез относителни комбинатори.

Нека намалим височината на външния контейнер и мащаба на вътрешния:

#af-showreq:проверено ~ .af-form .af-outer:not(.af-required) (височина: 0px; видимост: скрит; ) #af-showreq:проверено ~ .af-form .af-outer:not (.af-задължително).af-inner (трансформация: мащаб(0); непрозрачност: 0;)

Задаване на свойство видимост: скрит гарантира, че можете да превключвате към други полета с помощта на клавиатурата. Не може да се използва тук дисплей: няма,защото преходът няма да работи.