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

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

  1. 18/04/2019 at 9:34

    Здравствуйте, а не подскажите, если делать бота не для себя, при этом доступа к телефону нет. Я могу обяснить как реализовать, но будет ли это легко для этого человека не знаю. Или я могу создать бота и чат у себя, и человеку нужно будет только добавить чат у себя?

    Ответить
    1. 18/04/2019 at 9:56

      Здравствуйте, скиньте статью ему)) А вообще да, попытайтесь объяснить, чтобы он вам переслал просто нужные данные. Или, возможно, вы и человека потом сделаете администратором группового чата.

  2. 16/05/2019 at 12:30

    Как сделать что бы форма закрывалась после успешной отправки?

    Ответить
    1. 16/05/2019 at 16:02

      Вадим, в смысле как? А как вы уже пробовали? Что делали? Какие возникли сложности? Какие ошибки появились?

  3. 30/05/2019 at 7:47

    спасибо, каждый раз открываю, смотрю

    Ответить
  4. 29/06/2019 at 4:41

    Добрый день.
    приходит номер телефона без "+"
    вопрос уже был выше, но никто не ответил.
    Как решить?

    Ответить
    1. 29/06/2019 at 10:55

      Роман, на следующей неделе попробую решить вопрос и добавить в статью то, как это делается.

  5. 29/06/2019 at 17:24

    dimadv7, Спасибо

    Ответить
    1. 01/07/2019 at 15:48

      По поводу "+", просто в разметке pattern у поля с телефоном уберите. То есть вместо:

      <input name="phone" type="tel" class="form-input__phone" tabindex="0" pattern="^[ 0-9]+$" placeholder="Введите ваш телефон" required>

      Сделайте:

      <input name="phone" type="tel" class="form-input__phone" tabindex="0" placeholder="Введите ваш телефон" required>
  6. 04/07/2019 at 12:39

    Честно сказать не понял как реализовать если у меня уже есть обработчик, который отправляет заявки в amocrm. Как добавить что бы отправлял и в телеграмм одновременно?

    Ответить
  7. 11/07/2019 at 16:22

    Я копировал просто со страницы весь код, и там ошибка.
    js файл

     $("form-element").submit(function () {

    надо поставить точку

     $(".form-element").submit(function () {
    Ответить
    1. 11/07/2019 at 18:17

      Алексей, спасибо, поправил.

  8. 19/08/2019 at 8:13

    не работает

    Ответить
    1. 19/08/2019 at 9:05

      Жалолиддин, у всех работает, ищите ошибку.

  9. 21/08/2019 at 23:05

    а капчу можно прикрутить ?

    Ответить
    1. 22/08/2019 at 5:57

      Илья, конечно можно. Статья о том, как добавить recaptcha

  10. 29/09/2019 at 9:29

    Здравствуйте.
    Столкнулся с проблемой. При отправке появляется сообщение, что все отправлено, но ничего не происходит. Пробовал и Ваш готовый шаблон, так и предоставленный код, в консоль не выводится никаких ошибок.
    Тесты проходили на трех разных хостингах, везде одинаковый результат.
    Хоть тг не заблокирован у меня в стране, по совету из комментариев, пытался заменить api.telegram.org на актуальный адрес 149.154.167.220.

    Ответить
    1. 30/09/2019 at 4:11

      Дмитрий, вы используете https же? PHP выше чем 7.0 версии? Пробовали включать вывод php-ошибок?

    2. 30/09/2019 at 5:28

      dimadv7, Прошу прощения, косяк был с моей стороны. Кстати, запустилось и с http, тоже

    3. 30/09/2019 at 5:42

      Дмитрий. Понял, но приходить сообщения не должны были с http, только с https.

    4. 30/09/2019 at 5:47

      dimadv7, но приходят :)

    5. 30/09/2019 at 7:30

      Странно, ну ок ))

  11. 27/10/2019 at 9:33

    Все работает. Спасибо вам огромное!
    Это просто круто!

    Ответить
  12. 07/11/2019 at 7:37

    Подскажите, как сделать, чтобы номер телефона в телеграмме отображался кликабельной ссылкой?

    Ответить
    1. 07/11/2019 at 10:43

      Елена, возможно вы об этом говорите

    2. 08/11/2019 at 9:20

      dimadv7, нет. Мой вопрос связан с данной статьей. При передачи данных формы почему-то номер телефоны в Телеграм приходит без "+", соответственно в сообщении он не кликабелен, чтобы соверщить сразу же звонок. И мой вопрос в том, как заставить Телеграм передавать "+" перед номеров телефона. При этом в поле формы человек вводит "+".

    3. 08/11/2019 at 17:22

      Елена, попробуйте убрать strip_tags в обработчике формы. То есть тут:

      $phone = strip_tags($_POST['phone']);

      И сделать так: 

      $phone = $_POST['phone'];
    4. 13/03/2020 at 12:43

      dimadv7, как еще можно починить это? Не работает убираение strip_tags

  13. 13/11/2019 at 5:44

    Как добавить прокси? без прокси отказывается работать

    Ответить
  14. 22/11/2019 at 20:39

    Делаю все также. Но почему-то выдает ошибку и не отправляет сообщение. Жалуется на 30 и 33 строку
    В чем проблема?

    Ответить
  15. 24/11/2019 at 15:49

    Получил токен, создал группу, добавил бота, запустил его. При вводе в браузере строки https://api.telegram.org/bot1064142492:AAG3T5__8X-zrqYhfNaYZ20f2iBe3i7YpJs/getUpdates пишет Не удается получить доступ к сайту. Где может быть ошибка?

    Ответить
    1. 25/11/2019 at 6:39

      Сергей, может быть Роскомнадзор?

    2. 25/11/2019 at 7:54

      dimadv7, Да, это он разобрался уже. Теперь не получается реализовать возможность, чтобы бот присылал заявки в группу, пишет только сам. У бота написано написано что не может писать сообщения. Через бота отца не могу разобраться как включить этот функционал.

  16. 26/12/2019 at 7:14

    Здравствуйте.
    А подскажите, как быть с ошибкой:

    Warning: fopen(https://api.telegram.org/bot...
    ...: failed to open stream: HTTP request failed! HTTP/1.1 400 Bad Request in...

    На почту приходит, а в телеграм - нет.

    Ответить
    1. 27/12/2019 at 5:51

      iluha, у сайта есть ssl сертификат? через https или http запрос идет?

    2. 27/12/2019 at 7:23

      dimadv7,
      да, ssl и https.

    3. 27/12/2019 at 15:51

      iluha, вы изменяли код в исходнике?

    4. 28/12/2019 at 6:25

      dimadv7,
      фуф, разобрался.
      Этот телеграм-бот не принимает хтмл разметку.
      Убрал все символы "<", , и т.д. и всё заработало.

      Всем спасибо.

  17. 03/01/2020 at 15:48

    У меня все работает кроме одного когда сообщение отправляется мне приходит не только спасибо за отправку но ещё и это
    Notice: Undefined variable: txt in C:\xampp\htdocs\sendToTelegram\telegramform\php\send-message-to-telegram.php on line 32
    Спасибо за отправку вашего сообщения!

    Если что я работаю на локалхосте но все же какого ЧЕРТА? он не может определить переменную

    Ответить
    1. 04/01/2020 at 6:06

      Рустам, нужно отключать вывод ошибок и предупреждений в php на продакшине. Это, как минимум, не безопасно. Предупреждении говорит о том, что вы, скорее всего, пытаетесь объявить переменную налету. PHP - позволяет это делать, но мы пытаемся сразу к ней обратиться, и, все, в целом, работает, но с предупреждением. Если хотите просто от предупреждения избавиться, то нужно заранее объявить переменную. Если предупреждение вам, в целом, не мешает, то скорее всего включен вывод предупреждений в php, - отключите, и это сообщение не будет появляться. Думаю, как-то так.

  18. 29/01/2020 at 16:22

    вылазит ошибка not found в чем причина?

    Ответить
    1. 29/01/2020 at 17:41

      Антон, в том, что файл не найден и нужно правильно прописать пути. Открой консоль, посмотри что за файл и в каком месте.

  19. 22/02/2020 at 21:09

    Здравствуйте. А есть какая-нибудь возможность дублировать сообщение еще на электронный ящик? Скажем пользователь отправил письмо, оно пришло в телеграмм и продублировалось на почту. В телеграме гораздо удобнее принимать и обрабатывать письма, однако, кто его знает что там еще Роскомнадзор придумает, в случае блокировок телеграмма не хочется терять заявки, и хорошо бы что бы они были продублированы на почту

    Ответить
    1. 23/02/2020 at 2:20

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

    2. 23/02/2020 at 10:01

      dimadv7, а не подскажите в какую сторону копать чтобы сообщение одновременно и на почту и в телеграм приходило? два обработчика каким-то образом на форму вешать, или в один обработчик оба скрипта добавить?

    3. 23/02/2020 at 17:50

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

  20. 10/04/2020 at 16:57

    Приветствую. Спасибо за работу, а как реализовать страницу благодарности? Спс

    Ответить
    1. 12/04/2020 at 6:06

      Виктор, здравствуйте. Посмотрите как реализовано тут.

  21. 26/04/2020 at 16:21

    Добрый день, форма отличная. Спасибо огромное. Но вот у меня вопрос. У меня на сайте несколько одинаковых форм, но почему то данный метод не хочет работать, он работает только когда одна форма, или я не туда что то вставил. Т.е отправляет данные в телеграм когда включена одна форма, когда же вставляю в код в разных местах эту форму, то вообще ничего не происходит. Как быть ?

    Ответить
    1. 29/04/2020 at 17:32

      Ярослав, здравствуйте. А id у форм разный?

  22. 05/05/2020 at 8:17

    Здравствуйте, Дмитрий!
    Подскажите, пожалуйста:
    У меня несколько сайтов:
    1 сайт: мой-сайт-crm.ru - на нем стоит SuiteCRM (бесплатный аналог Sugar)
    и много мелких сайтов-лендингов с формами.
    Формы формируются в CRM и на сайтах -лендингах нужно вставить вот этот код, который ниже.
    Это всё работает хорошо.
    Мне нужно, чтобы с сайтов-лендингов, после нажатия кнопки Submit, сайт-лендинг еще и отправлял сообщение в Telegram. Сообщение короткое: "Заявка с сайта". И всё. Этого достаточно.
    Как установить и настроить это всё из статьи понятно.
    Но как связать мою форму с отправкой в Telegram?
    Подскажи, пожалуйста.

    <!-- TODO ???

    -->

    Имя:

    Фамилия: *

    Тел. (моб.) :

    // <![CDATA[
    function submit_form() {
    if (typeof(validateCaptchaAndSubmit) != 'undefined') {
    validateCaptchaAndSubmit();
    } else {
    check_webtolead_fields();
    //document.WebToLeadForm.submit();
    }
    }

    function check_webtolead_fields() {
    if (document.getElementById('bool_id') != null) {
    var reqs = document.getElementById('bool_id').value;
    bools = reqs.substring(0, reqs.lastIndexOf(';'));
    var bool_fields = new Array();
    var bool_fields = bools.split(';');
    nbr_fields = bool_fields.length;
    for (var i = 0; i

    Ответить
    1. 06/05/2020 at 6:23

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

  23. 07/05/2020 at 7:30

    ипать пацан ты бизнесмен

    Ответить
  24. 10/05/2020 at 10:09

    Здравствуйте, вы мне действительно помогли, но как убрать у номера телефона ограничение по цифрам, я не использую это поле как "номер" а по-другому, мне пишет при вводе букв:"Введите данные в указаном формате", "strip_tags" Убрал не помогает, подскажите пожалуйста

    Ответить
    1. 16/05/2020 at 5:56

      Иван, здравствуйте. Убрать еще нужно у поля: 

      pattern="^[ 0-9]+$"

      в html

  25. 12/05/2020 at 14:37

    Добрый день,подскажите, как сделать что бы "send-message-to-telegram.php" срабатывал при переходе на thank you

    Ответить
    1. 16/05/2020 at 5:49

      Sergey, разместить весь код на странице thank you и прописать эту страницу в action формы

  26. 29/05/2020 at 7:37

    Добрый день !
    Выдает ошибки и не отправляет ничего
    .....PHP Warning: fopen(): SSL: Connection reset by peer in
    .....PHP Warning: fopen(): Failed to enable crypto in
    PHP Warning: fopen(https://api.telegram.org/botXXXXXXXX/sendMessage?chat_id=XXXXX&parse_mode=html&text=<b>Кто оставил заявку: </b> ): failed to open stream: operation failed in

    Ответить
  27. 15/06/2020 at 18:00

    Добрый день, все работает! Большое спасибо) Есть есть один вопрос: как сделать так чтобы с сообщением передавались utm-метки?

    Ответить
    1. 15/06/2020 at 19:15

      Николай, здравствуйте. Можно создать скрытое поле и в него помещать данные из:

      isset($_GET['utm_term']);

      Или любых других параметров.

  28. 19/06/2020 at 18:33

    Здравствуйте!
    Подскажите как создать форму чтоб уходил запрос на 2 обработчика?
    Пример:

    данные...

    ресурсы у меня такие:
    -свой файл обработчик данных
    -телеграм уведомление
    Каким образом мне сделать два обработчика action ?

    Спасибо!

    Ответить
    1. 20/06/2020 at 6:29

      Alex, здравствуйте. Делайте 1 обработчик. Сначала отправляйте, например, на почту, а потом в телеграм. Зачем усложнять? В любом случае action только 1 можно задать. А дальше уже в PHP.

  29. 04/07/2020 at 13:21

    Добрый день, можете показать что добавить в index.html, а что в send-message-to-telegram.php для передачи utm-меток. Заранее спасибо

    Ответить
    1. 05/07/2020 at 4:25

      Николай, в статье же написано, что и куда. Разметка в index.html конечно-же. Так как html - это язык разметки. А остальное что и куда подписано же...

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

 

Smartlanding / Верстка /

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