Форма обратной связи в Telegram: отправка заявок с сайта (HTML + PHP)

Что такое Telegram-бот для обратной связи?

Это система, которая позволяет получать сообщения от пользователей вашего сайта прямо в Telegram. Это удобнее email-уведомлений, так как сообщения приходят мгновенно и доступны на всех устройствах.

Пошаговая инструкция

1. Создание Telegram бота

• Найдите @BotFather в Telegram
• Отправьте команду /newbot
• Следуйте инструкциям для создания бота
• Сохраните полученный токен бота (например: 1234567890:AAHfiqksKZ0YhBGRYm1vGwJk2PHBl6BWrm0)
• Создайте новый канал в который будут приходить сообщения и добавьте в него бота как администратора
• Получите ID вашего чата(канала) через @userinfobot (нужно переслать сообщение из вашего чата в @userinfobot). ID начинается со знака "-".

2. Создание HTML формы

<form id="feedbackForm" class="feedback-form">
    <input type="text" name="name" placeholder="Ваше имя" required>
    <input type="email" name="email" placeholder="Email" required>
    <textarea name="message" placeholder="Сообщение" required></textarea>

    <!-- Защита от спама -->
    <div class="captcha-container">
        <img id="captchaImage" src="/api/generate_captcha.php">
        <button type="button" id="refreshCaptcha">Обновить капчу</button>
        <input type="text" name="captcha" placeholder="Введите код" required>
    </div>

    <button type="submit">Отправить</button>
</form>

3. Создание PHP обработчика (api/send_telegram.php)

<?php
session_start();

// Проверка CSRF и капчи
if (!isset($_POST['captcha']) || $_POST['captcha'] !== $_SESSION['captcha']) {
    echo json_encode(['success' => false, 'error' => 'Неверный код капчи']);
    exit;
}

// Конфигурация
$config = [
    'bot_token' => 'YOUR_BOT_TOKEN',
    'chat_id' => 'YOUR_CHAT_ID',
    'api_url' => 'https://api.telegram.org/bot'
];

// Подготовка данных
$name = htmlspecialchars($_POST['name']);
$email = htmlspecialchars($_POST['email']);
$message = htmlspecialchars($_POST['message']);
$page_url = htmlspecialchars($_POST['page_url']);

// Формируем сообщение
$text = "📨 Новое сообщение с сайта\n\n";
$text .= "👤 Имя: $name\n";
$text .= "📧 Email: $email\n";
$text .= "💬 Сообщение: $message\n";
$text .= "🔗 Страница: $page_url\n";

// Отправка в Telegram
$params = [
    'chat_id' => $config['chat_id'],
    'text' => $text,
    'parse_mode' => 'HTML'
];

$ch = curl_init($config['api_url'] . $config['bot_token'] . '/sendMessage');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $params);
$result = curl_exec($ch);
curl_close($ch);

// Возвращаем результат
echo json_encode(['success' => true]);

4. Генерация капчи (api/generate_captcha.php)

<?php
session_start();

// Создаем изображение
$image = imagecreatetruecolor(120, 40);
$bg = imagecolorallocate($image, 255, 255, 255);
$text_color = imagecolorallocate($image, 0, 0, 0);

// Заполняем фон
imagefilledrectangle($image, 0, 0, 120, 40, $bg);

// Генерируем код
$code = substr(md5(uniqid()), 0, 6);
$_SESSION['captcha'] = $code;

// Добавляем шум
for($i = 0; $i < 1000; $i++) {
    $x = rand(0, 120);
    $y = rand(0, 40);
    imagesetpixel($image, $x, $y, $text_color);
}

// Рисуем текст
imagettftext($image, 20, 0, 15, 30, $text_color, 'path/to/font.ttf', $code);

// Выводим изображение
header('Content-Type: image/png');
imagepng($image);
imagedestroy($image);

5. JavaScript для отправки формы

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('feedbackForm');
    const refreshCaptcha = () => {
        const captchaImg = document.getElementById('captchaImage');
        captchaImg.src = '/api/generate_captcha.php?' + new Date().getTime();
    };

    document.getElementById('refreshCaptcha').onclick = refreshCaptcha;

    form.onsubmit = async function(e) {
        e.preventDefault();
        const formData = new FormData(this);

        try {
            const response = await fetch('/api/send_telegram.php', {
                method: 'POST',
                body: formData
            });

            const result = await response.json();

            if (result.success) {
                alert('Сообщение отправлено!');
                this.reset();
                refreshCaptcha();
            } else {
                alert('Ошибка: ' + result.error);
                refreshCaptcha();
            }
        } catch (error) {
            console.error('Error:', error);
            alert('Ошибка отправки');
            refreshCaptcha();
        }
    };
});

6. CSS стили

.feedback-form {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
}

.feedback-form input,
.feedback-form textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.captcha-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.captcha-container input {
    width: 100px;
}

button {
    background: #0063B2;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background: #004c8c;
}

Структура файлов

feedback/
├── index.html           # Страница с формой
├── css/
│   └── feedback.css    # Стили формы
├── js/
│   └── feedback.js     # Обработка формы
└── api/
    ├── send_telegram.php     # Отправка в Telegram
    └── generate_captcha.php  # Генерация капчи

Безопасность

Защита от спама:

• Капча
• Проверка заголовков
• Ограничение частоты запросов

Конфигурация PHP:

   // Добавьте в .htaccess
   <FilesMatch "^(send_telegram|generate_captcha)\.php$">
       Order Allow,Deny
       Allow from all

       # Только AJAX запросы
       SetEnvIf X-Requested-With "XMLHttpRequest" allow_xhr
       Allow from env=allow_xhr
   </FilesMatch>

Защита токена бота:

• Храните токен в отдельном конфиг-файле
• Не публикуйте токен в репозитории
• Используйте переменные окружения

Заключение

Telegram-бот для обратной связи - это:

• Мгновенные уведомления
• Удобное управление сообщениями
• Доступность на всех устройствах
• Простота интеграции

При реализации важно:

• Обеспечить безопасность
• Защитить от спама
• Сделать удобный интерфейс
• Обрабатывать ошибки