Що таке веб-форма: визначення, елементи та приклади

Веб-форма — це ділянка сторінки сайту, у яку відвідувач вводить інформацію та надсилає її власнику сайту. Вона може бути зовсім невеликою, наприклад одне поле для email у підписці на розсилку, або великою, з кількома сторінками та завантаженням файлів. В обох випадках вона робить те саме, що й паперова анкета: ви ставите запитання, людина вписує відповідь, і результат потрапляє до вас. Тільки тут він надходить на пошту, у таблицю чи в CRM.

Якщо ви коли-небудь залишали повідомлення на сторінці «Контакти», оформлювали замовлення в інтернеті, записувалися на прийом або проходили квіз, ви користувалися веб-формою. Для сайту компанії це зазвичай головний спосіб перетворити відвідувача на заявку, тож корисно розуміти, з чого складається форма і як вона працює.

Які форми зазвичай потрібні сайту: форма зворотного зв’язку для питання, форма замовлення для покупки, форма запису на час, опитування чи квіз для відповідей і калькулятор для ціни. Усе це веб-форми. Відрізняються вони тим, які поля ви запитуєте.

Приклад: проста веб-форма.

З чого складається веб-форма

Будь-яка веб-форма збирається з полів, а набір полів залежить від того, що вам потрібно дізнатися у відвідувача. У текстове поле вводять коротку відповідь: ім’я, адресу електронної пошти, номер телефону. Якщо відповідь може бути довшою, наприклад запитання чи відгук, використовують багаторядкове текстове поле: воно прокручується й приймає стільки рядків, скільки захоче написати відвідувач.

Для вибору з готових варіантів є три елементи, які легко сплутати. Прапорці (чекбокси) дають змогу позначити кілька пунктів одразу, наприклад додаткові послуги, і кожен прапорець просто ввімкнений або вимкнений. Перемикачі (радіокнопки) працюють навпаки: відвідувач обирає рівно один варіант, наприклад спосіб доставки, і новий вибір скасовує попередній. Випадний список виконує те саме завдання, що й перемикачі, але займає набагато менше місця, тому підходить для довгих переліків на кшталт країн чи міст. Його можна налаштувати й так, щоб можна було вибрати кілька значень.

Форми вміють приймати й файли, тож кандидат може додати резюме, а клієнт завантажити фото. Поля для дати й телефону приймають значення лише у правильному форматі. І наприкінці стоїть кнопка, яка надсилає все на сервер. На ній може бути написано «Надіслати», «Замовити» або щось інше, а в деяких формах замість стандартної кнопки використовують зображення.

Як працює веб-форма

Коли відвідувач натискає кнопку, форма спершу перевіряє введене. Правила перевірки (валідація) ловлять очевидні помилки до надсилання: порожнє обов’язкове поле, телефон із літерами, email без знака @. Ці правила задаються для кожного поля разом з його назвою, підказкою та значенням за замовчуванням для списку.

Якщо все гаразд, дані йдуть в обробник форми. Це скрипт на сервері або сервіс, який виконує цю роботу за вас, і саме він вирішує, що буде далі: зберегти відповіді, надіслати їх вам на пошту, передати в CRM чи додати рядок у таблицю. Відвідувач тим часом бачить сторінку подяки або потрапляє на іншу адресу. В опитуванні чи голосуванні на цій сторінці показуються поточні результати.

Веб-форма в HTML

В HTML веб-форма вкладається в тег <form>. У нього два головні атрибути: action вказує, куди надсилати дані, а method — як. Усередині тега розміщують поля (<input>, <textarea>, <select>), підпис до кожного з них і кнопку надсилання. Ось найкоротший робочий приклад:

<form action="/send" method="post">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  <label for="message">Повідомлення</label>
  <textarea id="message" name="message"></textarea>
  <button type="submit">Надіслати</button>
</form>

Способів надсилання даних два. При GET дані додаються до адреси сторінки, тому їх видно в адресному рядку та в історії браузера. При POST вони передаються в тілі запиту. Тому GET підходить для пошуку й фільтрів, а будь-яка форма з особистими даними має працювати через POST.

Писати все це вручну необов’язково. Конструктор форм сам створює код і бере на себе частину, якої в прикладі не видно: обробник, що приймає дані на сервері.

Навіщо потрібні веб-форми

Веб-форма дає однаковий набір відповідей від кожного відвідувача. У листі у вільній формі може не виявитися телефону, дати чи бюджету, і доводиться писати у відповідь та уточнювати. Форма з обов’язковими полями збирає все одразу й у структурі, яку можна відсортувати, знайти та вивантажити.

Форми працюють і цілодобово. Відвідувач може записатися, замовити чи залишити заявку вночі, а відповідь потрапить до вас на пошту або в CRM без повторного введення вручну. Менше помилок у друку, менше ручної роботи й менше втрачених заявок — головні причини, чому компанії ставлять форму на кожну ключову сторінку.

Де застосовують веб-форми

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

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

Дизайн веб-форми: що важливо врахувати

Гарна форма виглядає просто, навіть якщо питає багато. Розміщуйте підпис поруч із полем або над ним, щоб він залишався видимим, поки відвідувач друкує, і додавайте підказку про формат там, де це важливо, наприклад номер телефону з кодом країни. Тримайте форму в один стовпчик: так її легше переглядати, і вона однаково виглядає на телефоні.

Робіть поля та кнопки достатньо великими, щоб влучити пальцем, і групуйте пов’язані запитання, починаючи з простих. Перевіряйте відповіді в міру введення, щоб помилка підсвічувалася поруч із полем, а повідомлення казало, що виправити, а не просто «Неправильне введення». І не забувайте про доступність: пов’язуйте кожен підпис із полем, перевіряйте, що форма працює з клавіатури, і стежте за читабельним контрастом тексту.

Головна помилка: форма, яка питає забагато

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

Питайте лише те, що потрібно, щоб відповісти на заявку. Для зворотного дзвінка це ім’я та телефон, для розрахунку вартості — кілька параметрів, а все інше можна з’ясувати під час першої розмови. Перш ніж додати поле, запитайте себе, що ви робитимете з відповіддю, і якщо чесна відповідь «нічого», приберіть його. Робіть поле обов’язковим, лише коли без нього не можна рухатися далі, а решту залиште необов’язковими.

Іноді довга форма неминуча: заявка на роботу, докладне опитування, реєстрація на захід. Тоді розбийте її на кілька сторінок по кілька пов’язаних запитань на кожній, щоб відвідувач бачив короткий крок, а не стіну полів, і розумів, як далеко він просунувся. Інший варіант — режим, у якому форма показує по одному запитанню за раз, як у чаті чи квізі. Так проходити легше, увага зосереджена на одній відповіді, а на телефоні це особливо зручно. У FormDesigner є обидва підходи: форми з кількох сторінок і режим «по одному запитанню».

Безпека та захист від спаму

Будь-яка відкрита форма приваблює спам-ботів і подекуди атаки, тому захист — частина форми, а не додаток. Завжди перевіряйте дані й на сервері, а не лише в браузері: перевірка в браузері робить форму зручнішою, але наполегливий користувач може її обійти. Надсилайте форму через HTTPS, щоб дані не можна було прочитати дорогою, і використовуйте метод POST для всього особистого.

Від спаму допомагає CAPTCHA, але вона дратує відвідувачів, тому багато сайтів починають зі схованого поля-пастки, яке живі люди не бачать, а боти заповнюють, і додають CAPTCHA, лише якщо спам не припиняється. Допомагає й обмеження частоти надсилання з однієї адреси. У FormDesigner форму можна захистити невидимою, математичною або Google reCAPTCHA, паролем і обмеженням повторних надсилань, а працює вона через HTTPS; докладніше у функціях безпеки.

Конфіденційність і захист даних

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

Коли дані особливо чутливі, наприклад медичні чи кадрові, можна піти далі й зашифрувати відповіді. У FormDesigner можна зашифрувати дані форми: відповіді зберігаються в зашифрованому вигляді й читаються лише з вашим закритим ключем.

Інтеграції

Форма рідко живе сама по собі. Відповіді можуть надходити на пошту, в Telegram, у таблицю чи в CRM, а форма з етапом оплати може одразу приймати гроші. Корисно також підключити надсилання форм до аналітики, щоб бачити, скільки людей відкривають форму й скільки доходять до кінця. Якщо більшість іде посередині, отже, форма задовга або якесь із запитань відлякує.