Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <p><strong>Инструкция для новичков в верстке и PHP - как правильно отправлять заявки с вашего сайта в Telegram.</strong></p>

2 <h2>Содержание</h2>

3 <ul><li><a>Суть задачи</a></li>

4 <li><a>Термины и понятия</a></li>

5 <li><a>Создание Telegram бота</a></li>

6 <li><a>Получение id чата</a></li>

7 <li><a>Установка плагина и настройка формы обратной связи</a></li>

8 <li><a>Ссылки</a></li>

9 <li><a>Заключение</a></li>

10 </ul><h2>Суть задачи</h2>

11 <p>Получили задачу от клиента реализовать отправку заявок с формы обратной связи с сайта в Telegram. Ему не удобно постоянно проверять почту, а этот мессенджер - прекрасное и привычное решение для быстрой реакции на СМС. На сайте клиента используется CMS WordPress, а формы сверстаны через плагин Elementor Pro. Мы выбрали наладить отправку заявок с сайта через бот Telegram в специальный чат. То есть сайт через форму обратной связи, которую заполняет клиент, должен отправлять информацию еще и боту, а тот будет ее ловить и показывать клиенту со стандартными уведомлениями Telegram.</p>

12 <h2>Термины и понятия</h2>

13 <p>Некоторые употребляемые термины в статье для расширения кругозора.</p>

14 <p><strong>WordPress</strong>- популярная бесплатная CMS-система для управления сайтами</p>

15 <p><strong>Elementor Pro</strong>- популярный конструктор веб-страниц</p>

16 <p><strong>Dynamic.ooo</strong>- плагин с пакетами виджетов для Elementor</p>

17 <p><strong>Telegram</strong>- популярный мессенджер</p>

18 <p><strong>/start</strong>- команда боту запуститься</p>

19 <p><strong>/newbot</strong>- команда создать нового бота</p>

20 <p><strong>token</strong>- идентификатор бота в Telegram</p>

21 <p><strong>id chat</strong>- номер чата, требуется боту для отправки сообщения</p>

22 <h2>Создание Telegram бота</h2>

23 <p>Создаем бота в Telegram, который будет отправлять заявки клиенту:</p>

24 <ol><li>Чтобы создать бота, переходим в Telegram, ищем в поиске @BotFather добавляем его к себе</li>

25 <li>Пишем боту команду /start</li>

26 <li>После команды /newbot бот спросит имя нового бота и логин. В моем случай имя pingvinchik_bot логин zayvkassite_bot (логин должен заканчиваться на bot)</li>

27 <li>В ответном сообщений придет token бота (его нужно держать в безопасности и не публиковать) - он понадобится нам в будущем</li>

28 <li>Ищем нашего бота в Telegram по имени или логину, запускаем его /start (с аккаунта, на который должны приходить заявки). В моем случай - аккаунт клиента.</li>

29 </ol><h2>Получение id чата</h2>

30 <p>Теперь нам нужно узнать id chat, чтобы бот мог отправлять заявку клиенту:</p>

31 <ol><li>Добавь бота в Telegram клиента @ShowJsonBot</li>

32 <li>Напиши боту /start, после напиши<em>text</em></li>

33 <li>В ответ придет сообщение, ищем строчку: “chat”: {“id”: ********* - это и будет ваш id chat</li>

34 </ol><h2>Установка плагина и настройка формы обратной связи</h2>

35 <p>Нам нужно установить платный плагин Dynamic.ooo. В нём надо выключить все ненужные виджеты, кроме Telegram for Elementor Pro Form, и настроить формы на страницах сайта для отправки заявок в Telegram.</p>

36 <ol><li><p>Устанавливаем плагин dynamic в WordPress</p>

37 </li>

38 <li><p>Отключаем в настройках плагина всё не нужные виджеты</p>

39 </li>

40 <li><p>В настройках плагина во вкладке Features > > > Extensions включите виджет Telegram for Elementor Pro Form</p>

41 </li>

42 </ol><ol><li><p>Переходим в редактор страниц Elementor, находим форму которую необходимо настроить</p>

43 </li>

44 <li><p>Настраиваем поле формы телефон. Form Fields > > > элемент телефон (в нашем случай) > > > Type значение "Tel" > > > выбираем вкладку ADVANCED. Смотрим значение поля id, оставляем его по умолчанию или меняем на свое. Я заменил его на значение phone (важно запомнить это значение оно нам понадобится далее).</p>

45 </li>

46 <li><p>Добавляем действие, которое будет выполняться, когда пользователь отправит форму. Переходим на вкладку Actions After Submit > > > нажимаем "+" и выбираем из списка Telegram.</p>

47 </li>

48 </ol><ol><li><p>Далее настраиваем отправку сообщения из формы в наш Telegram-бот. Здесь нам понадобится token бота и id chat. Переходим во вкладку Telegram > > > Добавляем элемент > > > в поле Enable Message добавляем значение "Да" > > > поле Condition оставляем по умолчанию > > > в поле Telegram authorization token заполняем наш token-бота > > > в поле Chat ID заполняем id чата клиента(куда отправлять заявку).</p>

49 </li>

50 <li><p>Последнее поле Message - это скрипт сообщения. В моем случае оно выглядит так: "Номер телефона: [form</p>

51 ]" form: - это поле формы например телефон, почта и т.д. Значение phone - это id во вкладке Form Fields > > > ADVANCED > > > id.</li>

52 <li><p>В конце сохраняем настройки и проверяем работоспособность формы, для настройки остальных форм повторите тоже самое.</p>

53 </li>

54 </ol><h2>Ссылки</h2>

55 <ul><li><a>Похожее решение для тех, кто знает HTML, PHP</a></li>

56 <li><a>Ручной метод, для тех, кто шарит в PHP</a></li>

57 <li><a>Dynamic - плагин нужный для работы</a></li>

58 </ul><h2>Заключение</h2>

59 <p>Процесс внедрения отправки данных с форм обратной связи может показаться сложным, но на самом деле он очень даже простой. Сделав раз - сделаешь много раз.</p>

60 <p>Над статьей работал:<a>Илья Ячменев</a></p>