Веб-форма на сайте: отправка, примеры + как сделать

Структурируйте обратную связь заказчиков по резюме кандидатов и после интервью с ними

Критерии выбора конструкторов веб-форм

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

  • Персонализация. Возможность настроить внешний вид форм под ваш фирменный стиль.
  • Количество готовых шаблонов.
  • Наличие визуального редактора или drag&drop.
  • Гибкость. Формы бывают различных типов: от стандартных анкет до онлайн-приглашений. Не каждый конструктор позволяет создать любую форму.
  • Функциональность. Сторонние интеграции, шифрование, отчётность и аналитика. Функций у сервисов веб-форм множество, но не каждый из них может похвастаться реализацией сразу всех.
  • Русскоязычный интерфейс. Работать на родном языке, очевидно, проще. Особенно новичкам.
  • Стоимость.

Статья в тему: Как сделать мультилендинг

Что такое форма захвата

Форма захвата контактов, как воздух. О ней не задумываешься, когда делаешь сайт и считаешь, что важно всё, но только не она.

Правда, я скажу иначе – жить без нее нельзя. Возможно резкое сравнение, но для акцента важности темы, в самый раз. Потому что вопрос о Вашем кошельке.

Форма обратной связи – это окно с полями для ввода данных, текстом и кнопкой для обратной связи с посетителем Вашего сайта.

Такая форма является одной из ступеней воронки продаж, собирает контакты посетителей сайта или Landing Page.

Другими словами, дружит покупателя с продавцом. Еще ее называют лид – форма или форма обратной связи. Но глобально не важно как Вы её будете называть, если мы понимаем о чём идёт речь.

Читайте также:  Лыжные ботинки Alpina: для конькового хода Альпина подходят отлично

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

1. Закрытая форма

Форма называется закрытой, когда выполнена в виде кнопки или ссылки на сайте, при нажатии на которую появляется развернутая форма с полями. Классика жанра:

Закрытая формаНовое окно

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

А также, когда она содержит больше 4-х полей и перекрывает часть контента на сайте. В основном в интернет – магазинах. Единственный минус – требует дополнительного клика мыши пользователем.

Лайфхак. Если Вы будете делать сайт самостоятельно, то я рекомендую конструктор – InSales. Там уже есть готовые шаблоны с очень крутыми формами захвата и прочими фишками для повышения конверсии. К тому же по промокоду “inscale” +30 дней бесплатно. Кликайте и тестируйте -> InSales.

2. Открытая форма

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

Открытая форма

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

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

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

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

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

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

Ваш лид – магнит или особое условие для клиента, отправившего заявку с этой формы. Главное, чтобы это было ценным для пользователя.

Преимущества регулярного сбора обратной связи

Высокая конкуренция на рынке труда заставляет работодателей задуматься о вопросе создания комфортной рабочей среды. Сотни компаний пытаются переманить к себе лучших представителей профессии и предлагают специалистам гибкий график, высокие зарплаты и привлекательную корпоративную культуру. Текучка кадров обходится дорого: поиск, найм, адаптация и обучение нового сотрудника стоит бизнесу 1,5-2 годового оклада бывшего коллеги.

Читайте также:  ПОДГОТОВКА СПОРТСМЕНОВ В ИГРОВЫХ ВИДАХ СПОРТА

Удержание персонала становится одной из основных задач бизнеса.

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

Настройте формы обратной связи в соответствии с вашим бизнес-процессом

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

Настройте формы обратной связи в соответствии с вашим бизнес-процессом

Настройте форму так, как нужно именно вам.

  1. Выберите тип вопроса:
    • с одним вариантом ответа,
    • с несколькими вариантами ответа,
    • с настраиваемой шкалой оценки,
    • с раскрывающимся списком ответов,
    • открытые с кратким ответом,
    • открытые с развернутым ответом,
  2. Если какие-то вопросы очень важны для принятия решения, сделайте их обязательными.
  3. Группируйте вопросы по темам или другим признакам с помощью разделителей.
  4. Расположите вопросы в нужном порядке с помощью кнопок «Вверх» и «Вниз». Отсортировать можно и варианты ответов внутри вопроса, просто перетаскивая их.
  5. Если для разных вакансий нужны похожие формы обратной связи, то создайте одну, а потом продублируйте ее одним кликом и отредактируйте.
  6. Архивируйте неактуальные формы. Все предыдущие ответы по кандидатам при этом сохранятся.
  7. Создавайте до 10 шаблонов форм обратной связи и заполняйте их без ограничений.
Настройте формы обратной связи в соответствии с вашим бизнес-процессом

Способ №Ссылка для отправки email.

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

Читайте также:  Топ 8 лыжных ботинок для конькового хода в 2021 г.

<a href=»mailto:[email protected]«>Отправить сообщение</a>

Такую ссылку можно усложнить и задать сразу еще и тему к примеру

<a href=»mailto:[email protected]?subject=YOUR_SUBJECT»>Отправить сообщение с темой</a>

При клике по такой ссылке, пользователь перейдет в клиент электронной почты и сможет отправить вам сообщение.

(14)

Super (AJAX) Contact Form — русифицированная версия формы обратной связи

Скачать (.zip, )

Работает эта штучка на чистом PHP + jQuery & AJAX — очень удобно для блога или небольшого интернет-магазина. Пример формы:

Super (AJAX) Contact Form — русифицированная версия формы обратной связи

Как выглядит конфиг внутри («\code\assets\xml\»):

Конфиг для настройки полей («\code\assets\xml\»):

Установка скрипта формы для связи SuperAJAX ContactForm ничем не отличается от инструкции по установке другого скрипта выше. Содержимое архива закачиваете на сервер и пользуетесь.

Super (AJAX) Contact Form — русифицированная версия формы обратной связи

Преимущества этой формы над предыдущей: — более эстетично привлекательная — используется проверка полей, ошибки выводятся через AJAX — подробнейшая инструкция по установке и настройке внутри — есть подсказки под полями

Например, посмотрите как в этой форме связи выводятся ошибки:

Выглядит неплохо! А вот что увидит пользователь, после успешной отправки сообщения:

Super (AJAX) Contact Form — русифицированная версия формы обратной связи

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

Вы также можете посмотреть интересный видеоурок по данному скрипту:

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

Super (AJAX) Contact Form — русифицированная версия формы обратной связи