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

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

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

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

• Форма заявки (форма оформления заказа)
• Форма обратного звонка
• Форма регистрации на сайте
• Форма подписки на рассылку
• Онлайн-чат

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

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

Форма регистрации на сайте предназначена для создания личных кабинетов. Например, в интернет-магазинах и др. Такая форма может предполагать не только регистрацию, но и авторизацию (кнопки – «Вход» и «Зарегистрироваться»). Внутри формы регистрации рекомендуется использовать минимум полей – например, e-mail и пароль. Более подробную информацию о себе пользователь сможет заполнить в личном кабинете.

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

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

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

Основные рекомендации перед созданием форм

При создании форм на сайте учитывайте следующие рекомендации:

1. Простота. Форма должна быть простой и понятной, содержать минимум полей и не включать в себя сложные вопросы. Как правило, вам нужны лишь имя, телефон и e-mail потенциального клиента.
2. Заметность. Во-первых, форма должны быть видна посетителю – выделяться на общем фоне (тем не менее, органично в него вписываясь). Во-вторых, она должна привлекать внимание (анимация, звуковое сопровождение). В-третьих, форма должна располагаться в привычных областях – например, онлайн-чат (или мультикнопка) обычно размещают в правом нижнем углу. Посетитель не должен искать форму, он должен видеть ее сразу.
3. Проверка ошибок. Формы должны автоматически проверять корректность заполненных данных – например, номера телефона, электронной почты и пр. Это позволит не только избежать ошибок при их заполнении, но и облегчит обработку данных.
4. Дополнительная информация. В форму рекомендуется вставлять ссылки на FAQ-раздел, условия сотрудничества и пр.
5. Согласие на обработку данных. Не имеет значения, являются ли эти данные персональными или достоверными – таково требование закона. Один небольшой пункт в форме позволит вам избежать огромных штрафов в будущем.
6. Никаких капч. Капча – это самая распространенная защита от спама. При ее использовании владельцы сайтов даже не задумываются о том, сколько лидов они потеряли из-за нежелания заполнять капчу, ошибок. Проблема спама не должна доставлять посетителям неудобств.
7. Уведомления. Рекомендуется отправлять клиентам уведомление о том, что их обращение было принято к рассмотрению. Например, в виде SMS или e-mail. Это избавит клиента от сомнений в правильности заполненных данных.

Перечень готовых решений: сторонние сервисы для реализации форм

Создать форму на сайте можно 3 основными способами:

• С помощью профессиональных инструментов разработки (например, JSON Form, Formik, Angular Schema Form). Главный недостаток – вы должны обладать навыками программирования.
• С помощью встроенного функционала платформы. Это относится к сайтам, созданным при помощи конструкторов (например, Tilda) или CMS (например, WordPress). Такие системы нередко имеют встроенные инструменты для создания веб-форм.
• С помощью сторонних решений – CRM-систем, специализированных сервисов.

Рассмотрим самые популярные сторонние сервисы для реализации форм на сайте.

JivoSite

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

QForm

Конструктор веб-форм обратной связи. Позволяет за 5 минут создать защищенную от спама форму и встроить ее в дизайн своего сайта. В качестве фильтров доступны капча, стоп-слова, IP-адреса и пр. Система определяет источники заявок и поддерживает интеграцию с CRM. Вы сможете принимать обращения внутри сервиса, на почту или CRM-систему. Главная особенность сервиса – в настоящий момент он абсолютно бесплатный.

Typeform

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

Google Forms

Самый известный бесплатный сервис для создания форм. Включает в себя несколько типов вопросов, настройку логики, возможность оформления внешнего вида формы и т.д. Созданную форму можно разместить на сайте с помощью HTML-кода. При использовании Google Workspace вы сможете работать с формами в команде.

Yandex Forms

Относительно свежий конструктор для создания форм от компании Яндекс. Представляет собой отличную альтернативу Google Forms. Вы сможете использовать множество типов вопросов, настраивать логику показа, кастомизировать внешний вид форм и многое другое. В отличие от конструктора Google, Yandex Forms предлагает ряд особенностей – например, больше разнообразие типов вопросов, простую настройку логики, тонкую настройку внешнего вида, прием оплаты и т.д. Созданные формы встраиваются на сайт при помощи кода.

Можно ли вернуть клиента, если он бросил заполнение формы?

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

1. Триггерные e-mail рассылки. Самый распространенный способ – вы отправляете клиенту электронное письмо о незавершенном заказе. Такие письма рекомендуется отправлять как можно раньше (например, в ближайшие 2-4 часа). В тексте письма вы можете разместить дополнительные сведения о скидках и акциях, бесплатной доставке, альтернативных товарах и пр. Не рекомендуется спамить клиентов цепочками таких сообщений.
2. Ремаркетинг/ретаргетинг. Грамотная настройка рекламы в поисковых системах (а также социальных сетях) позволит вам напомнить о себе клиенту, когда он посетит какой-нибудь другой ресурс. В отличие от предыдущего способа, такая реклама не будет восприниматься навязчиво. С другой стороны, клиент может ее попросту проигнорировать.
3. SMS-рассылки. Сюда же можно отнести рассылки в мессенджерах, социальных сетях и пр. Они представляют собой альтернативу триггерным e-mail рассылкам, но могут использоваться лишь в том случае, если у вас есть телефон или другие контакты клиента.

Другие статьи по теме