Как подключить форму обратной связи к Telegram: Пошаговое руководство

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

1. Подготовка: Создание Telegram-бота

Для работы с API Telegram вам понадобится специальный бот, который будет выступать посредником между вашим сайтом и вашим личным или групповым чатом.

Шаг 1.1: Регистрация бота через BotFather

1. Откройте Telegram и найдите официального бота @BotFather.
2. Отправьте ему команду /newbot.
3. Следуйте инструкциям:
   • Задайте отображаемое имя для вашего бота (например, “МойСайт Уведомления”).
   • Задайте уникальный юзернейм, заканчивающийся на “bot” (например, MySiteAlerts_bot).
4. В ответ BotFather пришлет вам токен API (например, 123456789:AABBCCDD-EEFF-GGHH-IIJJ-KKLLMMNN). Этот токен является вашим ключом доступа и должен храниться в секрете на сервере.

Шаг 1.2: Определение Chat ID (Идентификатор чата)

Чтобы бот знал, куда отправлять сообщения, вам нужен уникальный идентификатор чата (Chat ID).

1. Начните чат с вашим новым ботом (найдите его по юзернейму).
2. Отправьте любое тестовое сообщение.
3. Откройте в браузере следующий URL, подставив ваш токен: https://api.telegram.org/bot<ВАШ_ТОКЕН>/getUpdates
4. В полученном JSON-ответе найдите поле "id" внутри объекта "chat". Это и будет ваш Chat ID (он выглядит как -123456789 для групп или 123456789 для личного чата).

Совет: Для отправки сообщений в групповой чат необходимо добавить вашего бота в этот чат и сделать его администратором. Chat ID группы будет начинаться со знака минус.

2. Фронтенд: HTML-форма

Создадим простую HTML-форму. Важно, чтобы форма отправляла данные методом POST на серверный скрипт, который мы создадим далее (send.php).

<form id="contactForm" action="send.php" method="POST" class="max-w-md mx-auto p-6 bg-white shadow-xl rounded-xl">
    <div class="mb-4">
        <label for="name" class="block text-gray-700 font-bold mb-2">Имя:</label>
        <input type="text" id="name" name="name" required
               class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
    </div>
    <div class="mb-4">
        <label for="email" class="block text-gray-700 font-bold mb-2">Email:</label>
        <input type="email" id="email" name="email" required
               class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
    </div>
    <div class="mb-6">
        <label for="message" class="block text-gray-700 font-bold mb-2">Сообщение:</label>
        <textarea id="message" name="message" rows="4" required
                  class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"></textarea>
    </div>
    <button type="submit"
            class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg focus:outline-none focus:shadow-outline transition duration-150">
        Отправить сообщение
    </button>
    <!-- Скрытое поле для защиты от ботов (Honeypot) -->
    <input type="text" name="hp_check" style="display:none;" tabindex="-1" autocomplete="off">
    <p id="formStatus" class="mt-4 text-sm"></p>
</form>

3. Бэкенд: Серверный скрипт (send.php)

Серверный скрипт (назовем его send.php) выполняет три ключевые функции:

1. Получает данные из формы.
2. Проверяет и очищает их (санитизация).
3. Формирует запрос к Telegram Bot API.

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

Шаг 3.1: Константы и код скрипта

Это полный код файла send.php. Не забудьте заменить константы BOT_TOKEN и CHAT_ID на ваши данные.

<?php
// 1. Конфигурация
define('BOT_TOKEN', 'ВАШ_ТОКЕН_API'); // Замените на токен, полученный от BotFather
define('CHAT_ID', 'ВАШ_CHAT_ID');     // Замените на Chat ID, полученный через getUpdates
define('TELEGRAM_API_URL', '[https://api.telegram.org/bot](https://api.telegram.org/bot)' . BOT_TOKEN . '/sendMessage');

if ($_SERVER["REQUEST_METHOD"] != "POST") {
    // Допускаются только POST-запросы
    http_response_code(405);
    die("Метод не разрешен.");
}

// 2. Проверка Honeypot (простая антиспам-защита)
if (!empty($_POST['hp_check'])) {
    http_response_code(403);
    die("Доступ запрещен (антиспам).");
}

// 3. Сбор и санитизация данных
// Очищаем и обрезаем данные от пользователя
$name = isset($_POST['name']) ? htmlspecialchars(strip_tags(trim($_POST['name']))) : 'Не указано';
$email = isset($_POST['email']) ? htmlspecialchars(strip_tags(trim($_POST['email']))) : 'Не указан';
$message = isset($_POST['message']) ? htmlspecialchars(strip_tags(trim($_POST['message']))) : 'Пустое сообщение';

// 4. Формирование сообщения
// Используем MarkdownV2 для форматирования. Символы, которые могут сломать Markdown (*, _, [, ], (, ), ~, `, >, #, +, -, =, |, {, }, ., !)
// должны быть экранированы обратным слешем (\)
$text = "*Новая заявка с сайта*\n";
$text .= "--------------------------------------\n";
$text .= "👤 *Имя:* " . str_replace(['-', '.', '!', '*'], ['\-', '\.', '\!', '\*'], $name) . "\n";
$text .= "📧 *Email:* " . str_replace(['-', '.', '!', '*'], ['\-', '\.', '\!', '\*'], $email) . "\n";
$text .= "📝 *Сообщение:*\n" . str_replace(['-', '.', '!', '*'], ['\-', '\.', '\!', '\*'], $message);


// 5. Подготовка запроса к Telegram API
$params = [
    'chat_id' => CHAT_ID,
    'text' => $text,
    'parse_mode' => 'MarkdownV2', // Важно для корректного отображения жирного шрифта и переносов
];

// Кодирование всех параметров для URL
$query = http_build_query($params);

// 6. Отправка запроса с использованием cURL
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, TELEGRAM_API_URL);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $query);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$result = curl_exec($ch);
$http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);

// 7. Обработка ответа
if ($http_code == 200) {
    // Успешный ответ для клиента
    echo json_encode(['status' => 'success', 'message' => 'Сообщение успешно отправлено!']);
} else {
    // Логируем ошибку на сервере для отладки
    error_log("Ошибка Telegram API: Код $http_code. Ответ: $result");
    // Отправляем клиенту общее сообщение об ошибке
    echo json_encode(['status' => 'error', 'message' => 'Произошла ошибка при отправке. Пожалуйста, попробуйте позже.']);
}
?>

Шаг 3.2: Тестирование

После загрузки файла send.php на ваш сервер и замены констант (BOT_TOKEN, CHAT_ID), вы можете протестировать форму. Если вы используете асинхронную отправку формы через JavaScript (fetch или XMLHttpRequest), не забудьте настроить обработку ответа от send.php на фронтенде для вывода сообщения об успехе или ошибке (formStatus).

4. Безопасность и лучшие практики

Интеграция с Telegram, как и любая серверная операция, требует внимания к безопасности.

1. Санитизация данных: Всегда используйте функции санитизации (htmlspecialchars, strip_tags) для очистки пользовательского ввода, прежде чем вставлять его в строку сообщения или использовать в других частях кода. Для режима MarkdownV2 также важно экранировать специальные символы (как показано в скрипте).
2. Защита от спама (Honeypot): Используйте скрытое поле в форме (<input type="text" name="hp_check" style="display:none;">). Если бот-спамер заполнит его, серверный скрипт должен отклонить запрос (как показано в send.php).
3. Ограничение доступа: Используйте проверку метода запроса (if ($_SERVER["REQUEST_METHOD"] != "POST")) для предотвращения прямых GET-запросов к скрипту.
4. Секретные данные: Токен API и Chat ID должны храниться только на сервере (в PHP-скрипте, переменных окружения или базе данных), никогда не передавайте их на сторону клиента.