Посетитель заполняет форму обратной связи на вашем сайте. Заявка уходит на почту, которую вы открываете вечером, или в спам, или вообще никуда: после очередного обновления сайта сломалась отправка писем. Когда вы наконец перезваниваете, человек уже договорился с другим мастером. Форма обратной связи с отправкой в Telegram присылает заявку вам на телефон обычным сообщением, рядом с чатами, на которые вы и так отвечаете весь день.
Ниже разберём, как это настроить с помощью веб-формы Easy Post. Вы вставляете на сайт две строки кода, и каждая заявка приходит вам в Telegram. Плагин ставить не нужно, своего бота создавать тоже. Посетителю Telegram не нужен, поэтому отвечаете вы ему по телефону или на почту, которые он сам впишет, а значит, вопрос о контакте надо настроить так, чтобы ответ на него годился для связи.
Сразу о трёх ограничениях. На странице будет форма Easy Post: ваша нынешняя форма отправлять заявки в Easy Post не умеет, поэтому её придётся заменить. Копию заявки на почту посетитель не получает. И из файлов форма принимает только фото, причём фото остаются на сайте Easy Post и в Telegram не приходят. Приём заявок из вашей нынешней формы, копию заявки посетителю на почту и приём файлов, кроме фото, можно сделать дополнением или индивидуальной доработкой: опишите, что вам нужно, на странице поддержки.
С чего начать
Всё настраивается на сайте easy-post.app. Войдите через Google. На первом экране «Что вы хотите получать?» нажмите «Записи и заявки на услуги»: форма сразу соберётся из шаблона «Заявка на услугу». Это готовый шаблон для услуг с выездом к клиенту, из него и получится форма обратной связи. Откроется страница потока. Поток — это ваша форма вместе с заявками, которые она собирает, и всё, о чём пойдёт речь дальше, делается с неё. Наверху две кнопки, которые понадобятся чаще всего: «Форма» открывает настройки формы, «Заявки» — список пришедших заявок. Ниже жёлтая панель «Осталось сделать», а под ней блок «Где люди отправляют заявки».
Заявки приходят сообщениями в Telegram, поэтому сначала привяжите свой Telegram. В панели «Осталось сделать» нажмите «Проверить форму в Telegram». Откроется Telegram с ботом Easy Post: нажмите внизу чата «Старт» (в англоязычном Telegram — Start). Бот ответит, что Telegram привязан, а следом пришлёт приветствие формы с кнопкой «Начать» (на части тарифов с припиской «Powered by Easy Post»). Нажмите её, и придёт первый вопрос. Ответьте на вопросы так, как ответил бы клиент: пробная заявка придёт сообщением в этот же чат, а страница потока напишет, что форма работает. Пробную заявку потом можно удалить в «Заявках». Если Telegram у вас только на телефоне, на этом шаге откройте страницу потока с телефона. После пробы бот сначала ответит вам как клиенту: «Текстом завершения» и кнопкой «Отправить ещё». Затем пришлёт кнопку «Отправить форму»: она делится ссылкой на бота, а не на веб-форму, поэтому здесь не нужна. И ещё спросит, публиковать ли заявки в канале (это лента в Telegram для читателей). Форме обратной связи канал не нужен: на этот вопрос не отвечайте, а пункт «Добавьте канал, если нужна публикация» в «Осталось сделать» пропустите, он помечен «По желанию».
Форма обратной связи из шаблона «Заявка на услугу»
Шаблон «Заявка на услугу» в Easy Post задаёт семь вопросов, он рассчитан на выезд к клиенту. Форме обратной связи обычно хватает меньшего. Нажмите «Форма» на странице потока. Каждый вопрос там — отдельная карточка: окошко «Название поля, видите только вы» (подпись ответа в вашем сообщении в Telegram), окошко «Текст от бота» (вопрос, который читает посетитель), меню «Тип» и крестик в углу, который удаляет вопрос. Если тип «Кнопки», под текстом вопроса есть ещё окошко с названиями кнопок.
| Вопрос в шаблоне | Что сделать |
|---|---|
| Услуга: кнопки «Услуга 1», «Услуга 2», «Услуга 3», «Другое» | Оставьте. Впишите в окошко кнопок свои услуги через запятую, тогда каждая заявка придёт уже с пометкой, что нужно клиенту. В названии услуги запятой быть не может. |
| Детали: «Коротко опишите задачу:», от 5 до 500 знаков | Оставьте. На странице это большое поле для текста. Ограничения по длине поменять нельзя. |
| Адрес: «Адрес или район:» | Оставьте, если выезжаете к клиенту. Если нет, удалите. |
| Желаемое время: кнопки «Как можно скорее», «Сегодня», «Завтра», «На этой неделе» | Оставьте, если записываете клиентов на выезд или визит. Если нет, удалите. |
| Фото: до трёх, вопрос необязательный | В Telegram фото не приходят никогда: они есть только на сайте, в «Заявках». Если фото не нужны, удалите вопрос. Если оставляете, перепишите его «Текст от бота» своими словами, например «Пришлите фото, если это поможет (до 3):». В тексте шаблона стоит код в фигурных скобках, и на веб-странице посетитель увидит его как есть. |
| Имя: «Ваше имя:» | Оставьте. |
| Телефон: «Номер телефона:», тип «Телефон» | Оставьте, если вы только перезваниваете. Если отвечаете и на почту, поменяйте тип на «Текст», а «Название поля…» и «Текст от бота» — на «Телефон или почта». Тип «Телефон» принимает только цифры, пробелы и знаки + - ( ), поэтому адрес почты он не пропустит. |
Закончив, нажмите «Сохранить» под вопросами: если уйти со страницы без этого, правки пропадут. Если вам пишут жильцы с заявками на ремонт, а вы их арендодатель или управляющий, лучше подойдёт разбор формы заявки на ремонт, а агентствам, которые собирают бриф проекта, удобнее начать с формы приёма заявок для агентства.
Три текста, которые прочтёт посетитель
Ещё три окошка в «Настройках формы» отвечают за то, что написано на странице, а тексты в них изначально писались для бота.
- «Название формы» в самом верху настроек — это заголовок страницы. Подсказка под ним называет его внутренним названием, но веб-форма показывает его каждому посетителю. Изначально там «Заявка на услугу»: замените на «Напишите нам» или на название своей компании.
- «Приветственный текст» из раздела «Сообщения бота» (он ниже на странице настроек) посетитель видит под заголовком формы. Этот же текст бот присылает тому, кто его запускает, поэтому в окошке по умолчанию стоит фраза про нажатие кнопки, а на странице такой кнопки нет. Напишите текст, который подойдёт и туда, и туда, например: Расскажите, что нужно. Ответим в течение рабочего дня.
- «Текст завершения» в том же разделе посетитель видит после нажатия «Отправить», под словом «Отправлено». Что бы там ни стояло сейчас, напишите вместо этого, когда и как вы ответите, например: Спасибо! Перезвоним или напишем на почту в течение рабочего дня.
Затем нажмите «Сохранить». На странице две кнопки «Сохранить», под вопросами и под «Настройками заявок», и любая из них сохраняет всё сразу: и вопросы, и тексты. Ещё ниже, в блоке «Веб-форма», есть третья «Сохранить»: она сохраняет только список сайтов, а вопросы и тексты нет.
Иллюстрация: заголовок, строку под ним и вопросы пишете вы, остальные тексты взяты из продукта; имена и данные вымышлены.
Как поставить форму на сайт
На странице потока найдите блок «Где люди отправляют заявки». Карточка «Веб-форма» в нём должна показывать «Включена · принимает заявки»: поток с первого экрана создаётся с уже включённой формой. Если там «Выключена» (поток из «+ Новый поток»), нажмите переключатель, он сохраняется сразу. В карточке будут «Ссылка на форму», кнопки «Копировать ссылку» и «Открыть форму» и два свёрнутых раздела: «QR-код» и «Код для сайта».
Раскройте «Код для сайта» и нажмите «Скопировать код». Вы получите две строки: рамка, в которой показывается форма, и небольшой скрипт, который подгоняет высоту рамки под форму, чтобы у неё не было своей полосы прокрутки. Теперь откройте страницу контактов в редакторе сайта. Уберите старую форму обратной связи, в том числе её копии в подвале и на других страницах, иначе часть посетителей так и будет отправлять заявки вам на почту. Вставьте две строки на её место, в блок, который принимает HTML-код: в WordPress это блок «Произвольный HTML», в конструкторах страниц вроде Elementor есть похожий элемент HTML. Нажмите «Сохранить», «Обновить» или «Опубликовать» (название зависит от версии WordPress и от того, опубликована ли страница) и откройте страницу: форма должна появиться.
Иллюстрация: тексты взяты из продукта; ссылка сокращена.
Если формы не видно, скорее всего, сайт не принимает код. Если сайт делали не вы, спросите у того, кто делал, какой из случаев ниже ваш. На WordPress.com такой код работает только на платных тарифах с функциями хостинга. На любом сайте WordPress пользователь с ролью «Участник» (Contributor) сохранить его не может: попросите вставить код администратора сайта. В Tilda блок T123 показывает код в редакторе простым текстом, а сама форма появляется только на опубликованной странице. Некоторые конструкторы сайтов вырезают из кода скрипт. Тогда ничего делать не нужно: форма работает, просто с фиксированной высотой и своей полосой прокрутки. Если конструктор вообще не принимает код, поставьте кнопку или ссылку на адрес из «Ссылки на форму».
По умолчанию вашу форму может показать у себя любой сайт. Это можно ограничить, чтобы никто другой не ставил вашу форму к себе на страницы; шаг необязательный. Перейдите по ссылке «На каких сайтах можно встраивать — в настройках формы» рядом с кнопкой «Скопировать код». В поле «Сайты, где можно встраивать форму» впишите адрес своего сайта без пути к странице, каждый вариант с новой строки, например mysite.com и www.mysite.com: вариант с www считается другим сайтом. https:// Easy Post допишет сам. Нажмите «Сохранить» и снова откройте страницу контактов. Если форма пропала с вашего же сайта, в списке не хватает какого-то варианта адреса: допишите его или очистите список, чтобы форму снова мог показывать любой сайт. Ссылка и QR-код работают везде, поэтому ссылку можно поставить и в подпись письма, а QR-код напечатать на листовке.
Что приходит вам в Telegram
Каждая заявка приходит в ваш Telegram одним сообщением от бота Easy Post. В нём ответы с подписями из «Названия поля», строка «🌐 Отправлено через веб-форму» там, где у заявки из бота стояло бы имя отправителя, и в конце ссылка «Открыть заявки». В заголовке стоит название потока, а поток назван по шаблону, «Заявка на услугу», поэтому заголовок выходит «Новая заявка в Заявка на услугу». Чтобы поменять название, нажмите «Редактировать» на странице потока, впишите новое в поле «Название потока» и нажмите «Сохранить поток». Строка «Сохранена в кабинете» значит, что заявка хранится и на сайте, в «Заявках». Кнопок «Одобрить» и «Отклонить» в сообщении нет: никто не ждёт от вас «да» или «нет», вы отвечаете сами, по телефону или на почту из заявки.
Иллюстрация: тексты взяты из бота, подписи полей задаёте вы; имена и данные вымышлены.
Двух вещей в сообщении нет. Фото остаются в «Заявках», и в сообщении даже не сказано, что их прислали, поэтому если вы оставили вопрос о фото, время от времени заглядывайте в «Заявки». И каждый ответ обрезается до 300 знаков, так что длинное описание придёт не целиком; полный текст тоже лежит в «Заявках».
Сообщения приходят в личные чаты, а не в группу: каждый получает их в своём чате с ботом. Если заявки должна видеть и ваша бригада, откройте страницу проекта (на неё ведёт название проекта вверху страницы потока) и нажмите «Участники». Эту кнопку видите только вы. Каждому нужен свой аккаунт Easy Post, после чего он привязывает свой Telegram кнопкой «Привязать Telegram» на странице потока или в «Профиле». Любой участник может и менять форму, поэтому добавляйте только тех, кому это доверяете.
Если нужно, чтобы каждая заявка попадала ещё и в таблицу или CRM, это делает вебхук. Добавляя его, отметьте «Одобрять автоматически», иначе каждая заявка будет ждать, пока вы нажмёте «Одобрить». Вебхуки есть не во всех тарифах; настройка показана в статье про форму запроса сметы.
Tilda, Formspree, плагин для CF7 или эта форма
Отправлять заявки с сайта в Telegram умеют и другие инструменты. Если вы уже пользуетесь одним из них, его может хватить:
- Сайт на Tilda. Tilda сама отправляет заявки из своих форм в Telegram: в боте @TildaFormsBot вы получаете два ключа, вставляете их в «Настройки сайта → Формы → Telegram», а в меню «Контент» блока формы отмечаете Telegram и публикуете страницу (справка Tilda). Форма остаётся вашей, в дизайне сайта, а бота Tilda можно добавить и в группу, чтобы заявки сразу видела вся команда. Если сайт на Tilda, начните с этого.
- Форму для сайта сверстали вручную, и вы хотите её оставить. Такие формы принимают Formspree и Web3Forms. У Formspree сообщение в Telegram о каждой заявке заявлено на всех тарифах, а бесплатный тариф принимает 50 заявок в месяц (тарифы Formspree). Web3Forms относит Telegram к функциям PRO (документация Web3Forms).
- Форма на WordPress сделана в Contact Form 7. Плагин Message Bridge for Contact Form 7 and Telegram пересылает её сообщения в Telegram, но бота в Telegram вы создаёте сами и подключаете его в настройках плагина.
Веб-форма Easy Post подходит, если ничего из этого у вас нет или сайта пока нет вовсе. Это готовая форма: её ставят на сайт двумя строками кода или отправляют ссылкой либо QR-кодом, без своего бота и без месячного потолка на число заявок, но на странице будет форма Easy Post, а не ваша. Если сейчас вы собираете ответы в Google Формах, отличия разобраны в статье Google Формы против Easy Post.
На чём можно споткнуться
- Пробная заявка через веб-форму закрывает панель «Осталось сделать»: страница не знает, что это были вы, и считает заявку настоящей, от посетителя. Ничего не теряется: ссылка, QR-код и код для сайта остаются в блоке «Где люди отправляют заявки». Поэтому Telegram и привязывают сначала через бота. Пробные заявки можно удалить в «Заявках».
- После нажатия «Отправить» у посетителя на странице появляется кнопка «Узнать результат в Telegram», и скрыть её нельзя. При такой настройке туда больше ничего не придёт: бот подтвердит и замолчит, потому что заявку никто не одобряет и не отклоняет. Если посетитель её нажмёт, рядом с заявкой в «Заявках» появится его имя в Telegram.
- Перед отправкой посетитель должен поставить галочку согласия. Ссылка в строке согласия ведёт на политику конфиденциальности easy-post.app, и поменять её нельзя. Если у вашего сайта своя политика конфиденциальности, допишите в неё, что заявки проходят через Easy Post, или попросите об этом того, кто её составлял.
- Свои слова, например «Отправить» и строку согласия, страница показывает на языке браузера посетителя, если это русский, украинский, английский или хинди. Если ни одного из этих языков в настройках браузера нет, эти слова будут на языке вашего бота. Ваши вопросы остаются такими, как вы их написали.
- Защита от спама встроена: проверка, что отправитель не робот, не больше 10 отправок в минуту с одного адреса и 120 в час на всю форму. «Дневной лимит» и «Месячный лимит» в настройках формы для этого не нужны: они считают заявки одного человека и работают только в боте.
- Если выключить поток, страница формы перестанет открываться, а в карточке веб-формы появится «Включена, но поток неактивен: страница не открывается».
- PDF с чертежом или таблица не пройдут: вопрос с фото принимает только JPEG, PNG или WebP до 10 МБ.
- На части тарифов внизу формы стоит «Сделано в Easy Post». В карточке веб-формы написано, на каком тарифе эта подпись убирается.
Настройка за шесть шагов
- Войдите через Google, на первом экране выберите «Записи и заявки на услуги», нажмите «Проверить форму в Telegram», запустите бота, нажмите «Начать» под приветствием и ответьте на вопросы как клиент.
- Нажмите «Форма». Впишите свои услуги в кнопки вопроса «Услуга», оставьте «Адрес» и «Желаемое время», только если выезжаете к клиентам или записываете на время, удалите или перепишите вопрос о фото и настройте вопрос о контакте. Нажмите «Сохранить» под вопросами.
- Поменяйте «Название формы», «Приветственный текст» и «Текст завершения» и нажмите «Сохранить» под «Настройками заявок».
- Проверьте, что карточка «Веб-форма» показывает «Включена · принимает заявки» (если нет, нажмите переключатель), скопируйте код, вставьте его на место старой формы обратной связи и нажмите «Сохранить», «Обновить» или «Опубликовать».
- Отправьте пробную заявку со своего сайта и проверьте сообщение в Telegram. Если хотите, удалите её в «Заявках».
- Если на заявки отвечает кто-то ещё, добавьте его в «Участники» и попросите привязать свой Telegram.
Другие формы под похожие задачи: лид-форма для рекламы, форма заявки для услуг и форма запроса сметы. Все формы по задачам собраны в одном месте — руководство по формам в Telegram-боте.
Только знакомитесь с ботами? Статья Как создать бота в телеграмме без кода объясняет, как они устроены, хотя для этой настройки она не нужна.
