Відправлення результатів форми боту 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 безпосередньо на верхньому рівні теки сайту, без вкладання в підтеки.