Smartlanding

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

Заявки с сайта в TelegramВсем — привет. Давно зрела идея разобраться с отправкой данных из формы на сайте в мессенджер Telegram, но руки не доходили, а моментально получать заявки прямо в телефон, ой как хотелось!

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

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

Итак, давайте приступим. Первое что нам нужно, это создать своего бота. Делается это достаточно просто. В поиске наберите @botfather, откройте родительского бота и нажмите «Start»:

Как связать форму с Telegram

Далее:

  • Пишем команду /newbot, для создания нового бота.
  • Придумываем имя бота.
  • Придумываем ник бота.

Создание бота в Телеграм

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

341996777:AAHbnuvQib-vHU47i-6hbUrCU9D-qHYekxc

Теперь нужно найти своего бота в поиске, указав его ник и нажать «Start», чтобы активировать его. В моем случае ник @DWS_MESSAGE_bot.

Активация бота в Telegram

После этого, нужно создать групповой чат, в который будут приходить заявки и пригласить туда нашего бота. Давайте займемся этим.

Зайдите в меню, нажмите «New Group» и задайте имя вашему чату.

Создание чата для приема заявок

Не забываем пригласить своего бота в чат.

Добавление бота в чат для приема заявок

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

  • /join @ник_бота

А затем, в браузере введем:

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

где, XXXXXXXXXXXXXXXXXXXXXXX — токен вашего бота, полученный ранее.

Если все сделали правильно, то перед вами откроется подобная страница:

получение id чата в Телеграм

Нас интересует объект «chat»:{«id»:-209253141. — Это id моего тестового чата. На данном этапе у нас есть все, чтобы отправлять текстовые сообщение из контактной формы на сайте в Telegram. Давайте займемся реализацией PHP-обработчика нашей формы, и сделаем разметку самой формы.

Разметка формы

<div class="form__wrapper">
      <form id="form-contact" method="POST" class="form-element" autocomplete="off">
        <p class="form-title">Закажите обратный звонок и наш консультант свяжется с вами</p>
        <p class="form-message"></p>
          <input name="name" type="text" class="form-input__name" tabindex="0" placeholder="Введите ваше имя" required>
          <input name="phone" type="tel" class="form-input__phone" tabindex="0" pattern="^[ 0-9]+$" placeholder="Введите ваш телефон" required>
          <input name="theme" type="hidden" class="form-input__theme"  value="Заявка с сайта">
          <input type="submit" class="form-input__button" value="Отправить">
      </form>
    </div>

Не забывайте, что форма отправляется без перезагрузки страницы, а значит используется ajax, и, для упрощения, jQuery. Поэтому подключаем сам jQuery, если не подключен, а после, и сам скрипт.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="./telegramform/js/telegramform.js"></script>

Код с ajax запросом. Файл — telegramform.js

$(document).ready(function () {
    $("form-element").submit(function () {
        var formID = $(this).attr('id');
        var formNm = $('#' + formID);
        var message = $(formNm).find(".form-message");
        var formTitle = $(formNm).find(".form-title");
        $.ajax({
            type: "POST",
            url: './telegramform/php/send-message-to-telegram.php',
            data: formNm.serialize(),
            success: function (data) {
              // Вывод сообщения об успешной отправке
              message.html(data);
              formTitle.css("display","none");
              setTimeout(function(){
                formTitle.css("display","block");
                message.html('');
                $('input').not(':input[type=submit], :input[type=hidden]').val('');
              }, 3000);
            },
            error: function (jqXHR, text, error) {
                // Вывод сообщения об ошибке отправки
                message.html(error);
                formTitle.css("display","none");
                setTimeout(function(){
                  formTitle.css("display","block");
                  message.html('');
                  $('input').not(':input[type=submit], :input[type=hidden]').val('');
                }, 3000);
            }
        });
        return false;
    });
});

А теперь сам обработчик нашей формы. Файл — send-message-to-telegram.php:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (!empty($_POST['name']) && !empty($_POST['phone'])){
  if (isset($_POST['name'])) {
    if (!empty($_POST['name'])){
  $name = strip_tags($_POST['name']);
  $nameFieldset = "Имя пославшего: ";
  }
}

if (isset($_POST['phone'])) {
  if (!empty($_POST['phone'])){
  $phone = strip_tags($_POST['phone']);
  $phoneFieldset = "Телефон: ";
  }
}
if (isset($_POST['theme'])) {
  if (!empty($_POST['theme'])){
  $theme = strip_tags($_POST['theme']);
  $themeFieldset = "Тема: ";
  }
}
$token = "341996777:AAHbnuvQib-vHU47i-6hbUrCU9D-qHYekxc";
$chat_id = "-209253141";
$arr = array(
  $nameFieldset => $name,
  $phoneFieldset => $phone,
  $themeFieldset => $theme
);
foreach($arr as $key => $value) {
  $txt .= "<b>".$key."</b> ".$value."%0A";
};
$sendToTelegram = fopen("https://api.telegram.org/bot{$token}/sendMessage?chat_id={$chat_id}&parse_mode=html&text={$txt}","r");
if ($sendToTelegram) {
 
  echo '<p class="success">Спасибо за отправку вашего сообщения!</p>';
    return true;
} else {
  echo '<p class="fail"><b>Ошибка. Сообщение не отправлено!</b></p>';
}
} else {
  echo '<p class="fail">Ошибка. Вы заполнили не все обязательные поля!</p>';
}
} else {
header ("Location: /");
}

?>

Во многом он повторяет обработчик из других форм на блоге. Например, в статье «Контактная форма без перезагрузки страницы» используется аналогичный подход, и вы легко сможете осуществить отправку данных как на почту, так и в мессенджер одновременно.

Тут стоит обратить внимание на переменные $token и $chat_id. Не забывайте подставить туда свои данные. Кроме того, не забывайте, что все это будет работать, только если данные идут через https.

Вот так, средствами php можно отправлять в Telegram сообщения. Если вы используете CMS MODX, то на блоге igamov.ru есть отличная инструкция по интеграции формы с мессенджером.

Скачать исходник

Кстати, подписывайтесь на Telegram канал. Уведомления об обновлениях на блоге, в первую очередь, приходят туда)

83 комментария

  • dimadv7

    Как вообще считаете, востребованная ли это функция? Хотят ли владельцы сайтов получать уведомления о заказах, подписках в мессенджер? Мне, например, очень хотелось иметь такую возможность.

    Ответить
  • Михаил

    Круто.

    Ответить
  • Михаил

    А можно ли как-то сделать, чтобы заявки одновременно уходили и в CRM, например, Bitrix24, и на Telegram?

    Ответить
  • dimadv7

    Конечно, можно, все что нужно это прописать токен, chat-id, и передать нужные данные в строку

    $sendToTelegram = fopen("https://api.telegram.org/bot{$token}/sendMessage?chat_id={$chat_id}&parse_mode=html&text={$txt}","r");
    Ответить
  • Лариса

    круто! уверена, что такое оповещение будет становится все более востребованным, а интересно, можно ли и для viber аналогичную штуку реализовать?

    Ответить
  • Дмитрий

    все получилось, правда вот не могу понять почему имя вот такой код,

    	$nameFieldset = "Имя: ";
    	$phoneFieldset = "Телефон: ";
    	$emailFieldset = "Почта: ";
    	$urlFieldset = "url: ";
    	$leadformFieldset = "leadform: ";
    	$sourceFieldset = "Источник кампании: ";
    	$mediumFieldset = "Канал кампании: ";
    	$campaignFieldset = "Название кампании: ";
    	$termFieldset = "Ключевое слово: ";
    
    $arr = array(
    	$nameFieldset => $data['name'],
    	$phoneFieldset => $data['phone'],
    	$emailFieldset => $data['email'],
    	$urlFieldset => $data['url'],
    	$leadformFieldset => $data['leadform'],
    	$sourceFieldset = $data['source'],
    	$mediumFieldset = $data['medium'],
    	$campaignFieldset = $data['campaign'],
    	$termFieldset = $data['term'],
    );
    

    в ответ приходят некоторые пункты без названия, а просто идет нумерация:

    Имя: Дмитрий
    Телефон: 7 (999) 999-99-99
    Почта: test@test.com
    url: xxx.ru
    leadform: Обратный звонок
    0 yandex
    1 cpc
    2 testovaya_kompaniya
    3 testoviy_telegram

    Ответить
  • dimadv7

    Честно, не настолько глубоко понимаю php, чтобы объяснить, почему так. У меня не возникало подобного и не сталкивался. Не знаю что и посоветовать. Почему то ассоциативный массив, начинает вести себя как обычный, в определенный момент времени…

    Ответить
  • dimadv7

    С другими мессенджерами, пока, такого трюка провернуть нельзя, вроде как.

    Ответить
  • dimadv7

    а, ну так у вас присвоение стоит… Нужно не знак равенства, а =>. То есть не так:

    $sourceFieldset = $data['source'],

    А так:

    $sourceFieldset => $data['source'],
    Ответить
  • iarts

    Ух, всего-то, спасибо. Запустил бота и чат, пока на телефоне проматывал страницу.

    Осталось только с формой разобраться. Не пойму, зачем в конце все загонять в массив и делать цикл, переменные то уникальны?

    и слово $array = array(); уже давно не используется, достаточно $array = [];

    Телеграм, пока еще как подросток, его лучшие дни впереди. Думаю, выстрелит через 1-2 года и не хотелось бы потом быть в роли догоняющего.

    Ответить
  • iarts

    Я пол дня голову ломал, что же не так, почему бот пишет сам себе, но в чат не приходит… Отгадка оказалась простой:
    публичный чат: sendMessage?chat_id=@chatname
    приватный чат: sendMessage?chat_id=numeric_chat_id

    Ответить
  • iarts

    Цикл тоже не нужен, доп. проверки каждого єлемента тем более, упростил до невозможности

    Изначально спрашиваем, если не пустой POST
    а в следующем условии проверяем на заполненность имя и телефон

    if(!empty($_POST)){
        
        $token = "273805635:AAGQOuPVadtQyEx0COPrDnq2r-YmUo90xaU";
        // $chat = "-1001109079911";
        $chat = "@iarts_cn";
        
        if (!empty($_POST['name']) && !empty($_POST['phone'])){
        
            $order = rand(0, 1000);
            $name = $_POST['name'];
            $phone = $_POST['phone'];
            
            $txt = "New order: $order \n\rName: $name \n\rPhone: $phone";    
    
            if (fopen("https://api.telegram.org/bot$token/sendMessage?chat_id=$chat&text=$txt", "")) {
                
                $return = 'Спасибо, Ваш заказ отправлен оператору!';
        
            } else {
            
                $return =  'Ошибка отправки!';
            }
        }
    }

    записываем ответ в переменную и выводим в нужном месте страницы в виде

    <?= $return ?>
    Ответить
  • iarts
    $txt = "New order: $order %0AName: $name %0APhone: $phone";   

    с учетом переноса строки

    Ответить
  • dimadv7

    Цикл был нужен мне, для более сложной формы, с отправкой в CRM, Telegram, на почту и еще кое для чего. Поэтому, остался и тут, чтобы легче было связать в будущем. Если отправлять данные только в Telegram, то действительно не нужен. Спасибо, за замечания и то, что поделились своим решением)))

    Ответить
  • Александр

    Спасибо за скрипт!
    Подскажите как отправлять данные с ЮТМ-меток?

    Ответить
  • dimadv7

    А в чем собственно проблема?

    Ответить
  • Александр

    Я просто вообще не шарю в php, но я смог разобраться как добавлять дополнительные поля для ввода. А вот, чтоб ЮТМ со строки списывались я не понимаю.

    Ответить
  • Александр

    Нашел статью https://smartlanding.biz/referalnye-xvosty.html и смог всё настроить! Спасибо!

    Ответить
  • Дмитрий

    Отлично:)

    Ответить
  • Александр

    Подскажите, как разместить несколько форм на странице?

    Ответить
  • Александр

    Разобрался. Нужно поменять form id=»form-contact» на другой id.

    Ответить
  • Михаил

    Спасибо.
    Пригодится

    Ответить
  • Илья

    А как присваивать id вместо order rand ?
    или из базы выбирать auto id

    Ответить
  • Михаил

    А как потом бота настроить, чтобы он полученное сообщение отправил в группу где нас несколько человек?

    Ответить
  • Дмитрий

    Пригласить бота в группу. Делать все тоже самое, только, как написано в статье, просто не создавать новую, а пригласить в существующую.

    Ответить
  • Максим

    Дмитрий. У меня сообщение в телеграм отправляется если ссылку прямо в строке адреса браузера указать, а вот в коде через fopen не уходять сообщения. Может подскажешь причину?

    Ответить
  • Дмитрий

    — не забыл поставить, когда id чата указывал?

    Ответить
  • Михаил

    Здорово, создал группу, в ней несколько человек, и все получают данные из формы!
    Никто не останется теперь без ответа.

    Спасибо за статью, однозначно нужно и полезно

    Ответить
  • Михаил

    А как можно передавать заявки по SMS?

    Ответить
  • dimadv7

    Да есть сервисы, которые оказывают подобную услугу. Легко гуглятся. По возможности, попробую написать статью на эту тему)

    Ответить
  • Александр

    формы на всех сайтах перестали работать

    Ответить
  • Александр

    Мне кажется это как то связано с обновлением 18 мая

    Ответить
  • Александр

    Сейчас скачал исходники и закинул ради теста, все работает. А вот на старых сайтах все перестало работать. Буду разбираться. Прошу прощения за панику :)

    Ответить
  • Александр

    Как оказалось это были временный сбой на стороне телеграм.

    Ответить
  • Станислав

    А можно получать на сайт сообщения из этого чата?

    Ответить
  • site_maker

    Как сделать что бы перед номером вставлялся знак + ?

    Ответить
  • dimadv7

    А как ты уже пробовал? Какая ошибка?

    Ответить
  • Кирилл

    Кто скажет, в чем проблема?
    Настроил все, прописал токен и ид группы. Но при отправке с формы страница перезагружается и показывает 404.
    Стоит WordPress и CF7

    Ответить
  • Noob

    Скажите пожалуйста, что я делаю не так?Меняю token и chat_id, закидываю файлы исходника на хостинг захожу на сайт пишу в форму но ничего не приходит если собственноручно прописывать это https://api.telegram.org/bot{$token}/sendMessage?chat_id={$chat_id}&parse_mode=html&text={$txt} то бот пишет в чат а если вводить в форму то не пишет. Помогите пожалуйста

    Ответить
  • ed77

    Скажите, чтоб это работало нужен сертификат ssl на сайте чтоб стоял?

    Ответить
  • Алекс

    fopen — не самое правильное решение. многие пишут «из браузера работает, из кода — нет». я бы использовал file_get_contents с последующим json_decode ответа и его разбора — telegram возвращает и статус и ошибку если она была.
    а так — очень дельная статья, спасибо большое.

    Ответить
  • alaski

    Добрый день! Форма супер, но такая отправка на ios работает через раз :( бывает вообще не работает

    Ответить
  • Александр

    День добрый. А можешь поподробней объяснить, как вывести сообщение об успешной отправке?

    Ответить
  • Алексей

    Хоть убей — просто обновляет страницу и все.

    Ответить
  • Алексей

    Да, только через SSL.
    используй letsencrypt

    Ответить
  • Алексей

    Добрый день, Вам удалось решить проблему?

    Ответить
  • 4ezare

    Для всех у кого форма не работает.
    Проверьте параметр allow_url_fopen в настройках PHP вашего хостинга, должен быть 1

    Ответить
  • Николай

    Бот еще работает ?

    Ответить
  • dimadv7

    Конечно работает

    Ответить
  • SH4B1N.PW

    Вопрос:
    Можно ли сделать отправку и на почту и на телеграм? как объединить эти скрипты?

    Ответить

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

Поделитесь статьей в социальных сетях, чтобы не потерять