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