меню

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

Возможно, вам будет интересно

Чтение и запись данных Excel из приложений PHP

Узнайте, как использовать поддержку XML в PHP для чтения данных, выгруженных из Microsoft® Excel® 2003 в XML-формате, и как экспортировать данные в XML-формате из PHP-приложений для использования в электронных таблицах Excel.

Загрузка курса валют с сайта ЦентроБанка

В сети много статей по поводу загрузки курса валют с сайта ЦБ. Мы решили поделится еще одним простым способом. Источником информации об официальном курсе валюты служит сайт Центробанка Российской Федерации.

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

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

Фильтрация и проверка данных PHP. Частые ошибки

В сети много статей по поводу фильтрации данных, но они как правильно не полные и без подробные примеров. Материал предназначен в основном для начинающих веб-программистов.

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту