Готовая форма с отправкой информации через ajax в Telegram — PROG-TIME

Готовая форма с отправкой информации через ajax в Telegram

15.01.2022
Содержание:

Сегодня я вам покажу форму, которую я использую в своей работе для многих своих проектов. Это форма работает на 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);
}
На этом всё!
Больше интересных статей в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime
Наши планы
  • Написание материала для курса по разработке ботов на Telegram
  • Разработка универсального парсера на PHP

Поддержите мой сайт!

Каждый переведённый донат, мотивирует на создание новых записей и уроков на YouTube

Контакты для связи

Технология на prog-time
Telegram
https://t.me/prog_time_bot