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

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

  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

  23. Noob

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

  24. BarbaraGeale

    Кредитные Карты Безработным — Кредитные Карты В Москве Быстро

    ————————————

    Перейдите ниже по ссылкам, чтобы получить кредит:

    http://bestsky.info/redir.html

  25. ed77

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

  26. BarbaraGeale

    Рассчитать Е-ОСАГО В «Согаз» -осаго-онлайн.su

    ————————————
    Выпускались также мелкие монеты довоенного образца, но только цинковые и железные. При выдаче кредитов в магазинах заемщик может воспользоваться деньгами банка только на определенную цель — оплату выбранного товара, зато другие кредиты можно потратить по своему усмотрению. Чаще всего, когда заемщик не выходит на связь с банком долгое время, на то есть веские причины. При этом суммы выданных авансов и предварительной оплаты учитываются обособленно. При оформлении ОСАГО через Всемирную паутину происходит проверка КМБ (скидка за безаварийный год). По ее мнению, пока ИИС не обладает потенциально высоким спросом, поэтому расходы на создание инфраструктуры для запуска этого финансового инструмента вряд ли окупятся. Пользоваться онлайн-личным кабинетом Тинькофф могут только обладатели карт банка. ВНИМАНИЕ: Более подробно с тарифами и условиями обслуживания счетов можно ознакомится на официальном сайте банка. Что касается тарификации опций, то с нею можно ознакомиться на официальном сайте того или иного оператора связи, там вы найдете всегда актуальные тарифы. Перед тем как осуществить вход в данную опцию, необходимо пройти авторизацию на официальном сайте компании. Что обозначает в бухгалтерии дебет, я что кредит? Буду обращаться значит в другой банк для того чтобы перекрыть остаток долга и оплачивать кредит меньшими платежами. Есть сумма. Что взять?

    Перейдите ниже по ссылке, чтобы получить кредит:

    http://kredit.bestsky.info/

  27. BarbaraGeale

    Польский Злотый. Бумажные Купюры

    ————————————
    Если этого не происходит, то следующим шагом является обращение в суд и подача иска (образец можно найти на нашем сайте). По той же причине не получится и взять экспресс-кредит онлайн. Погасить один из кредитов-170000, который я брал под 20% и получить наличные 550000. Решил узнать условия кредита-23.5% плюс финансовая защита 90000, итого 260000 нужно отдать банку. Это дешевле, чем два разных пакета, и удобнее, чем переставлять симку. Это значит, что чипсет в нем 4-х ядерный, а 2 ядра принадлежат графическому ускорителю, отвечающему за воспроизведение видео. Обязательным условием при подаче заявки является указание 2-х стационарных номеров телефона, один из которых должен быть рабочим. CHF. Таким образом, сколько стоит 5500 злотых в франках? Просто приведу примерный график платежей. Однако ипотечное жилищное кредитование в России до сих пор не получило массового развития, что обусловлено его высокими рисками и низкой платежеспособностью основных слоев населения. Рекомендуем обратиться сразу в несколько банков для увеличения вероятности одобрения денег. Запрос баланса не является в большинстве своем бесплатной операцией. Все очень просто: так видят мир американцы.|Конвертер » Грамотным » вазелина Ренессанс Кредит от 24 месяцев до 60 месяцев; Задержка кредита: рубль; Таджикская сумма кредита: от 30 ?; Гуморальная сумма Сателлит «Наличными». На данной странице представлена актуальная информация об адресах и телефонах филиалов и отделений и режиму работы (часы работы) офисов банка Ренессанс Кредит в Томске. На первую я получаю зп а вторая карта просто не нужна. Конечно, специалисты финансового учреждения Ренессанс Кредит, принимая решение о выдаче кредитной карты на имя заёмщика, предъявляют по отношению к нему требования некоторого характера. Т.е. привязаться к ЗЗПП и подать иск в Москве, где можно сослаться на решение коллегии Мосгорсуда о применимости ЗЗПП к ОСАГО. Основной из них является ОСАГО. Т.е. к деньгам, которых у вам фактически нет, но вы можете в рамках своего кредитного лимита мгновенно ими воспользоваться при покупке товара и даже снятие денег в банкомате. Рекомендуем вам указывать данные из предыдущего полиса, ведь они будут проверяться по базе РСА (Российского союза страховщиков).

    Перейдите ниже по ссылке, чтобы получить кредит:

    http://kredit.bestsky.info/

  28. BarbaraGeale

    Тарифы МТС Без Абонентской Платы. Выгодные Тарифы МТС

    ————————————
    Какие страховые компании оформляют ОСАГО онлайн? При продлении страховки ОСАГО в Росгосстрах сотрудники компании, ссылаясь на недоступность базы РСА ставят коэффициент Кбм равный 1 и класс 3, тем самым вводя в заблуждение. Можно сделать вывод, год ОСАГО предлагает, альтернативным вариантом становится направление, утвержденных Центробанком) транспортным средством? Немалое влияние на рост отрасли оказал Закон об обязательном страховании автогражданской ответственности (далее ОСАГО). Извините, но это так. А ещё мы считаем, что очень важно не только предоставить быстрый кредит, но и помочь добрым профессиональным советом, как правильно и с умом его потратить. А теперь скажите дети хочет Тиньков терять деньги? На реверсе всех южнокорейских монет написан номинал, название эмиссионного банка – Банк Кореи – и год. Банк дает заемщику право выбора количества предоставляемых документов. К тому же у вас имеется красивая возможность сэкономить на скоростном выходе в интернет и произвести удачную активацию данной опции. Но если же у человека нет желания звонить по телефону, или же ему удобнее воспользоваться своим персональным компьютером, подключенным к интернету, достаточно зайти в свой личный кабинет, который доступен в интернет-банке.

    Перейдите ниже по ссылке, чтобы получить кредит:

    http://kredit.bestsky.info/

  29. Алекс

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

  30. BarbaraGeale

    Сочи Википедия — Википедия Карта Сочи — Информация Из Википедии На Карте

    ————————————
    Кредитные карты же для многих людей вообще до сих пор остаются неизвестным куском пластика, с которым связывают были и небылицы. Я уже писала о Банках, самый рейтинговый отзыв оказался о «Тинькофф Кредитные Системы (ТКС)» Чаще и чаще у людей появляются претензии к Банкам, это печально, но в основном — по вине самих заемщиков. Это довольно дорогой вариант, но для тех, кто пользуется интернетом редко, вполне сойдет. Это уже на выбор клиента. Это могут быть государственные или админ. В этом же году возобновилась чеканка польских монет Варшавским монетным двором. Кредитный лимит зависит от платежеспособности потенциального заемщика, его кредитной истории и типа полученной карты. Потенциальный заемщик заходит в интернет, открывает сайт кредитной организации и там, очутившись на нужной странице, заполняет представленную форму. Самое интересное то, что оплачивать через терминалы Сбербанка счет за детский сайт не вызывает затруднений. Нелишним будет зайти на сайт страховой компании с сайта РСА – Российского Союза Автостраховщиков. Золотая Корона – удобный и современный способ перевести средства в любую точу России, стран СНГ и некоторые страны мира.

    Перейдите ниже по ссылке, чтобы получить кредит:

    http://kredit.bestsky.info/

  31. DarinaSa

    Когда создавала сайт, почти не предполагала, станет он популярным или нет. На нем я реализовывала себя – это было основным. Мой сайт предполагает в основном женскую аудиторию, в рунете таких тысячи. Магазин молодежной одежды – конкурентная, распространенная среда. В начале я была горела слепым оптимизмом, создавала сайт особенным, красивым, уникальным. Мне все казалось легко. Но, посещалка практически ноль, какой-либо доход, естественно, тоже. Парень отыскал специалистов, которые раскрутят мое творение. Сомневалась.

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

    Обратилась к ним http://prodvizheniya.net . Меня порадовал простой интерфейс этого сайта. Здесь же обнаружила ответы на все очевидные для меня вопросы. Грамотная консультация простым языком, разъяснение до мелочей. Я заказала тариф «статейный», он самый лучший. Супер-результат за минимальное время! Если Вы хотите заказать продвижение сайта ссылками – обращайтесь сюда, не разочаруетесь. Да, и еще, была акция — приятная скидка. Цены адекватные, а главное, честные. Компетентные, отличные специалисты, свой подход. Обратят внимание на особенность именно Вашего сайта, повысят его интерес, привлекут клиентов. В моем случае, заработок зависит от посещаемости. Так что, эти ребята — гарантия моего бизнеса в сети.

  32. alaski

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

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