
HTML форма, которую обрабатывает jQuery, записывает данные в Cookies и если все ОК — пересылает данные в Telegram с помощью AJAX.
В скрипте реализованы три стадии защиты от «дураков». Возможно отправить только два сообщения с одного браузера. Сделано это специально, чтобы «приколисты» не могли бесконечно присылать сообщения в чат.
Посмотреть как работает: https://code.devarts.pro
Куда прилетают сообщения: https://t.me/iartsorders
Создание и подключение бота: тут
Аналоги на PHP
Ранее я уже писал статью, как отправлять данные в Telegram с сайта с помощью PHP. Сложного ничего. Все строится на базе открытого API.
Подробнее про PHP: тут
HTML форма для jQuery
Форма писалась для модального окна под лендинг на WordPress. Отсюда и логика обработки. С минимальным количеством полей — номер телефона и необязательное текстовое поле для хотелок клиента.

HTML код формы
<form id="datas">
<p>
<label for="phone">Номер телефона *</label><br>
<input id="phone" autocomplete="off" placeholder="+70001234567" maxlength="12" name="phone" class="phone" pattern="^\+7\d{3}\d{7}$">
</p>
<p>
<label for="descr">Описание (не обязательно)</label><br>
<textarea id="descr" placeholder="Введите текст" name="descr" class="descr"></textarea>
</p>
<a href="#" id="datas-btn">ОТПРАВИТЬ</a>
<p class="ressult"></p>
</form>
- autocomplete — запрещаем автозаполнение формы
- placeholder — подсказка в каком виде нужно вписать номер телефона
- pattern — регулярное выражение, которым мы запрещаем все, кроме цифр
- maxlength — максимально 12 цифр
Технологии и способы защиты от спама
На самом деле защититься от фронтенд атак крайне сложно т.к. все скрипты хранятся в открытом виде, но простейшие решения все же есть. Они направлены на то, чтобы отбить у потенциальных «приколистов» желание спамить.
- Блокировка копирования, вставки и автозаполнения номера телефона.
- Валидация номера телефона (реализованы РФ номера).
- Блокировка повторной отправки формы.
- Фиксация отправок в cookies и ограничение попыток.
Обрабатываем клик по кнопке, получаем данные из форм и отправляем в Telegram с помощью jQuery Ajax
Для начала подключаем jQuery и плагин JS Cookies
<!-- jQuery Libs CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Cookies CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/latest/js.cookie.min.js"></script>
В первую очередь нам необходимо обработать клик по кнопке и получить данные из форм. Кнопка выполнена ссылкой, чтобы не обновлялась страница.
При клике по кнопке, введенные в поля данные будут записаны в переменные, вызовется функция send_tg и будут отправлены данные в чат:
$('#datas-btn').click(function(){
var f_phone = $('input.phone').val(),
f_descr = $('textarea.descr').val(),
text = 'Новая заявка:\n ' + f_descr +',\n ' + f_phone;
//вызываем функцию отправки в Telegram
send_tg(text);
});
// Предварительно заполняем данные вашего чата и бота в переменных chatid и token
function send_tg(text){
var chatid = '@iartsorders',
token = '273805635:AAGQOuPVadtQyEx0COPrDnq2r-YmUo90xaU',
z = $.ajax({
type: "POST",
url: "https://api.telegram.org/bot"+token+"/sendMessage?chat_id="+chatid,
data: "parse_mode=HTML&text="+encodeURIComponent(text),
});
Но это плохое решение. Скрипт никак не защищен от спама. Я могу бесконечно нажимать на отправку и в чат каждый раз будет прилетать сообщение.
Закрываем возможность спам рассылок
Ниже подробно распишу все, что можно сделать и на каждом этапе буду расширять наш мини скрипт до полноценного jQuery плагина
1. Делаем валидацию номера телефона и запрещаем копирование и вставку в это поле
Текстовое поле мы не будем проверять. Главная задача — получить лид в виде номера телефона, на который мы перезвоним. А текстовое содержимое не имеет особого значения.
Дополнительно запретим два раза подряд отправлять сообщение одним маленьким хаком (Защита от «Дурака» 2). Также начинаем подписывать наш код:
// ONCLICK BUTTON
$('#datas-btn').click(function(){
// Очищаем поле с результатом на этапе сразу после клика иначе будут бесконечные дубли текстов с результатом клика по кнопке
$('p.ressult').empty();
// получаем данные из полей формы
var f_phone = $('input.phone').val(),
f_descr = $('textarea.descr').val();
// Проверяем корректность номера телефона (только РФ)
if(f_phone == '' || !validatePhone(f_phone)){
$('p.ressult').css('color', 'red').append('Некорректно заполнен номер телефона');
}else{
// Если Телефон корректный — выводим результат
$('p.ressult').css('color', 'red').append('Заявка отправлена!<br>Мы свяжемся с вами в ближайшее время');
// Защита от «Дурака» 2. Вешаем метку в виде CSS класса и блокируем повторную отправку заявки
$('#datas-btn').addClass('sent');
}
});
// STATIC FUNCTIONS
// Защита от «Дурака» 3. Блокируем возможность вставки в поле с номером телефона, дабы отбить желание спамить нам заявки
$('input.phone').bind('cut copy paste', function (e) {
e.preventDefault();
});
// Валидация телефона через регулярные выражения
function validatePhone(phone){
let regex = /^(\+7|7|8)?[\s\-]?\(?[489][0-9]{2}\)?[\s\-]?[0-9]{3}[\s\-]?[0-9]{2}[\s\-]?[0-9]{2}$/;
return regex.test(phone);
}
2. Проверим нашу форму на то, что отправка уже совершена, а страница еще не обновлялась. Также запишем факт отправка в Cookies

На первом этапе мы к кнопке добавили CSS класс «sent» и сразу после клика по кнопке начинаем проверять его наличие. Первый клик пропускает, но начиная со второго скрипт отсекает любые попытки выводя соответствующий текст
$('#datas-btn').click(function(){
// Очищаем поле с результатом
$('p.ressult').empty();
if($('#datas-btn').hasClass('sent')){
$('p.ressult').css('color', 'red').append('Вы уже отправили заявку. Если была допущена ошибка — обновите страницу и отправьте заново.');
}else{
// получаем данные из полей формы
var f_phone = $('input.phone').val(),
f_descr = $('textarea.descr').val();
// Проверяем корректность номера телефона (только РФ)
if(f_phone == '' || !validatePhone(f_phone)){
$('p.ressult').css('color', 'red').append('Некорректно заполнен номер телефона');
}else{
// Если Телефон корректный — выводим результат
$('p.ressult').css('color', 'red').append('Заявка отправлена!<br>Мы свяжемся с вами в ближайшее время');
// Защита от «Дурака» 2. Вешаем метку в виде CSS класса и блокируем повторную отправку заявки
$('#datas-btn').addClass('sent');
// Заносим номер телефона и текст в куки
Cookies.set('phone', f_phone);
Cookies.set('text', f_descr);
// Защита от «Дурака» 1. Даем две попытки на отправку заяявок. Фиксируем их в куках
if(!Cookies.get('sent')){
Cookies.set('sent', '1');
}else if(Cookies.get('sent') == '1'){
Cookies.set('sent', '2');
}
}
}
});
// STATIC FUNCTIONS
// Защита от «Дурака» 3. Блокируем возможность вставки в поле с номером телефона, дабы отбить желание спамить нам заявки
$('input.phone').bind('cut copy paste', function (e) {
e.preventDefault();
});
// Валидация телефона через регулярные выражения
function validatePhone(phone){
let regex = /^(\+7|7|8)?[\s\-]?\(?[489][0-9]{2}\)?[\s\-]?[0-9]{3}[\s\-]?[0-9]{2}[\s\-]?[0-9]{2}$/;
return regex.test(phone);
}
3. Получаем Cookies и отсекаем спам рассылки
Также мы записали факт клика в cookies и присвоили ему значение «1». Бывает всякое и отправитель мог ошибиться. Поэтому дадим ему возможность отправить сообщение еще раз.
Третьей попытки уже не будет. Добавляем это условие и подключаем функцию отправки в Telegram:
// Защита от «Дурака» 1. Проверяем куки на количество отправленных заявок и обрубаем очередную отправку после 2 попыток
if(Cookies.get('sent') == '2'){
// Удаляем форму и на ее место вставляем текст
$('#datas').empty().append('Вы отправили слишком много заявок. Попробуйте повторить позже. <br><br>От вас получены следующие данные: <br><br> <strong>Номер телефона:</strong> ' + Cookies.get('phone') + '<br><strong>Краткое описание:</strong> ' + Cookies.get('text'));
}
$('#datas-btn').click(function(){
// Очищаем поле с результатом
$('p.ressult').empty();
if($('#datas-btn').hasClass('sent')){
$('p.ressult').css('color', 'red').append('Вы уже отправили заявку. Если была допущена ошибка — обновите страницу и отправьте заново.');
}else{
// получаем данные из полей формы
var f_phone = $('input.phone').val(),
f_descr = $('textarea.descr').val();
// Проверяем корректность номера телефона (только РФ)
if(f_phone == '' || !validatePhone(f_phone)){
$('p.ressult').css('color', 'red').append('Некорректно заполнен номер телефона');
}else{
// Если Телефон корректный — выводим результат
$('p.ressult').css('color', 'red').append('Заявка отправлена!<br>Мы свяжемся с вами в ближайшее время');
// Защита от «Дурака» 2. Вешаем метку в виде CSS класса и блокируем повторную отправку заявки
$('#datas-btn').addClass('sent');
// Заносим номер телефона и текст в куки
Cookies.set('phone', f_phone);
Cookies.set('text', f_descr);
// Защита от «Дурака» 1. Даем две попытки на отправку заяявок. Фиксируем их в куках
if(!Cookies.get('sent')){
Cookies.set('sent', '1');
}else if(Cookies.get('sent') == '1'){
Cookies.set('sent', '2');
}
//если все проверки пройдены формируем текстовое собщение
var text = 'Новая заявка:\n ' + f_descr +',\n ' + f_phone;
//и вызываем функцию отправки в телегу
send_tg(text);
}
}
});
// STATIC FUNCTIONS
// Защита от «Дурака» 3. Блокируем возможность вставки в поле с номером телефона, дабы отбить желание спамить нам заявки
$('input.phone').bind('cut copy paste', function (e) {
e.preventDefault();
});
// Валидация телефона через регулярные выражения
function validatePhone(phone){
let regex = /^(\+7|7|8)?[\s\-]?\(?[489][0-9]{2}\)?[\s\-]?[0-9]{3}[\s\-]?[0-9]{2}[\s\-]?[0-9]{2}$/;
return regex.test(phone);
}
// AJAX отправка данных в ТГ
function send_tg(text){
var chatid = '@iartsorders',
token = '273805635:AAGQOuPVadtQyEx0COPrDnq2r-YmUo90xaU',
z = $.ajax({
type: "POST",
url: "https://api.telegram.org/bot"+token+"/sendMessage?chat_id="+chatid,
data: "parse_mode=HTML&text="+encodeURIComponent(text),
});
};
Добавленное решение сразу после загрузки страницы получает данные из cookies и удаляет форму

Комментарии