Веб форма на сайте

В маркетинг и интернет-рекламу компании вкладывают сотни миллиардов. Но все это будет напрасным, если на сайте нет веб-формы для сбора контактной информации клиентов.

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

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

Веб-форма (форма захвата) - что это и как работает

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

Цель инструмента — собрать данные для дальнейшего взаимодействия с клиентами.

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

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

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

Элементы веб формы

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

Какие бывают элементы в веб-форме: рассмотрим подробно.

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

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

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

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

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

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

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

Кнопка или поле для добавления файла. Позволяет прикрепить картинку, текстовый документ и др. Используется при отправке отзыва на маркетплейсе, в формах для проверки документов (процедура KYC), в различных приложениях для обмена документами, в онлайн-редакторах музыки и изображений.

Кнопка «Отправить», «Подтвердить», «Связаться с нами», «Далее» (если форма разделена на несколько страниц). Элемент еще называют кнопкой действия (Call to Action - CTA). Нужна для отправки введенных данных или перехода к следующему этапу.

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

Виды web форм

По содержанию, формату, стилю web-форму можно адаптировать под разные маркетинговые стратегии, модели привлечения и взаимодействия с клиентом.

Основные форматы: закрытая, открытая, двойная.

Закрытая

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

Закрытыми делают большинство форм: «обратной связи», регистрационные, для оформления заказа и др.

Достоинства такого формата:

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

Недостаток: цепочка привлечения увеличивается на одно действие. Но если сделано все правильно, это не скажется на конверсии.

Открытая

Онлайн форма на сайте изначально развернута и посетитель сразу видит ее без дополнительных действий. Ее задача — быстро конвертировать желание клиента в действие. Часто использует спонтанность и импульсивность пользователей.

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

Достоинства:

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

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

❗️❗️❗️ Читайте еще: Лендинг с высокой конверсией: ТОП-7 правил

Двойная форма

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

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

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

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

❗️❗️❗️ Читайте еще: Что такое лид простыми словами

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

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

Основные правила создания удобных веб-форм рассмотрим ниже.

Форма должна быть лаконичной и не пугать посетителя. Первое правило — используйте только те поля, которые точно нужны на текущем этапе взаимодействия. Например, для регистрации чаще всего достаточно логина и e-mail или номера телефона (иногда можно даже обойтись без пароля — регистрация через профиль Google, Apple). Другие данные, например ФИО, адрес для доставки можно попросить позже, на этапе оформления заказа. Чем меньше форма, тем выше вероятность, что посетитель заполнит ее до конца.

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

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

Создавая форму, учитывайте законы UX-дизайна:

• Закон Миллера говорит, что человек может “держать” в уме только около 7 элементов (+- 2). Если форма сложнее, резко увеличивается когнитивная нагрузка. Наше сознание противится, человеку некомфортно, он может просто отложить принятие решения.
• Согласно экспериментально подтвержденному закону Хигса: время и усилия, необходимые для принятия решения, увеличиваются с увеличением доступных вариантов.

Если форма большая, порядка 8-10 полей или более, и сократить ее нельзя, разделите регистрацию на несколько шагов. Если возможно, группируйте пункты по теме. Например, в регистрационной форме на первом этапе блок с общими данными (ФИО, номер телефона, e-mail, страна), на втором — опыт работы и профессиональные области, на третьем — нужно прикрепить примеры работ. Так новому юзеру легче сориентироваться, снизиться когнитивная нагрузка и увеличится конверсия.

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

Чтобы еще облегчить задачу, добавьте:

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

Иногда в веб-формах, например на странице входа, где всего два поля: логин и пароль, — нет подписей. Это позволяет упростить интерфейс, сделать его удобнее для мобильных пользователей. Но подсказка внутри обязательна. Это актуально для сервисов, нацеленных на молодую активную аудиторию, которая заполняет формы входа на автомате.

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

Что можно упростить:

1. добавьте маску заполнения. Например, номер телефона сплошным массивом цифр: 89501234567 — это неудобно, легко допустить ошибку. Удобнее, когда ввод выглядит так: 8 (950) 123-45-67. В конструкторах форм добавить подобную маску можно в пару кликов, а ошибок будет значительно меньше;
2. используйте автозаполнение. Актуально для адреса доставки, страны проживания. Шаблон автозаполнения приведет данные к единому шаблону, что упростит обработку заявок менеджеру по продажам. И снизит риск ошибок, сократит время заполнения для пользователя;
3. в формах заказа, где нужно указать модификацию, комплектацию, список дополнительных опций, добавьте выпадающий список — избавьте клиента от самостоятельного поиска и введения данных вручную, а менеджера от лишней работы по расшифровке данных;
4. сохраняйте заполненные поля. Это упростит задачу по заполнению брошенной формы, при повторном оформлении заказа или случайной перезагрузке страницы;
5. добавьте кнопку для отображения пароля. Обычно вместо букв и цифр при вводе пароля отображаются звездочки или точки. Дайте возможность посмотреть введенные данные — так посетителям будет легче попасть на сайт;
6. настройте адаптивную клавиатуру в мобильной версии сайта или приложения — юзеру не нужно переключаться между цифровой и буквенной клавиатурами, сразу откроется необходимая раскладка. Это экономит время и уже на этапе регистрации формирует более лояльное отношение к сервису.

Добавьте авторизацию через социальные сети. Почти у всех есть аккаунт Google, Apple или Microsoft (или все одновременно). И возможность зарегистрироваться и авторизоваться в один клик без заполнения форм, подтверждения электронной почты и переключения между разными сервисами — это удобно для пользователя. Вы получаете корректно заполненную форму и рабочий e-mail, а не запасную почту для спама.

Форма входа Medium.com - никаких полей и длинных форм. Только кнопки для быстрого входа через соцсети или учетную запись Google, Apple. Опция входа по email на самом последнем месте:

Дизайн должен быть узнаваемым. Якоб Нильсен — руководитель Nielsen Norman Group, много лет работал над улучшением пользовательских интерфейсов, выпустил книгу «Web-дизайн: удобство использования Web-сайтов» и вывел такое утверждение (закон Якоба): «Большую часть времени пользователи проводят на других сайтах и ожидают, что ваш сайт будет работать так же».

Это относится не к дизайну и стилям как таковому. Необычный дизайн — это круто, возможно выделиться, предложить что-то новое. Закон Якоба больше об интерфейсах. Используйте распространенные UX-паттерны, задавайте привычную логику работы.

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

При выборе иконок для кнопок и подсказок можно использовать элементы из Google Material Design — набора инструкций и советов для интерфейса мобильных приложений.

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

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

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

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

Размер и расположение полей. Единого шаблона по размеру и расположению полей нет. Есть несколько критериев, которые важно учитывать:

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

Заголовок веб-формы должен соответствовать УТП. Может казаться, что заголовок в принципе не нужен — пользователь и так знает, какую кнопку нажать. Но нет.

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

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

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

Какой может быть анимация:

• при наведении курсора кнопка немного подпрыгивает или увеличивается на несколько процентов;
• активное поле меняет цвет на более контрастный;
• подсветка красным, если в поле вводится неправильная информация (текст вместо чисел или наоборот);
• анимация после отправки данных.

Не переусердствуйте. Перед запуском проверьте, удобно ли все сделано, и нет ли дискомфорта.

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

Используйте узнаваемые иконки:

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

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

В форме, где логин и номер телефона (е-мэйл), достаточно упоминания о политике обработки личной информации.

Топ 10 онлайн конструкторов веб форм захвата на сайте

Визуальные конструкторы сайтов (WYSWYG — “что ты видишь, то и получаешь”), где вместо кодирования можно собрать страницы из блоков, появились практически вместе с распространением интернета. Но это не относилось к веб-формам. Еще не так давно были доступны только простые анкеты, а сложные страницы захвата нужно было создавать с помощью кодирования. Хотя готовые скрипты, которые нужно только отредактировать под себя появились достаточно давно: JSON Schema, React JsonSchema Form, Json Schema, JsonSchema.

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

Популярные WYSIWYG-конструкторы веб форм.

Google Forms

Входит в состав инструментов Google Workspace и базовая версия доступна бесплатно. Но сфера использования в нем ограничена. Не подходит интеграции веб-форм на сайт или лендинг. Это скорее инструмент для создания анкет и опросников.

Гугл Формы используются в разных сферах:

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

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

Особенности:

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

Яндекс.Формы

Сервис Яндекс.Формы создавался с оглядкой на Google Forms, и у разработчиков получилось не только скопировать возможности, но и расширить функционал, сделать сервис более гибким. Например, более удобно реализовано добавление новых полей, возможна отправка на любую почту (не только Yandex) и добавить форму на сайт. Подходит для анкет и опросников, форм обратной связи, заявок на обратный звонок и др.

Особенности:

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

TypeForm

TypeForm - популярный аналог Google Forms и Яндекс.Формы. Сервис также подходит для создания анкет, опросников, а также маркетинговых и социологических исследований. Но получил более гибкую настройку и дополнительные возможности. Например, переходы между вопросами и отправка ответов исключительно с помощью горячих клавиш клавиатуры.

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

Особенности:

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

stepFORM

stepFORM относительно новый конструктор, появился в 2019 году, предложив свежий взгляд на создание онлайн-форм без кодирования. Приложение получило интуитивно понятный интерфейс. Много шаблонов, но нет тем для оформления. Подходит для создания:

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

Формы можно добавить на сайт или разместить в облачном хранилище и распространять через социальные сети, мессенджеры. Есть встроенная CRM для анализа данных. Интеграция с платежными системами МИР, PayPal, Юmoney.

Особенности:

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

jotForm

jotForm - один из самых гибких и одновременно простых WYSIWYG-конструкторов. С помощью простого перетаскивания можно реализовать самые необычные и сложные проекты. Есть инструменты для персонализации и брендинга. Интеграция с различными платежными системами для приема платежей (более 30 сервисов). И как бонус — огромная база готовых шаблонов, более 10000 бесплатных тем.

Подходит для создания веб-форм:

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

У сервиса есть бесплатная версия с ограниченным функционалом (например, бесплатно можно принять не больше 10 заявок).

Особенности:

• есть бесплатная версия с ограниченными возможностями;
• дополнительные инструменты: отправка фото, сканирование штрихкодов и др.;
• доступны мобильная и web-версия;
• интерфейс англоязычный, но это не мешает создавать формы на любых других языках;
• интеграция с большинством почтовых серверов, платежными системами (Strip. Apple Pay, G Pay), сервисами облачного хранения, CRM и др.

Formstruct

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

Особенности:

• конструктор адаптирован под рынок стран СНГ;
• русскоязычный;
• удобный интуитивный интерфейс.

Formstack

Formstack - мощный комбайн в мире конструкторов форм. Подходит как для небольших компаний, так и крупного бизнеса. Интеграция с десятками сторонних сервисов, включая Amazon S7, инструментами Microsoft, PayPal, Strip. Позволяет создавать любые типы форм захвата:

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

Формы можно создавать с нуля или на основе готовых шаблонов. Есть A/B-тестирование, интеграция с системами приема платежей, гибкая настройка дизайна, стилей, доступно брендирование. Есть встроенный редактор кода CSS и HTML, среда для совместной работы.

Сервис платный. Но есть пробная версия на 14 дней без ввода данных банковской карты.

Formsite

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

В приложении есть бесплатная версия с ограниченным количеством форм и полей.

Особенности:

• есть бесплатная версия для небольшого бизнеса (5 форм до 5 полей, не более 100 заполнений в месяц);
• много готовых шаблонов практически для любых отраслей;
• интерфейс англоязычный.

Zoho Forms

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

• входа, регистрации;
• анкеты и опросники;
• бронирования билетов, гостиниц, столика в ресторане;
• подписки и заявки на обратный звонок;
• страниц оформления заказа;
• страниц тестирования знаний;
• страниц для отзыва и др.

Формы можно интегрировать на сайт (интеграция в один клик на WordPress), в мобильное приложение или разместить на облаке и распространять с помощью социальных сетей или мессенджеров. Доступно около сотни готовых шаблонов. Есть интеграция с инструментами Zoho (CRM, трекер для отслеживания действий посетителей, цифровая подпись, аналитика, таблицы Zoho, система автоматизации маркетинга), а также облачными инструментами Google (таблицы, документы), MicroSoft (Excell, Office 365). Возможно подключение других приложений и инструментов по API.

Для работы Zoho предлагает веб-интерфейс и мобильное приложение, в котором можно генерировать формы в несколько кликов. И главный бонус — есть бесплатная версия с ограничением по количеству форм. Ее возможностей достаточно для небольшого сайта.

Особенности:

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

Cognito Forms

Cognito Forms - универсальный конструктор, который подходит для создания разных типов форм:

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

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

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

Особенности:

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

Как сделать форму обратной связи

Обычно, на создание и интеграцию веб-формы уходит не больше 10-15 минут. Большинство разработчиков при создании конструкторов помнят о законе Якоба и стараются сделать интерфейс похожим на другие приложения. Так делают и создатели WYSWYG-билдеров для страниц сбора контактов и опросов.

Чтобы легче было включиться, показываем процесс на примере Cognito Forms. В других сервисах логика будет не сильно отличаться. Сначала проходим процедуру регистрации, попутно заполняя несколько тех самых веб-форм.

Попадаем в интерфейс веб-приложения. На главной странице (Dashboard) кликаем на кнопку “New Form”. Здесь можно выбрать готовый шаблон, кликнув по иконке раскрывающегося списка.

Попадаем в среду разработки. Слева доступно три меню: “Настройки”, “Платежи” и “Инструменты”. Справа — форма.

В настройках можно задать название для проекта, настроить шифрование, подключить аналитику Google, настроить страну, язык.

В разделе “Платежи” можно подключить одну из интегрированных платежных систем.

В разделе “Workflow” настраиваем действия для инструментов, кнопки отправки данных, добавляем ссылки, статусы и др.

Теперь можем создать лид-форму. Сделать это можно в несколько шагов. В разделе Settings“ задайте название и описание. Укажите языковые настройки, регион.

Для добавления поля в рабочей области кликните по прямоугольнику с символом “+”, выберите элемент, настройте действие.

Новые элементы можно добавлять внизу, вверху, справа, между уже вставленными блоками. Просто кликните по пустому прямоугольнику со значком “+” или наведите курсором над любым добавленным полем, чтобы появилась синяя линия со значком “+”.

Можно менять ширину поля: кликните по элементу и управляйте размером с помощью кнопок “Shrink” и “Grow”.

У каждого типа элемента свои настройки. Например, если это пустое поле, можно задать тип данных, установить предел количества вводимых символов, дописать подсказку и др.

Для полей с адресом можно добавить автозаполнение и подключить базу Google Maps по API.

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

Всего доступно более 20 типов полей: ФИО, адрес, контакты, добавление файла, выбор, настройка оплаты, валюта, счетчик, список вопросов с выбором ответов, пустое поле для подписи, калькулятор и др.

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

После формирования сохраните форму, кликнув по кнопке “Save” в правом верхнем углу.

После сохранения, перейдите во вкладку “Publish”. Здесь вы увидите предпросмотр формы. Слева будет код скрипта для добавления на сайт и ссылка для распространения в социальных сетях или через мессенджеры.

В разделе “Entries” доступна база введенных данных и статистика.

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

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

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

• проводите валидацию данных на стороне сервера — это поможет минимизировать вероятность взлома;
• используйте сервисы Captcha, но делайте их простыми для людей и не навязчивыми;
• добавьте скрытое поле, которое не видно человеку - их будут заполнять боты, а значит такие данные можно легко отсеять;
• используйте сервисы, например, Akismet, которые фильтруют ботов на основе данных, введенных ими на других сайтах.

Примеры форм обратной связи

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

Подписка на рассылку

Обычно содержит одно поле: для адреса электронной почты или номера телефона. Иногда может содержать дополнительную строку для имени. Чаще используется на Landing Page и страницах с акциями, где за оформление подписки предлагают скидку, рассылку обучающих материалов, книгу, пробный курс и др. Цель — собрать базу контактов. Используется в e-mail маркетинге и стратегиях, которые включают несколько форматов взаимодействия с клиентом: СМС-рассылка, холодные звонки и др.

Вместо адреса электронной почты можно предложить клиенту подписаться на канал в Телеграм или социальных сетях.

Сервис HubSpot предлагает бесплатное руководство по email-маркетингу. При клике по кнопке “Получить копию” появляется страница для отправки адреса электронной почты:

Заявка на обратный звонок, консультация

Обычно, это всплывающий элемент, который появляется при клике на кнопку «Заказать звонок», «Позвоните мне», «Получить консультацию», «Вызвать замерщика», «Быстрая покупка» или небольшая форма внизу страницы. Иногда в виде всплывающего pop-up окна. Содержит поля для номера телефона и имени, иногда небольшое поле, где посетитель может описать свой вопрос. Это простой инструмент для увеличения количество заявок.

Форма регистрации на сайте, входа

Самая простая форма содержит 3-4 поля: логин, e-mail или номер телефона, пароль. Иногда в регистрационных формах сайты интернет-магазинов, маркетплейсы требуют дополнительные данные: ФИО, дату рождения, страну и др.

Оформление заказа на услугу или товар

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

Онлайн-калькулятор

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

PopUp с формой обратной связи

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

Выводы

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