Всем - привет. Давно зрела идея разобраться с отправкой данных из формы на сайте в мессенджер Telegram, но руки не доходили, а моментально получать заявки прямо в телефон, ой как хотелось!
И вот, наконец-то посидел и разобрался. Конечно постичь все тонкости 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 канал. Уведомления об обновлениях на блоге, в первую очередь, приходят туда)
173 комментария
Здравствуйте, а не подскажите, если делать бота не для себя, при этом доступа к телефону нет. Я могу обяснить как реализовать, но будет ли это легко для этого человека не знаю. Или я могу создать бота и чат у себя, и человеку нужно будет только добавить чат у себя?
Здравствуйте, скиньте статью ему)) А вообще да, попытайтесь объяснить, чтобы он вам переслал просто нужные данные. Или, возможно, вы и человека потом сделаете администратором группового чата.
Как сделать что бы форма закрывалась после успешной отправки?
Вадим, в смысле как? А как вы уже пробовали? Что делали? Какие возникли сложности? Какие ошибки появились?
спасибо, каждый раз открываю, смотрю
Добрый день.
приходит номер телефона без "+"
вопрос уже был выше, но никто не ответил.
Как решить?
Роман, на следующей неделе попробую решить вопрос и добавить в статью то, как это делается.
dimadv7, Спасибо
По поводу "+", просто в разметке pattern у поля с телефоном уберите. То есть вместо:
Сделайте:
Честно сказать не понял как реализовать если у меня уже есть обработчик, который отправляет заявки в amocrm. Как добавить что бы отправлял и в телеграмм одновременно?
Я копировал просто со страницы весь код, и там ошибка.
js файл
$("form-element").submit(function () {надо поставить точку
$(".form-element").submit(function () {Алексей, спасибо, поправил.
не работает
Жалолиддин, у всех работает, ищите ошибку.
а капчу можно прикрутить ?
Илья, конечно можно. Статья о том, как добавить recaptcha
Здравствуйте.
Столкнулся с проблемой. При отправке появляется сообщение, что все отправлено, но ничего не происходит. Пробовал и Ваш готовый шаблон, так и предоставленный код, в консоль не выводится никаких ошибок.
Тесты проходили на трех разных хостингах, везде одинаковый результат.
Хоть тг не заблокирован у меня в стране, по совету из комментариев, пытался заменить api.telegram.org на актуальный адрес 149.154.167.220.
Дмитрий, вы используете https же? PHP выше чем 7.0 версии? Пробовали включать вывод php-ошибок?
dimadv7, Прошу прощения, косяк был с моей стороны. Кстати, запустилось и с http, тоже
Дмитрий. Понял, но приходить сообщения не должны были с http, только с https.
dimadv7, но приходят :)
Странно, ну ок ))
Все работает. Спасибо вам огромное!
Это просто круто!
Подскажите, как сделать, чтобы номер телефона в телеграмме отображался кликабельной ссылкой?
Елена, возможно вы об этом говорите
dimadv7, нет. Мой вопрос связан с данной статьей. При передачи данных формы почему-то номер телефоны в Телеграм приходит без "+", соответственно в сообщении он не кликабелен, чтобы соверщить сразу же звонок. И мой вопрос в том, как заставить Телеграм передавать "+" перед номеров телефона. При этом в поле формы человек вводит "+".
Елена, попробуйте убрать strip_tags в обработчике формы. То есть тут:
И сделать так:
dimadv7, как еще можно починить это? Не работает убираение strip_tags
Как добавить прокси? без прокси отказывается работать
Делаю все также. Но почему-то выдает ошибку и не отправляет сообщение. Жалуется на 30 и 33 строку
В чем проблема?
Получил токен, создал группу, добавил бота, запустил его. При вводе в браузере строки https://api.telegram.org/bot1064142492:AAG3T5__8X-zrqYhfNaYZ20f2iBe3i7YpJs/getUpdates пишет Не удается получить доступ к сайту. Где может быть ошибка?
Сергей, может быть Роскомнадзор?
dimadv7, Да, это он разобрался уже. Теперь не получается реализовать возможность, чтобы бот присылал заявки в группу, пишет только сам. У бота написано написано что не может писать сообщения. Через бота отца не могу разобраться как включить этот функционал.
Здравствуйте.
А подскажите, как быть с ошибкой:
Warning: fopen(https://api.telegram.org/bot...
...: failed to open stream: HTTP request failed! HTTP/1.1 400 Bad Request in...
На почту приходит, а в телеграм - нет.
iluha, у сайта есть ssl сертификат? через https или http запрос идет?
dimadv7,
да, ssl и https.
iluha, вы изменяли код в исходнике?
dimadv7,
фуф, разобрался.
Этот телеграм-бот не принимает хтмл разметку.
Убрал все символы "<", , и т.д. и всё заработало.
Всем спасибо.
У меня все работает кроме одного когда сообщение отправляется мне приходит не только спасибо за отправку но ещё и это
Notice: Undefined variable: txt in C:\xampp\htdocs\sendToTelegram\telegramform\php\send-message-to-telegram.php on line 32
Спасибо за отправку вашего сообщения!
Если что я работаю на локалхосте но все же какого ЧЕРТА? он не может определить переменную
Рустам, нужно отключать вывод ошибок и предупреждений в php на продакшине. Это, как минимум, не безопасно. Предупреждении говорит о том, что вы, скорее всего, пытаетесь объявить переменную налету. PHP - позволяет это делать, но мы пытаемся сразу к ней обратиться, и, все, в целом, работает, но с предупреждением. Если хотите просто от предупреждения избавиться, то нужно заранее объявить переменную. Если предупреждение вам, в целом, не мешает, то скорее всего включен вывод предупреждений в php, - отключите, и это сообщение не будет появляться. Думаю, как-то так.
вылазит ошибка not found в чем причина?
Антон, в том, что файл не найден и нужно правильно прописать пути. Открой консоль, посмотри что за файл и в каком месте.
Здравствуйте. А есть какая-нибудь возможность дублировать сообщение еще на электронный ящик? Скажем пользователь отправил письмо, оно пришло в телеграмм и продублировалось на почту. В телеграме гораздо удобнее принимать и обрабатывать письма, однако, кто его знает что там еще Роскомнадзор придумает, в случае блокировок телеграмма не хочется терять заявки, и хорошо бы что бы они были продублированы на почту
Юрий, конечно. На блоге около 4 статей, как сделать обычную форму обратной связи с отправкой на почту, например, вот
dimadv7, а не подскажите в какую сторону копать чтобы сообщение одновременно и на почту и в телеграм приходило? два обработчика каким-то образом на форму вешать, или в один обработчик оба скрипта добавить?
Юрий, конечно 1 обработчик, просто все отправляете на почту, а потом, по этой статье, дополняете код и отправляете в телеграм.
Приветствую. Спасибо за работу, а как реализовать страницу благодарности? Спс
Виктор, здравствуйте. Посмотрите как реализовано тут.
Добрый день, форма отличная. Спасибо огромное. Но вот у меня вопрос. У меня на сайте несколько одинаковых форм, но почему то данный метод не хочет работать, он работает только когда одна форма, или я не туда что то вставил. Т.е отправляет данные в телеграм когда включена одна форма, когда же вставляю в код в разных местах эту форму, то вообще ничего не происходит. Как быть ?
Ярослав, здравствуйте. А id у форм разный?
Здравствуйте, Дмитрий!
Подскажите, пожалуйста:
У меня несколько сайтов:
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
Павел, попробуйте сделать проверку, если сообщение ушло, то тогда из статьи код добавьте, отправляющий в телеграм да и все. Думаю этого достаточно. Ну и вместо полей с именем, телефоном, можно просто сообщение любое вписать.
ипать пацан ты бизнесмен
Здравствуйте, вы мне действительно помогли, но как убрать у номера телефона ограничение по цифрам, я не использую это поле как "номер" а по-другому, мне пишет при вводе букв:"Введите данные в указаном формате", "strip_tags" Убрал не помогает, подскажите пожалуйста
Иван, здравствуйте. Убрать еще нужно у поля:
в html
Добрый день,подскажите, как сделать что бы "send-message-to-telegram.php" срабатывал при переходе на thank you
Sergey, разместить весь код на странице thank you и прописать эту страницу в action формы
Добрый день !
Выдает ошибки и не отправляет ничего
.....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
Добрый день, все работает! Большое спасибо) Есть есть один вопрос: как сделать так чтобы с сообщением передавались utm-метки?
Николай, здравствуйте. Можно создать скрытое поле и в него помещать данные из:
Или любых других параметров.
Здравствуйте!
Подскажите как создать форму чтоб уходил запрос на 2 обработчика?
Пример:
данные...
ресурсы у меня такие:
-свой файл обработчик данных
-телеграм уведомление
Каким образом мне сделать два обработчика action ?
Спасибо!
Alex, здравствуйте. Делайте 1 обработчик. Сначала отправляйте, например, на почту, а потом в телеграм. Зачем усложнять? В любом случае action только 1 можно задать. А дальше уже в PHP.
Добрый день, можете показать что добавить в index.html, а что в send-message-to-telegram.php для передачи utm-меток. Заранее спасибо
Николай, в статье же написано, что и куда. Разметка в index.html конечно-же. Так как html - это язык разметки. А остальное что и куда подписано же...
Здравствуйте, статья невероятно полезная, но у меня вопрос. У меня сайт сделан на конструкторе wix, как туда перенести сие детище?
Учитывая, что wix не поддерживает php
Дмитрий, такой вопрос. А как можно сделать, чтобы именно сообщения с телеграмм бота шли в форму сайта?
Артём, без понятия. Никогда не сталкивался с такой задачей. Да и не могу представить ситуацию, в которой это может понадобиться.
Дмитрий, у меня есть сайт. Нужно чтобы входящие данные в телеграмм боте приходили на сайт и автоматически отправляли на почту данные
Артем, так а зачем их возвращать в форму на сайте? Нужно же бота заставить отправлять письма, а не внедрять их назад в форму на сайте. Но, в любом случае, я не сталкивался с такой задачей да и с ботами не работал.
после нажатия отправить происходит загрузка страницы и выкидывает ошибку:
Symfony \ Component \ HttpKernel \ Exception \ MethodNotAllowedHttpException
The POST method is not supported for this route. Supported methods: GET, HEAD.
Vlad, ну написано же, что не поддерживает роут метод POST...
Сменил метод POST на PATCH, ошибка исчезла теперь, но страница просто обновляется, а в телегу заявка не приходит, токен и ид 1000 раз перепроверил что правильные ввёл
здравствуйте. приходят пустые поля. куда копать?
Денис, у полей пзначения параметра name, должны совпадать с теми, что в обработчике принимаете.
Здравствуте Дмитрий как отослать вместе с и инпутами и url сайта
zet, здравствуйте. Создать скрытое поле, дав ему type="hidden", затем в js при помощи window.location.href получить url и поместить его в значение value скрытого поля. Далее, по аналогии с полем для ввода имени обработать его в php.
Спасибо Дмитрий за ответ но как мне поместить URL в скрытое поле
zet, если используете jquery, то например так:
$('.class-name').val(window.location.href);Вот, сделал небольшую статью на эту тему)
ОГромная благодарность ты человечище!!!!
zet, ах-ха. Спасибо) Будут вопросы, пиши)