Как связать форму на сайте с 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 канал. Уведомления об обновлениях на блоге, в первую очередь, приходят туда)

156 комментариев

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

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

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

  2. Круто.

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

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

      $sendToTelegram = fopen("https://api.telegram.org/bot{$token}/sendMessage?chat_id={$chat_id}&parse_mode=html&text={$txt}","r");
  4. круто! уверена, что такое оповещение будет становится все более востребованным, а интересно, можно ли и для viber аналогичную штуку реализовать?

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

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

    	$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

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

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

      $sourceFieldset = $data['source'],

      А так:

      $sourceFieldset => $data['source'],
  6. Ух, всего-то, спасибо. Запустил бота и чат, пока на телефоне проматывал страницу.

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

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

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

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

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

    Изначально спрашиваем, если не пустой 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 ?>
    1. Цикл был нужен мне, для более сложной формы, с отправкой в CRM, Telegram, на почту и еще кое для чего. Поэтому, остался и тут, чтобы легче было связать в будущем. Если отправлять данные только в Telegram, то действительно не нужен. Спасибо, за замечания и то, что поделились своим решением)))

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

  9. $txt = "New order: $order %0AName: $name %0APhone: $phone";   

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

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

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

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

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

    4. Отлично:)

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

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

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

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

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

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

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

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

    2. Дмитрий, А можно код пожалуйста, не могу сообразить

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

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

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

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

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

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

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

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

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

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

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

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

    1. Алекс, ecть решение Telsender
      Плагин дя wp

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

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

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

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

    2. Да, подключение должно быть только через https

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

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

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

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

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

    1. Можно. как уже пробовали? Что не получилось? Какая выскакивает ошибка?

  30. Я просто технически, не понимаю как эти файлы объединить в единое :(
    Пробовал подставлял и токен и сенд телеграм, ничего :(
    Сам сильно не шарю в этом, что то пробовал пытался, и ничего.

    1. Ответил в ВК

  31. Что нужно добавить, что бы передавать utm метки, ничего не получается, помогите пожалуйста! Заранее спасибо!

  32. Получается что сообщение предназначенное для конкретного человека, будут видеть все юзеры чата, как сделать чтобы бот писал конкретному человеку, а не в группу?

    1. Не принимать никого в группу, это группа только для вас и бота. Или можно добавить в нее тех, кто отвечает за прием заявок.

  33. Все отлично, но можно спамить постоянно нажимая на кнопку "Отправить". Нужно, что бы после нажатия кнопки форма закрывалась или хотя бы скидывались данные в формах.

    1. Статья не об этом же совсем.

  34. Здравствуйте! Это же все бесплатно ?

    1. Здравствуйте, конечно бесплатно)

  35. Здравствуйте, у меня возник конфликт между jquery, на сайте использую более старую версию, когда отключаю одну из них то работает либо анимация либо отправка в телеграмм следовательно. Подскажите пожалуйста как испраивть

    1. Точнее при подключении отправки в телеграмм к шаблону, то при нажатии на кнопку отправить про перезагружается страница и все. А если сделать это на отдельной тестовой странице, только с кодом телеграмма тогда все работает.

    2. Попробуйте такую конструкцию:

      (function ($) {
        // ваш код
      }(jQuery));
      
  36. Обернул как вы вы предложили, нечего не поменялось. Помогите пожалуйста с данной проблемой.
    Пример шаблона: __https://catalog-vleg.pp.ua/

    (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: '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;
        });
    
        $('.form-element').append('<p class="creator"><a href="https://smartlanding.biz">smartlanding.biz</a></p>');
    } (jQuery) ) ;
    
    1. Да я не знаю, собственно, чем помочь. Смотрите, у вас несколько раз подключается jQuery, такого быть не должно. Нельзя 2 и более раз подключать. Оставьте версию 2. Пробуйте обернуть свой код в конструкцию, которую прислал, пробуйте разные версии, должно заработать.

  37. Спасибо, разобрался. Просто нужно было в форму вставить action="send-message-to-telegram.php

  38. Добрый день! Помогите настроить на нашем сайте такую форму. Напишите в личку

  39. Как уже говорили лучше использовать file_get_contents. Вот проект в песочнице, можете попробовать и взять код кому надо. Если проверка на заполнение, отключение кнопки отправки и т.д. Отправка через Ajax сообщения в alert.
    https://codeanywhere.com/s/l/MGT6zLtJXml7NzZEsCF09yQa5Fe12Z7MQWctysZroG5BonjGe0EgkWtCvJRxSmC5

    1. Дал не правильную ссылку, только на html.
      Вот нормальная на html и php файлы
      https://codeanywhere.com/s/l/ISRi7tuVA2AO31jIfSymYdFClFLER7nZtg2I61IZsjNhVc5ttXDjmVxJlyrvCIwB

    2. Здравствуйте. Откройте пожалуйста доступ к проекту, интересно посмотреть код. Спасибо.

  40. Здравствуйте. Всё сделал по инструкции, но не работает. Телеграмм в моей стране не заблокирован. В чём может быть проблема или этот способ уже не рабочий?

    1. Здравствуйте. Способ рабочий, есть ли ошибки в консоли? используете ли ssl сертификат?

  41. Здравствуйте! Очень понравилась ваша статья. Но хотелось бы узнать, как можно добавить всплывающее окно, типа "спасибо за заявку"?

  42. А как на вордпресс сделать отправку в телеграмм с формы contact form 7?

  43. Привет.

    В групповом чате не работает команда «/join». Вообще не реагирует. В чём дело?

    Раньше работало.

  44. возникла проблема - вроде все норм а не приходит - решение

    было

    $sendToTelegram = fopen("https://api.telegram.org/bot{$token}/sendMessage?chat_id={$chat_id}&parse_mode=html&text={$txt}","r");

    стало
    $sendToTelegram = fopen("https://149.154.167.199/bot{$token}/sendMessage?chat_id={$chat_id}&parse_mode=html&text={$txt}","r");

    причина - блокировка по имени домена.. чтоб всему составу РосКомПозора за зарплатой через такие закидоны ходить..

    1. xgreyx,

      СПАСИБО!!!!!!!!!!

  45. А можно настроить бота так, чтобы отвечать на сообщение клиента можно было используя форму на самом сайте, без необходимости отвечать в телеграм клиенте?

    1. Это решение и не для того, чтобы отвечать клиенту в телеграм, вам приходит уведомление о заказе и все!

  46. Спам валит через эту форму!

    1. Это учебный пример, показывающий способ связать форму и телеграм... Делайте валидацию, ставьте каптчу. Статьи на блоге есть об этом.

  47. я через сервис делал _https://formfor.site/

  48. Ввожу данные в форму. Постоянно пишет. Ошибка. Сообщение не отправлено! не могу понять в чем проблема

    1. Владимир, jquery.min.js:4 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
      send @ jquery.min.js:4
      ajax @ jquery.min.js:4
      n._evalUrl @ jquery.min.js:4
      ua @ jquery.min.js:3
      append @ jquery.min.js:3
      (anonymous) @ jquery.min.js:3
      K @ jquery.min.js:2
      html @ jquery.min.js:3
      success @ telegramform.js:13
      i @ jquery.min.js:2
      fireWith @ jquery.min.js:2
      z @ jquery.min.js:4
      (anonymous) @ jquery.min.js:4
      XMLHttpRequest.send (async)
      send @ jquery.min.js:4
      ajax @ jquery.min.js:4
      (anonymous) @ telegramform.js:7
      dispatch @ jquery.min.js:3
      r.handle @ jquery.min.js:3 Вот такую ошибку бьет консоль

  49. Добрый вечер, читал вашу статью. Сделал все как у вас но в ответ пишет, что сайт не может обработать запрос. Нужна помощь, вроде бы все инпуты проставил но есть мысль что у меня в index.html что то не так. Делал форму не с нуля, а пытался подключить к уже готовой

  50. Добрый день!
    Добавил поле сообщение с тегом textarea, все отправляется и работает отлично. только когда в тексте пишу заглавные латинский текст (например HP LJ 5500) выдает ошибку failed to open stream: HTTP request failed!
    Подскажите как исправить?

    1. Аганин, и еще ошибка указывает на строку
      $sendToTelegram = fopen("https://api.telegram.org/bot{$token}/sendMessage?chat_id={$chat_id}&parse_mode=html&text={$txt}","r")

    2. Аганин, честно не в курсе даже, у меня пишет, что сообщение не отправлено, только если с "H" начинается сообщение в поле textarea. Например если писать так, то все ок "P LJ 5500" - бред какой-то. Пока не разобрался в чем причина.

      Если что-то "нароете", напишите пожалуйста.

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

 

© 2014 — 2020, Smartlanding.biz. Все права защищены. Любое использование материалов допускается только с указанием активной ссылки на источник. Политика конфиденциальности