Всем - привет. Давно зрела идея разобраться с отправкой данных из формы на сайте в мессенджер Telegram, но руки не доходили, а моментально получать заявки прямо в телефон, ой как хотелось!
И вот, наконец-то посидел и разобрался. Конечно постичь все тонкости API - не удалось, но по кусочкам насобирал информацию и удалось отправить данные из контактной формы в чат Telegram.
Это актуализированная статья, в которой решены такие проблемы, как отправка файла и пропадающий символ «+», который не приходил в сообщение и из-за этого номер телефона был некликабельным.
Важно: для отправки файла из формы в Телеграм на вашем сервере должен быть включен cURL. Обратитесь к техподдержке вашего хостинга, они подскажут что делать и как включить. У многих он включен по умолчанию. Например, на моем хостинге Beget - так.
Как связать форму на сайте с 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-обработчика нашей формы, и сделаем разметку самой формы.
Разметка формы
Не стал выдумывать что-то сверхсложное, а просто 2 поля и возможность прикрепить файл. Оставил телефон, ведь у многих возникала проблема с символом "+", а файл добавил, так как меня просили разобраться с этой темой.
<form id="form-contact" method="POST" class="contact-form" autocomplete="off" enctype="multipart/form-data">
<p class="contact-form__title">Закажите обратный звонок и наш консультант свяжется с вами</p>
<p class="contact-form__message"></p>
<div class="contact-form__input-wrapper contact-form__input-wrapper_name">
<input name="name" type="text" class="contact-form__input contact-form__input_name" tabindex="0" placeholder="Введите ваше имя">
</div>
<div class="contact-form__input-wrapper contact-form__input-wrapper_phone">
<input name="phone" type="tel" class="contact-form__input contact-form__input_phone" tabindex="0" placeholder="Введите ваш телефон">
</div>
<div class="contact-form__input-wrapper">
<input type="file" name="file" id="contact-form__input_file" class="contact-form__input contact-form__input_file">
<label for="contact-form__input_file" class="contact-form__file-button">
<span class="contact-form__file-text">Выберите файл</span>
</label>
</div>
<input name="theme" type="hidden" class="contact-form__input contact-form__input_theme" value="Заявка с сайта">
<button type="submit" class="contact-form__button">Отправить</button>
</form>
Добавил стили - получилось так:
Не забывайте, что форма отправляется без перезагрузки страницы, а значит используется ajax, и, для упрощения, jQuery. Поэтому подключаем сам jQuery, если не подключен, а после, и сам скрипт. Я сделал специальную папку telegramform, которую нужно поместить в корень сайта.
<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
(function ($) {
$(".contact-form").submit(function (event) {
event.preventDefault();
// Сохраняем в переменную form id текущей формы, на которой сработало событие submit
let form = $('#' + $(this).attr('id'))[0];
// Сохраняем в переменную класс с параграфом для вывода сообщений
let message = $(this).find(".contact-form__message");
let fd = new FormData(form);
$.ajax({
url: "/telegramform/php/send-message-to-telegram.php",
type: "POST",
data: fd,
processData: false,
contentType: false,
success: function success(res) {
let respond = $.parseJSON(res);
if (respond.err) {
message.html(respond.err).css('color','#d42121');
setTimeout(()=> {
message.text('');
}, 3000);
} else if(respond.okSend) {
message.html(respond.okSend).css('color','#21d4bb');
setTimeout(()=> {
message.text('');
}, 3000);
} else {
alert ('Необработанная ошибка. Проверьте консоль и устраните.');
}
},
});
});
}(jQuery));
А теперь сам обработчик нашей формы. Файл - send-message-to-telegram.php:
<?php
$msgs = [];
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$token = "341996777:AAHbnuvQib-vHU47i-6hbUrCU9D-qHYekxc";
$chat_id = "-209253141";
if (!empty($_POST['name']) && !empty($_POST['phone'])){
$bot_url = "https://api.telegram.org/bot{$token}/";
$urlForPhoto = $bot_url . "sendPhoto?chat_id=" . $chat_id;
if(!empty($_FILES['file']['tmp_name'])) {
// Путь загрузки файлов
$path = $_SERVER['DOCUMENT_ROOT'] . '/telegramform/tmp/';
// Массив допустимых значений типа файла
$types = array('image/gif', 'image/png', 'image/jpeg');
// Максимальный размер файла
$size = 1024000;
// Проверяем тип файла
if (!in_array($_FILES['file']['type'], $types)) {
$msgs['err'] = 'Запрещённый тип файла.';
echo json_encode($msgs);
die();
}
// Проверяем размер файла
if ($_FILES['file']['size'] > $size) {
$msgs['err'] = 'Слишком большой размер файла.';
echo json_encode($msgs);
die('Слишком большой размер файла.');
}
// Загрузка файла и вывод сообщения
if (!@copy($_FILES['file']['tmp_name'], $path . $_FILES['file']['name'])) {
$msgs['err'] = 'Что-то пошло не так. Файл не отправлен!';
echo json_encode($msgs);
} else {
$filePath = $path . $_FILES['file']['name'];
$post_fields = array('chat_id' => $chat_id, 'photo' => new CURLFile(realpath($filePath)) );
$ch = curl_init();
curl_setopt($ch, CURLOPT_HTTPHEADER, array( "Content-Type:multipart/form-data" ));
curl_setopt($ch, CURLOPT_URL, $urlForPhoto);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $post_fields);
$output = curl_exec($ch);
unlink($filePath);
}
}
if (isset($_POST['name'])) {
if (!empty($_POST['name'])){
$name = "Имя пославшего: " . strip_tags($_POST['name']) . "%0A";
}
}
if (isset($_POST['phone'])) {
if (!empty($_POST['phone'])){
$phone = "Телефон: " . "%2B" . strip_tags($_POST['phone']) . "%0A";
}
}
if (isset($_POST['theme'])) {
if (!empty($_POST['theme'])){
$theme = "Тема: " .strip_tags($_POST['theme']);
}
}
// Формируем текст сообщения
$txt = $name . $phone . $theme;
$sendTextToTelegram = file_get_contents("https://api.telegram.org/bot{$token}/sendMessage?chat_id={$chat_id}&parse_mode=html&text={$txt}");
if ($output && $sendTextToTelegram) {
$msgs['okSend'] = 'Спасибо за отправку вашего сообщения!';
echo json_encode($msgs);
} elseif ($sendTextToTelegram) {
$msgs['okSend'] = 'Спасибо за отправку вашего сообщения!';
echo json_encode($msgs);
return true;
} else {
$msgs['err'] = 'Ошибка. Сообщение не отправлено!';
echo json_encode($msgs);
die('Ошибка. Сообщение не отправлено!');
}
} else {
$msgs['err'] = 'Ошибка. Вы заполнили не все обязательные поля!';
echo json_encode($msgs);;
}
} else {
header ("Location: /");
}
?>
Во многом он повторяет обработчик из других форм на блоге. Например, в статье "Создание формы обратной связи" используется аналогичный подход, и вы легко сможете осуществить отправку данных как на почту, так и в мессенджер одновременно.
Тут стоит обратить внимание на переменные $token и $chat_id. Не забывайте подставить туда свои данные. Кроме того, не забывайте, что все это будет работать, только если данные идут через https, хотя у меня на тестовом работает и через http.
Вот так выглядит отправка текстового сообщения:
Вот так с файлом:
Не стал делать каких-то серьезных валидаций, так как это просто пример и вам наверняка нужно будет не только отправка текста или картинки в Телеграм, но и на почту, а значит все равно подстраивать под свои нужды. Если будут вопросы - пишите в комментариях.
Вот так, средствами PHP можно отправлять в Telegram сообщения и файлы. Если вы используете CMS MODX, то на блоге igamov.ru есть отличная инструкция по интеграции формы с мессенджером.
Исходник для отправки данных формы в Телеграм
Размер: 0,008
Кстати, подписывайтесь на Telegram канал. Уведомления об обновлениях на блоге, в первую очередь, приходят туда)
187 комментариев
Здравствуйте, а не подскажите, если делать бота не для себя, при этом доступа к телефону нет. Я могу обяснить как реализовать, но будет ли это легко для этого человека не знаю. Или я могу создать бота и чат у себя, и человеку нужно будет только добавить чат у себя?
Здравствуйте, скиньте статью ему)) А вообще да, попытайтесь объяснить, чтобы он вам переслал просто нужные данные. Или, возможно, вы и человека потом сделаете администратором группового чата.
Да можно ведь всё ещё проще сделать. Есть разные сервисы, например, form2chat.io/ru, где это всё делается за минуту. Просто копируете ссылку и вставляется её в атрибут action. И сами можете выбрать, на какой мессенджер получать заявки.
Юлия, зачем платить за сервис, если статья рассчитана минут на 15 и больше не нужно платить никому, ничего? Ну или на фрилансе заказать за 300 рублей единожды.
Как сделать что бы форма закрывалась после успешной отправки?
Вадим, в смысле как? А как вы уже пробовали? Что делали? Какие возникли сложности? Какие ошибки появились?
спасибо, каждый раз открываю, смотрю
Добрый день.
приходит номер телефона без "+"
вопрос уже был выше, но никто не ответил.
Как решить?
Роман, на следующей неделе попробую решить вопрос и добавить в статью то, как это делается.
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
Иван, у вас ssl сертификата нету либо хостинг не поддерживает тг
Добрый день, все работает! Большое спасибо) Есть есть один вопрос: как сделать так чтобы с сообщением передавались 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, ах-ха. Спасибо) Будут вопросы, пиши)
Спасибо за гайд!
Но у меня проблема, почему-то файл не хочет отправлятся, при том, что всё остальное приходит. Может быть ты встречался с такой ошибкой и знаешь как решить?
Emigrant, нужно больше информации. Есть ли ошибки в консоли?
Можно ли настроить под эту форму?
Заказать услугу
Дмитрий, нужна настройка формы? На странице услуг цены, свяжитесь со мной.
Добрый вечер!
Как сделать, чтобы в нескольких формах работало?
Как вы уже пробовали? С какой проблемой или ошибкой столкнулись? Как пытались ее решить?
Дмитрий Давыдов, менял переменные и ничего не выходит. Я в этом не силен
Вот и интересуюсь у Вас, могли бы подсказать, буду признателен)
Ошибок вроде никаких, просто не работает
Помочь с чем? С чего вы взяли, что не работает? Как вы в этом убедились? Откройте консоль браузера, отправьте форму, проверьте есть ли там ошибки.
Дмитрий Давыдов, __http://pokraskavkieve.com.ua в > оставить заявку> как в этой форме сделать чтобы работало? Я прошу прощение, помогите плиз решить вопрос
Во-первых, у вас jQuery подключен несколько раз, а должен быть только 1 раз. Во-вторых подключайте свежую версию (3), а не 1.12.4 и 1.10.1 , как у вас. В-третьих, подключайте скрипты, которые зависят от jQuery, после подключения самого jQuery.
ДД. Все работает отлично , но столкнулся с проблемой отправки формы на смартфоне. В мобильной версии сайта не отправляет форму если сделать фото с камеры. Видимо нужно юзать MediaDevices.getUserMedia() , но пока без результата. Подскажи пжл , может нужно объявить разрешения для камеры в PHP ?