Друзья, приветствую!
Сегодня я подготовил небольшую, расслабляющую статью, особенно в сравнении с предыдущими. Недавно я разрабатывал FullStack-приложение для небольшого лендинга, где одной из задач было привязать форму с сайта к Telegram-боту.
Суть задачи:
Пользователь вводит данные в форму на сайте, после чего эта информация отправляется заказчику через Telegram-бота. Данные отправляются в формате HTML, с полным набором информации. Всё это нужно было реализовать на чистом JavaScript + HTML + CSS. Из этой задачи родилась идея для данной статьи.
Чем мы займёмся?
Мы зарегистрируем Telegram-бота через BotFather, создадим приятную страницу с формой для сбора данных с использованием бесплатного сервиса WebSim.ai, а затем настроим отправку сообщений с формы в Telegram-бота, используя только JavaScript, HTML и CSS.
После завершения проекта, я покажу, как запустить его удалённо, чтобы каждый мог воспользоваться нашей формой. Для этого мы будем использовать хостинг Amvera Cloud, потому что это быстро и удобно.
Кратко о процессе деплоя
Процесс деплоя сводится к следующему:
Подготовить файлы страницы.
Создать файл инструкций (его я предоставлю).
Доставить файлы на Amvera через GIT или встроенный интерфейс.
После простых манипуляций наш сайт станет доступен по бесплатному HTTPS-домену, который предоставит Amvera.
Подготовка Telegram для приёма сообщений
На этом этапе мы создадим Telegram-бота, получим свой Telegram ID, чтобы бот знал, кому отправлять сообщения, и позволим боту отправлять нам сообщения, «познакомившись» с ним.
Шаги для создания Telegram-бота:
Перейдите в BotFather.
Введите команду
/newbot(или выберите её в меню).Придумайте имя бота — любое, на любом языке.
Присвойте уникальный username на английском, оканчивающийся на "bot", "BOT" или "Bot" (без пробелов).
Сохраните токен, который выдаст BotFather.
Для того чтоб позволить боту отправлять вам сообщения, перейдите в чат с ботом и нажмите кнопку «СТАРТ».
Получение Telegram ID:
Чтобы бот мог отправлять вам сообщения, нужно получить ваш Telegram ID. Один из способов — воспользоваться ботом IDBot Finder Pro:
Перейдите в бота.
Нажмите «Старт».
Выберите «My info».
Кликните на свой ID, и он скопируется в буфер обмена.
Подготовка страницы с формой
Страницу можно сделать самостоятельно или с помощью сервиса WebSim.ai, который сгенерирует нужную форму. Я воспользуюсь WebSim.ai.
Подробно про данный сервис я писал в этой статье: «WebSim AI: Бесплатный ИИ-помощник для быстрой веб-разработки – время фронтендерам напрячься».
Хочу чтоб в моей форме были следующие поля:
Имя (обязательно)
Фамилия (обязательно)
Дата рождения (обязательно)
Пол (чекбоксы, обязательно)
Хобби (выпадающий список, обязательно минимум одно)
Примечание (необязательно)
После отправки формы пользователь увидит сообщение: «Ваша анкета отправлена».
Задача для нейросети WebSim
Скрытый текст
Необходимо создать страницу с формой, которая будет содержать следующие поля:
Имя (input type="text")
Поле обязательно для заполнения.
Фамилия (input type="text")
Поле обязательно для заполнения.
Дата рождения (input type="date")
Обязательное поле для выбора даты через календарь.
Пол (input type="checkbox")
Чекбоксы для выбора пола. Обязательно должно быть выбрано одно значение.
Примеры значений: мужской, женский.
Хобби (select multiple)
Выпадающий список с возможностью выбора нескольких значений.
Обязательно должно быть выбрано как минимум одно хобби.
Пример хобби: чтение, спорт, музыка, путешествия.
Примечание (textarea)
Поле для ввода произвольного текста. Заполнение не обязательно.
Под формой необходимо разместить кнопку «Отправить».
После успешной отправки формы, отобразить всплывающее сообщение (popup) с текстом:
«Ваша анкета отправлена».
Требования:
Форма должна быть валидирована перед отправкой (проверка обязательных полей).
Для реализации можно использовать HTML5 и JavaScript.
Можно писать и проще, но я за то чтоб моя задача была максимально понятна.
Перейдем на сайт WebSim, выполним авторизацию и в поле ввода запроса вставим наш промт.
Посмотрим на результат
Попросим добавить больше стилей. Кроме того, пусть он подправит нам блок с хобби, добавив возможность отмечать чекбоксами и работать в формате выпадающего списка.
Новая задача для нейросети WebSim
Скрытый текст
Добавить стилизацию формы и её элементов:
Придать форме более современный вид с использованием CSS (flexbox/grid для организации элементов).
Все обязательные поля должны иметь специальную визуальную индикацию (например, красную звёздочку рядом с меткой поля).
Стилизация кнопки «Отправить» — сделать её заметной, с эффектом при наведении.
Добавить отступы, границы, и тени для полей ввода, чтобы они выглядели аккуратно и легко читались.
Всплывающее сообщение «Ваша анкета отправлена» стилизовать как модальное окно с затемнением фона.
Изменить блок с хобби:
Реализовать выпадающий список с возможностью выбора нескольких опций, где каждое хобби отмечается через чекбоксы.
Для этого добавить кастомный dropdown (например, с использованием select + checkbox для выбора нескольких вариантов).
В выпадающем списке пользователь должен видеть доступные варианты хобби и иметь возможность отмечать одно или несколько.
Добавить проверку, что как минимум одно хобби выбрано.
Примерные стили:
Сделать выпадающий список с хобби похожим на мультивыборные списки с чекбоксами внутри, который открывается при нажатии (можно использовать популярные решения с JavaScript для кастомного мультиселекта).
Валидация формы:
Проверить обязательность заполнения всех полей перед отправкой.
Подсветить ошибку, если какое-либо обязательное поле не заполнено или не выбрано.
Итоговое требование:
Форма должна выглядеть стильно, быть удобной для пользователей и работать корректно, включая валидацию и отправку данных с подтверждением в виде модального окна.
Смотрим на результат
Теперь нам остается привязать отправку этой формы в наше телеграмм. Попросим об этом сервис, так как WebSim прекрасно работает с JavaScript. После, при необходимости, подправим JS под себя.
Я бы хотел, чтоб сообщение в бота отправлялось с HTML форматированием, поэтому, задачу поставим так:
Скрытый текст
Отправка данных через чистый JavaScript
После того как форма будет валидирована и отправлена, данные должны отправляться на указанный Telegram-бот (ID бота: 7840688347:AAFsSq0EAцуU42lEnXFueфR8RtVtTа37N9BQ).
Сообщение должно отправляться пользователю с ID: 5120841744.
Формат сообщения:
Сообщение должно быть в формате ParseMode HTML.
Начало сообщения: «
Интересные статьи
Интересные статьи
