Форма обратной связи, заказа, заявки и обратного звонка на сайте — без бэкенда

Зачем сайту формы

Форма — это точка конверсии. Без неё посетитель может просто закрыть вкладку, потому что не найдёт, как связаться с вами. Форма превращает интерес в действие: человек оставляет контакт, а вы получаете готовое обращение.

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

Ниже — четыре типа форм, которые нужны почти любому сайту: лендингу, интернет-магазину, сайту услуг или B2B-проекту.

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

Форма обратной связи — самая распространённая. Её задача — собрать сообщение посетителя: вопрос, пожелание, предложение или уточнение по услуге.

Типичные поля такой формы:

• имя;
• email (электронная почта);
• телефон;
• текст сообщения.

CTA-кнопка обычно нейтральная: «Отправить», «Написать нам», «Связаться». Форму обратной связи размещают в контактах, в подвале сайта или на отдельной странице «Контакты».

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

Форма заказа

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

Обычно запрашивают:

• имя;
• телефон;
• количество или выбранный товар/услугу;
• адрес доставки (если нужен).

CTA-кнопка должна быть «действенной»: «Заказать», «Оформить заказ», «Купить». Форму заказа размещают рядом с товаром, в корзине или после блока с ценой на лендинге.

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

Форма заявки

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

Классический набор полей:

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

CTA: «Оставить заявку», «Получить расчёт», «Получить консультацию». Форма заявки особенно важна для B2B-сайтов и компаний, работающих по услугам: лиды из неё попадают прямо в отдел продаж.

Когда она нужна: сайтам услуг, агентствам, B2B-проектам, сервисам, где обращение переходит в сделку.

Форма обратного звонка

Форма обратного звонка (коллбек, «перезвоните мне») — мини-форма, в которой чаще всего только одно поле: телефон. Иногда добавляют имя и удобное время звонка.

CTA-кнопка: «Перезвоните мне», «Заказать звонок», «Перезвоните». Такую форму размещают в шапке сайта, в плавающей кнопке или во всплывающем окне.

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

Как подключить форму без бэкенда

Все четыре типа форм подключаются одинаково — через сервис FormToMail. Вам не нужен сервер: данные формы отправляются на email (электронную почту) и в Telegram (Телеграм) через API.

Шаги подключения:

• создайте бесплатный API-ключ в личном кабинете;
• укажите получателей: email (электронную почту) и/или Telegram (Телеграм);
• вставьте HTML-форму и небольшой скрипт на страницу сайта.

Пример минимальной формы обратного звонка на чистом HTML:

<form id="callback-form">
  <input name="name" placeholder="Имя">
  <input name="phone" placeholder="+7 900 000-00-00">
  <button>Отправить заявку</button>
</form>

<script>
document.getElementById("callback-form").addEventListener("submit", async (event) => {
  event.preventDefault();

  const name = event.target.elements.name.value;
  const phone = event.target.elements.phone.value;

  await fetch("https://api.formtomail.ru/send", {
    method: "POST",
    headers: {
      "Authorization": "Bearer YOUR_API_KEY",
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      title: "Новая заявка",
      body: { "Имя": name, "Телефон": phone }
    })
  });
});
</script>

После отправки заявка придёт на указанную электронную почту и в Telegram — на смартфон или компьютер менеджера. Подробные примеры для HTML, Vue, React, PHP, Python и cURL смотрите на странице примеров кода, а полное описание параметров API — в документации.

Какую форму выбрать

Главный критерий — цель обращения посетителя. Сравнительная таблица поможет определиться:

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

Частые вопросы

Чем форма обратной связи отличается от формы заявки?

Форма обратной связи собирает вопросы и сообщения, а форма заявки — контакты клиента, готового к покупке или сотрудничеству. Заявка важнее для отдела продаж.

Нужен ли бэкенд, чтобы заявки приходили на почту и в Telegram?

Нет. FormToMail отправляет данные на email (электронную почту) и в Telegram через API — без сервера, SMTP и серверного кода.

Можно ли получать заявки сразу на почту и в Telegram?

Да. При создании API-ключа указываются получатели, и уведомления о каждой заявке дублируются в оба канала.

Вывод

Формы обратной связи, заказа, заявки и обратного звонка закрывают разные задачи, но подключаются одинаково. Заявки с формы приходят на email — электронную почту — и в Telegram (Телеграм) без бэкенда всего за несколько минут.

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

Подключите сайт — создайте API-ключ в личном кабинете, вставьте форму и начните получать заявки на почту и в Telegram.