Форма с отправкой информации через Ajax в Telegram

В этой статье мы хотим Вам показать способ работы с формой, которую используют многие разработчики для своих проектов. Это форма работает на HTML/CSS/JavaScript/PHP используя технологию Ajax и позволяет отправлять информацию в виде сообщения в группу Telegram. Скрипт формы до минимума был упрощён, чтобы его можно было быстро поставить на любой проект.

HTML разметка формы

  
<div class="wrapperForm">
  <div class="headingForm">Оставить заявку</div>
  <form action="" class="formFeedBack" >
    <input class="textField" placeholder="Введите имя" name="name" type="text">
    <input class="textField" placeholder="Введите телефон" name="phone" type="tel">
    <button class="butSubmitForm">Отправить</button>
    <div class="messageBlockForm">Сообщение успешно отправленно!</div>
  </form>
</div>
  

CSS стили формы

  
.wrapperForm {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 20px;
}
.headingForm {
  width: fit-content;
    font-size: 22px;
    text-align: center;
}
form.formFeedBack {
    width: 500px;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}
.formFeedBack .textField {
    padding: 7px 10px;
    line-height: 1;
}
.formFeedBack .butSubmitForm {
    width: fit-content;
    margin: auto;
    padding: 5px 25px;
    font-size: 14px;
}
.messageBlockForm {
    display: none;
}
.messageBlockForm.active {
    display: block;
}
  

JavaScript формы

Для упрощения работы с JS на сайтах (не SPA - приложений) используем jQuery.

  
$(documnet).ready(function() {
    $(".formFeedBack").on("submit", function() {
  let dataSubmit = $(this).serialize()
  $.ajax({
      url: 'путь_до_файла обработчика',
     method: 'post',
     dataType: 'html',
     data: dataSubmit,
     success: function(data){
      console.log(data);
      $("form.formFeedBack .messageBlockForm").addClass("active")
     setTimeout(() => {
          $("form.formFeedBack .messageBlockForm").removeClass("active")
      }, 3000);
 }
        });
    })
});
 

Файл обработчик формы на PHP

 
/* ============================= */
/* ОТПРАВКА ПИСЬМА ЗАКАЗА В TELEGRAM */
/*функция для создания запроса на сервер Telegram */
/* ============================= */
function parser($url){
 $curl = curl_init();
  curl_setopt($curl, CURLOPT_URL, $url);
  curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
  $result = curl_exec($curl);
 if($result == false){     
    echo "Ошибка отправки запроса: " . curl_error($curl);
   return false;
 }
 else{
   return true;
  }
}
/* ============================= */
/* ============================= */

/* ============================= */
/* ОТПРАВКА СООБЩЕНИЕ В ТЕЛЕГРАММ */
/* ============================= */
function orderSendTelegram($message) {
  /*токен который выдаётся при регистрации бота */
  $token = "ТОКЕН_ДЛЯ_БОТА_ТЕЛЕГРАМ";
 /*идентификатор группы*/
  $chat_id = "ID_ГРУППЫ";

 $message = urlencode($message);

 /*делаем запрос*/
 parser("https://api.telegram.org/bot{$token}/sendMessage?chat_id={$chat_id}&parse_mode=html&text={$message}");
}
/* ============================= */
/* ============================= */

/* ============================= */
/* ОБРАБОТЧИК ДЛЯ ФОРМЫ В НИЖНЕЙ ЧАСТИ ЭКРАНА */
/* ============================= */
if($_POST) {
 $name = htmlspecialchars($_POST["name"]);
 $phone = htmlspecialchars($_POST["phone"]);
 $message = htmlspecialchars($_POST["message"]);

 $textMessage = "СООБЩЕНИЕ ИЗ ФОРМЫ GOLDEN-LINK\n";
 $textMessage .= "Имя:  ".$name."\n";
 $textMessage .= "Телефон:  ".$phone."\n";
  $textMessage .= "Сообщение:  ".$message."\n";
  // orderSendTelegram($textMessage);
}