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

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Комментарии: 73

  1. dimadv7

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

    • Николай

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

    • dimadv7

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

  2. Михаил

    Круто.

  3. Михаил

    А можно ли как-то сделать, чтобы заявки одновременно уходили и в 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");
  4. Лариса

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

    • dimadv7

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

  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

    • dimadv7

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

    • dimadv7

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

      $sourceFieldset = $data['source'],

      А так:

      $sourceFieldset => $data['source'],
  6. iarts

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

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

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

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

  7. iarts

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

  8. 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 ?>
    • dimadv7

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

    • Александр

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

  9. iarts

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

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

  10. Александр

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

    • dimadv7

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

    • Александр

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

    • Александр

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

    • Дмитрий

      Отлично:)

  11. Александр

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

    • Александр

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

  12. Михаил

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

  13. Илья

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

  14. Михаил

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

    • Дмитрий

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

  15. Максим

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

    • Дмитрий

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

  16. Михаил

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

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

  17. Михаил

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

    • dimadv7

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

  18. Александр

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

  19. Александр

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

    • Александр

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

    • Александр

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

  20. Станислав

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

  21. site_maker

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

    • dimadv7

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

  22. Кирилл

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

  23. Noob

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

    • Алексей

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

  24. ed77

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

    • Алексей

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

    • dimadv7

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

  25. Алекс

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

  26. alaski

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

  27. Алексей

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

  28. 4ezare

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

  29. SH4B1N.PW

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

    • dimadv7

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

  30. SH4B1N.PW

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

    • dimadv7

      Ответил в ВК

  31. Александр

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

  32. Роман

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

    • dimadv7

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

  33. Test

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

    • dimadv7

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

  34. Михаил

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

    • dimadv7

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

  35. Егор

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

    • Егор

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

    • dimadv7

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

      (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="http://smartlanding.biz">smartlanding.biz</a></p>');
    } (jQuery) ) ;
    
    • dimadv7

      Да я не знаю, собственно, чем помочь. Смотрите, у вас несколько раз подключается jQuery, такого быть не должно. Нельзя 2 и более раз подключать. Оставьте версию 2. Пробуйте обернуть свой код в конструкцию, которую прислал, пробуйте разные версии, должно заработать.

  37. Егор

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

  38. Виктор

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

  39. Hetop

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

  40. Марат

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

    • dimadv7

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

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