Відправлення результатів форми боту Telegram
У цій короткій статті ми продовжимо тему передачі даних до бота Telegram. Цього разу ми приймемо дані зі звичайної форми на сайті.
Давайте одразу пропустимо момент створення бота і припустимо, що у нас вже є бот, а також chat ID для відправки повідомлення і токен для отримання бота.
Крім подачі текстових полів у цій формі, ми також будемо надсилати прикріплене зображення.
Цей метод був позичений з ресурсу smartlanding.biz і тут буде його краткий опис.
В кореневій папці сайту ми створимо папку telegram з js, php та tmp папками.
<form id="form-contact" method="POST" class="contact-form" autocomplete="off" enctype="multipart/form-data">
<p class="contact-form__title">Request a callback and our consultant will contact you</p>
<div class="preloader"></div>
<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" placeholder="Name">
</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" placeholder="Phone number">
</div>
<div class="contact-form__input-wrapper">
<input type="file" name="files[]" id="contact-form__input_file" class="contact-form__input contact-form__input_file" multiple>
<label for="contact-form__input_file" class="contact-form__file-button">
<span class="contact-form__file-text">Choice file</span>
</label>
</div>
<input name="theme" type="hidden" class="contact-form__input contact-form__input_theme" value="Application from the site *Sitename*">
<button type="submit" class="contact-form__button">Send</button>
</form>Для відправлення запитів без перезавантаження сторінки, ми використовуватимемо ajax і jquery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="/telegram/js/telegram.js"></script>
У папці telegram/js створіть файл telegram.js з таким вмістом:
(function ($) {
$(".contact-form").submit(function (event) {
event.preventDefault();
let successSendText = "Message sent successfully";
let errorSendText = "Message not sent. Try again!";
let requiredFieldsText = "Fill in the fields with your name and phone number";
let message = $(this).find(".contact-form__message");
let form = $("#" + $(this).attr("id"))[0];
let fd = new FormData(form);
$.ajax({
url: "/telegram/php/sender.php",
type: "POST",
data: fd,
processData: false,
contentType: false,
beforeSend: () => {
$(".preloader").addClass("preloader_active");
},
success: function success(res) {
$(".preloader").removeClass("preloader_active");
// View response status if error
// console.log(res);
let respond = $.parseJSON(res);
if (respond === "SUCCESS") {
message.text(successSendText).css("color", "#21d4bb");
setTimeout(() => {
message.text("");
}, 4000);
} else if (respond === "NOTVALID") {
message.text(requiredFieldsText).css("color", "#d42121");
setTimeout(() => {
message.text("");
}, 3000);
} else {
message.text(errorSendText).css("color", "#d42121");
setTimeout(() => {
message.text("");
}, 4000);
}
}
});
});
})(jQuery);А тепер ми створимо обробний файл sender.php в папці telegram/php.
<?php
// Bot token
const TOKEN = '341996777:AAHbnuvQib-vHU47i-6hbUrCU9D-qHYekxc';
// Chat ID
const CHATID = '-209253141';
// An array of valid file type values.
$types = array('image/gif', 'image/png', 'image/jpeg', 'application/pdf');
// Maximum file size in kilobytes
// 1048576; // 1 МБ
$size = 1073741824; // 1 ГБ
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$fileSendStatus = '';
$textSendStatus = '';
$msgs = [];
// Check if the fields with the name and phone number are empty
if (!empty($_POST['name']) && !empty($_POST['phone'])) {
// If not empty, then validate these fields and save and add to the body of the message. The minimum for the test is as follows:
$txt = "";
// Name
if (isset($_POST['name']) && !empty($_POST['name'])) {
$txt .= "Name: " . strip_tags(trim(urlencode($_POST['name']))) . "%0A";
}
// Phone number
if (isset($_POST['phone']) && !empty($_POST['phone'])) {
$txt .= "Phone: " . strip_tags(trim(urlencode($_POST['phone']))) . "%0A";
}
// Don't forget the subject line
if (isset($_POST['theme']) && !empty($_POST['theme'])) {
$txt .= "Themes: " . strip_tags(urlencode($_POST['theme']));
}
$textSendStatus = @file_get_contents('https://api.telegram.org/bot'. TOKEN .'/sendMessage?chat_id=' . CHATID . '&parse_mode=html&text=' . $txt);
if( isset(json_decode($textSendStatus)->{'ok'}) && json_decode($textSendStatus)->{'ok'} ) {
if (!empty($_FILES['files']['tmp_name'])) {
$urlFile = "https://api.telegram.org/bot" . TOKEN . "/sendMediaGroup";
// File upload path
$path = $_SERVER['DOCUMENT_ROOT'] . '/telegram/tmp/';
// Loading a file and displaying a message
$mediaData = [];
$postContent = [
'chat_id' => CHATID,
];
for ($ct = 0; $ct < count($_FILES['files']['tmp_name']); $ct++) {
if ($_FILES['files']['name'][$ct] && @copy($_FILES['files']['tmp_name'][$ct], $path . $_FILES['files']['name'][$ct])) {
if ($_FILES['files']['size'][$ct] < $size && in_array($_FILES['files']['type'][$ct], $types)) {
$filePath = $path . $_FILES['files']['name'][$ct];
$postContent[$_FILES['files']['name'][$ct]] = new CURLFile(realpath($filePath));
$mediaData[] = ['type' => 'document', 'media' => 'attach://'. $_FILES['files']['name'][$ct]];
}
}
}
$postContent['media'] = json_encode($mediaData);
$curl = curl_init();
curl_setopt($curl, CURLOPT_HTTPHEADER, ["Content-Type:multipart/form-data"]);
curl_setopt($curl, CURLOPT_URL, $urlFile);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, $postContent);
$fileSendStatus = curl_exec($curl);
curl_close($curl);
$files = glob($path.'*');
foreach($files as $file){
if(is_file($file))
unlink($file);
}
}
echo json_encode('SUCCESS');
} else {
echo json_encode('ERROR');
//
// echo json_decode($textSendStatus);
}
} else {
echo json_encode('NOTVALID');
}
} else {
header("Location: /");
}
В результаті, при подачі форми з сайту дані будуть надсилатися в чат або групи з ботом Telegram.
Варто відразу зауважити, що якщо у вас щось не вдається, не впадайте у відчай.
В першу чергу ми перевіряємо, чи відображаються помилки з текстом, який ми написали у скрипті або файлі обробника. Якщо помилок немає, перевірте вивід скрипту, розкоментувавши рядок.
console log(res);
в нашому скрипті та подивитись чи відобразить щось консоль браузера.
Якщо консоль нічого не відображає або виводить порожню строку, це, мабуть, свідчить про помилку в розташуванні файлів. Спробуйте розмістити теку telegram безпосередньо на верхньому рівні теки сайту, без вкладання в підтеки.