В этой статье мы хотим Вам показать способ работы с формой, которую используют многие разработчики для своих проектов. Это форма работает на 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);
}