И вот, наконец-то посидел и разобрался. Конечно постичь все тонкости API — не удалось, но по кусочкам насобирал информацию и удалось отправить данные из контактной формы в чат Telegram.
Как связать форму на сайте с Telegram
Итак, давайте приступим. Первое что нам нужно, это создать своего бота. Делается это достаточно просто. В поиске наберите @botfather, откройте родительского бота и нажмите «Start»:
Далее:
- Пишем команду /newbot, для создания нового бота.
- Придумываем имя бота.
- Придумываем ник бота.
Если все прошло успешно, то увидите поздравления и токен вашего бота, в моем случае это:
341996777:AAHbnuvQib-vHU47i-6hbUrCU9D-qHYekxc
Теперь нужно найти своего бота в поиске, указав его ник и нажать «Start», чтобы активировать его. В моем случае ник @DWS_MESSAGE_bot.
После этого, нужно создать групповой чат, в который будут приходить заявки и пригласить туда нашего бота. Давайте займемся этим.
Зайдите в меню, нажмите «New Group» и задайте имя вашему чату.
Не забываем пригласить своего бота в чат.
На данный момент у нас есть бот, мы знаем его токен, есть чат, в который будут приходить заявки, и нам осталось узнать только id чата. Для этого, напишем в чате:
- /join @ник_бота
А затем, в браузере введем:
https://api.telegram.org/botXXXXXXXXXXXXXXXXXXXXXXX/getUpdates,
где, XXXXXXXXXXXXXXXXXXXXXXX — токен вашего бота, полученный ранее.
Если все сделали правильно, то перед вами откроется подобная страница:
Нас интересует объект «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 канал. Уведомления об обновлениях на блоге, в первую очередь, приходят туда)
Алексей, спасибо, поправил.
не работает
Жалолиддин, у всех работает, ищите ошибку.
а капчу можно прикрутить ?
Илья, конечно можно. Статья о том, как добавить recaptcha
xgreyx,
СПАСИБО!!!!!!!!!!
Здравствуйте.
Столкнулся с проблемой. При отправке появляется сообщение, что все отправлено, но ничего не происходит. Пробовал и Ваш готовый шаблон, так и предоставленный код, в консоль не выводится никаких ошибок.
Тесты проходили на трех разных хостингах, везде одинаковый результат.
Хоть тг не заблокирован у меня в стране, по совету из комментариев, пытался заменить api.telegram.org на актуальный адрес 149.154.167.220.
Дмитрий, вы используете https же? PHP выше чем 7.0 версии? Пробовали включать вывод php-ошибок?
dimadv7, Прошу прощения, косяк был с моей стороны. Кстати, запустилось и с http, тоже
Дмитрий. Понял, но приходить сообщения не должны были с http, только с https.
dimadv7, но приходят :)
Странно, ну ок ))
Все работает. Спасибо вам огромное!
Это просто круто!
Подскажите, как сделать, чтобы номер телефона в телеграмме отображался кликабельной ссылкой?
Елена, возможно вы об этом говорите
dimadv7, нет. Мой вопрос связан с данной статьей. При передачи данных формы почему-то номер телефоны в Телеграм приходит без «+», соответственно в сообщении он не кликабелен, чтобы соверщить сразу же звонок. И мой вопрос в том, как заставить Телеграм передавать «+» перед номеров телефона. При этом в поле формы человек вводит «+».
Елена, попробуйте убрать strip_tags в обработчике формы. То есть тут:
И сделать так:
Как добавить прокси? без прокси отказывается работать
Делаю все также. Но почему-то выдает ошибку и не отправляет сообщение. Жалуется на 30 и 33 строку
В чем проблема?
Получил токен, создал группу, добавил бота, запустил его. При вводе в браузере строки https://api.telegram.org/bot1064142492:AAG3T5__8X-zrqYhfNaYZ20f2iBe3i7YpJs/getUpdates пишет Не удается получить доступ к сайту. Где может быть ошибка?
Сергей, может быть Роскомнадзор?
dimadv7, Да, это он разобрался уже. Теперь не получается реализовать возможность, чтобы бот присылал заявки в группу, пишет только сам. У бота написано написано что не может писать сообщения. Через бота отца не могу разобраться как включить этот функционал.