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

Шаг 1. Бот и токен

Открой в Telegram @BotFather, отправь /newbot и следуй подсказкам. Он выдаст токен — длинную строку вида 123456:ABC.... Это пароль от бота.

Шаг 2. Свой chat_id

Напиши своему боту любое сообщение, затем открой в браузере https://api.telegram.org/bot<ТОКЕН>/getUpdates. В ответе найди chat → id: это число и есть твой chat_id.

Шаг 3. Серверная функция

На Vercel создай файл api/lead.js. Он принимает форму и пересылает её в Telegram:

export default async function handler(req, res) {
  if (req.method !== 'POST') return res.status(405).end();
  const { name, contact, task } = req.body || {};
  const text = `Новая заявка\nИмя: ${name}\nКонтакт: ${contact}\nЗадача: ${task}`;
  const r = await fetch(
    `https://api.telegram.org/bot${process.env.BOT_TOKEN}/sendMessage`,
    { method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ chat_id: process.env.CHAT_ID, text }) }
  );
  res.status(r.ok ? 200 : 502).json({ ok: r.ok });
}

Шаг 4. Переменные окружения

В проекте на Vercel открой Settings → Environment Variables и добавь BOT_TOKEN и CHAT_ID. После этого перезапусти деплой.

Шаг 5. Форма на странице

Форма отправляет данные запросом POST на /api/lead. После ответа 200 покажи «Спасибо, свяжусь с вами».

Если токен случайно попал на GitHub или в код страницы, сразу отзови его в @BotFather командой /revoke и выпусти новый. Добавь на форму простую защиту от спама, например скрытое поле-ловушку.

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

Можно ли без серверной функции?

Технически можно вызвать API прямо со страницы, но тогда токен виден всем посетителям. Не делай так.

А если не хочется форму?

Достаточно кнопки-ссылки на твой Telegram: так сделано на странице «Контакты» этого сайта.