Как связать форму на сайте с 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ывайтесь на обновления!

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

  1. 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

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