Сейчас мессенджеры играют важную роль в нашей жизни. Ведь все мы любим общаться 🙂
И вот одним из популярных мессенджеров является Telegram. На мой взгляд преимуществ у него много. И наверное каждый пользователь хотел бы получать сообщения с формы прямо в телеграмм! Ведь это круто, на дворе то уже 2018 год))
И как раз в данной статье я хочу показать Вам, как я настроил отправку сообщений с формы обратной связи в 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.
Кстати, подписывайтесь на Telegram канал. Уведомления об обновлениях на блоге, в первую очередь, приходят туда)
Здравствуйте!)
Подскажите пожалуйста, как можно в этой форме, добавить ещё один пункт, к примеру email.
Весь день голову ломаю как сделать
В коде все прекрасно описано