Что такое веб-форма: определение, элементы и примеры

Обновлено 03.11.2026

Веб-форма — это область на странице сайта, в которую посетитель вводит информацию и отправляет её владельцу сайта. Она может быть совсем маленькой, например одно поле для 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, а форма с этапом оплаты может сразу принимать деньги. Полезно также подключить отправки форм к аналитике, чтобы видеть, сколько людей открывают форму и сколько доходят до конца. Если большинство уходит посередине, значит, форма слишком длинная или какой-то из вопросов отпугивает.

Как создать веб-форму

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

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