✎ 24.08.2021

Как связать форму с сайта с телеграмм

Вначале необходимо создать своего бота в telegramm. Делается это достаточно просто. В поиске наберите @botfather, откройте родительского бота и нажмите “Start”:

blank

Далее:

  • Пишем команду /newbot, для создания нового бота.
  • Вначале придумываем уникальное имя для бота. Пример: “example_bot_for_me”.
  • После вводим ник бота. Можно просто добавить слово “bot” в конец уникального имени( которое вы писали в предыдущем пункте). Пример: “example_bot_for_me_bot”.
blank

Если все прошло успешно, то увидите сообщение поздравление, содержащее токен бота (он понадобится нам позже), в моем случае это:

“1988194324:AAF9fRZYC-A_1FLYeQa-ZZ-7KZTaXntIgRU

blank

Затем ищем своего бота в поиске, указав его ник и нажать кнопку “Запустить” или “Start” для активации нашего бота. В моем случае ник @example_bot_for_me_bot.

blank

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

Для создания группы слева вверху жмем на бургер и в открывшемся меню выбираем пункт Создать группу. В появившемся окне придумываем название для группы. Например: “Заявки с сайта example.сайт”.

blank

Жмем кнопку далее и в появившемся списку в поиске вводим название нашего бота. Выбираем бота и жмем создать группу.

После создания группы необходимо узнать ее id.

В браузере набираем адрес:

https://api.telegram.org/botXXXXXXXXXXXXXXXXXXXXXXX/getUpdates

Заменяем X на id нашего бота который мы получили при создании бота (в нашем случае это “1988194324:AAF9fRZYC-A_1FLYeQa-ZZ-7KZTaXntIgRU” ).

Полный адрес получился:

https://api.telegram.org/bot1988194324:AAF9fRZYC-A_1FLYeQa-ZZ-7KZTaXntIgRU /getUpdates

На странице появится текст из которого нам необходимо взять id группы, который начинается со знака минус. В нашем случае это: “-544489534”. Данный id нам понадобится в обработчике формы php.

blank

Создание простой формы для сайта.

В файле index.html добавим форму:

<form class="consultation__form">
    <input type="text" name="name" placeholder="Ваше имя*" required>
    <input type="tel" name="phone" placeholder="Ваш телефон*" required>
    <textarea name="question" placeholder="Сообщение" required></textarea>
    <input type="submit" value="Получить консультацию">
</form>

Затем добавим script для обработки формы (либо в index.html либо в js файл, но без тега script):

<script>
    const siteForm = document.querySelector('.consultation__form');
    siteForm.addEventListener('submit',async (e) => {
        e.preventDefault();
        const item = e.target;
        const submitBtn =  item.querySelector('input[type=submit]');
        submitBtn.setAttribute('disabled', 'true');

        let response = await fetch('/send.php', {
            method: 'POST',
            body: new FormData(item)
        })
            .then(data => {
                item.reset();
            })
            .catch((error) => console.log("ошибка!", error))
            .finally(() => {
                submitBtn.removeAttribute('disabled');
            });
    })
</script>

Затем добавим php обработчик формы. Для этого создадим в корне сайта файл send.php и добавим следующий код:

<?php
if ($_SERVER['REQUEST_METHOD'] != 'POST') {
    exit();
}

// Ваш сайт
$site = 'example.сайт';
// Тема письма
$subject = 'Заявка с сайта '.$site.'!';
// От кого
$from = 'form@'.$site;
// Кому
$to = 'info@'.$site;

//В переменную $token нужно вставить id вашего бота
$token = "1988194324:AAF9fRZYC-A_1FLYeQa-ZZ-7KZTaXntIgRU";
//В chat_id вставляем id группы
$chat_id = "-544489534";

var_dump($_POST);
if ( ! empty( $_POST ) ) {
    $name  = htmlspecialchars($_POST['name']);
    $phone  = htmlspecialchars($_POST['phone']);
    $question  = htmlspecialchars($_POST['question']);

    // Тело сообщения для отправки по почте
    $message = "Имя клиента: $name \r\n";
    $message .= "Телефон клиента: $phone \r\n";
    $message .= "Сообщение: $question";

    //Тело сообщения для отправки в телеграмм
    $txt = "Имя клиента: $name %0A";
    $txt .= "Телефон клиента: $phone %0A";
    $txt .= "Сообщение: $question";

    try {
        $headers = 'From: form@'.$site."\r\n".
                'X-Mailer: PHP/' . phpversion();

        //Передаем сообщение по почте
		$mail = mail( $to, $subject, $message, $headers );

        //Передаем сообщение в телеграмм
        $sendToTelegram = fopen("https://api.telegram.org/bot{$token}/sendMessage?chat_id={$chat_id}&parse_mode=html&text={$txt}","r");

        if ( $mail && $sendToTelegram ) {
            echo json_encode('Спасибо! Ваша заявка принята. Мы свяжемся с вами в ближайшее время.');
        } else {
            echo json_encode('Ошибка отправки!');
        }

        die();

    } catch (Exception $e) {
        echo json_encode("Ошибка: $e->getMessage()");
    }
} else {
    echo json_encode("Тело сообщения пустое");
}
?>

Данный файл send.php отправляет письмо на почту и в телеграмм (не забудьте заменить данные на свои).

В результате в телеграмм приходит следующее сообщение:

blank

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

 

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Мы свяжемся с вами в ближайшее время.

картинка звонка

Для отправки сообщения снимите галочку перед кнопкой отправки.

404