--- title: "Форма обратной связи на сайт: создать бесплатно" description: "Создать форму обратной связи для сайта за 5 минут: одна строка кода, виджет 35 КБ, проверка телефона и почты, защита капчей. Тильда, WordPress, Битрикс." url: https://askyo.ru/forma-obratnoy-svyazi lang: ru last_modified: 2026-09-27 --- Форма для сайта # Форма обратной связи на сайт Одна строка script, и на сайте появляется форма, которая не ломает вёрстку: виджет весит около 35 КБ и живёт в Shadow DOM, а не в тяжёлом iframe. Телефон и почта проверяются при вводе, обращения копятся в одном списке. [Создать форму бесплатно ](https://app.askyo.ru/build)[Документация виджета](https://askyo.ru/embed) Что внутри ## Форма, после которой не надо чистить заявки ### Одна строка кода Вставьте тег script в шаблон сайта, и форма появится там, где вы её поставили. Работает на Тильде, WordPress, Битрикс и любом сайте, куда можно вставить код. ### Виджет 35 КБ в Shadow DOM Форма не тянет за собой iframe на 180-200 КБ и не конфликтует со стилями сайта: разметка изолирована, шрифты и цвета настраиваются под ваш дизайн. ### Проверка телефона и почты Контакт проверяется прямо при вводе, обязательные поля не дают отправить форму пустой. В список не попадают заявки, по которым некуда перезвонить. ### Защита от спама капчей В форму добавляется блок Yandex SmartCaptcha, он отсекает ботов до отправки. Блок капчи доступен с тарифа Pro. ### Обращения в одном списке Заявки копятся во входящих внутри сервиса: видно, что пришло, когда и с какой страницы. Выгрузка в CSV или XLSX в один клик. ### Оповещения в Telegram и CRM Новые заявки уходят в Telegram или на ваш webhook с тарифа Pro, готовые пресеты Битрикс24, AmoCRM и Google Sheets открываются с тарифа Team. На бесплатном заявки видны во входящих. Варианты ## Какие формы собирают чаще всего ### Обратная связь и вопросы Классическое «напишите нам»: имя, контакт, сообщение. Минимум полей, чтобы человек дошёл до кнопки. ### Заявка на услугу Задача, срок и бюджет вместе с контактом, чтобы менеджер перезванивал подготовленным. Лишние поля прячутся условной логикой. ### Обратный звонок Два поля и кнопка: имя и телефон с проверкой формата. Всплывает по клику или в нужный момент на странице. ### Оценка качества обслуживания Шкала и открытый комментарий после покупки или визита. Для регулярного замера лояльности есть отдельный формат NPS. ### Сообщение об ошибке Что сломалось, где и как повторить, с приложенным файлом или скриншотом. Обращения складываются в один список. ### Форма в подвале сайта Компактная форма подписки или связи на каждой странице. Виджет лёгкий, поэтому не бьёт по Core Web Vitals. ## Как сделать форму обратной связи для сайта Собрать форму в конструкторе аскио, настроить поля и встроить её на сайт одной строкой кода. 1. ### Соберите форму Зарегистрируйтесь без карты и добавьте поля: имя, телефон, почта, сообщение, загрузка файла. Отметьте обязательные и включите проверку ввода. 2. ### Настройте вид Подберите цвета и шрифты под сайт, задайте текст кнопки и сообщение, которое человек увидит после отправки. 3. ### Встройте на сайт Скопируйте строку script из окна публикации и вставьте в шаблон страницы. Виджет подхватит форму автоматически. 4. ### Принимайте обращения Заявки копятся во входящих и выгружаются в Excel. На тарифе Pro и выше подключаются оповещения в Telegram и передача в CRM. Разбор О формах обратной связи 1. [Что такое форма обратной связи](#chto-takoe-forma) 2. [Виды форм обратной связи](#vidy-form) 3. [Какие поля ставить в форму обратной связи: 10 примеров](#polya-formy) 4. [Как поставить форму обратной связи на Тильду](#forma-na-tildu) 5. [Как поставить форму обратной связи на WordPress](#forma-na-wordpress) 6. [Как поставить форму обратной связи на 1С-Битрикс](#forma-na-bitriks) 7. [Форма в странице, кнопка в углу или окно по клику](#rezhimy-vidzheta) 8. [Куда приходят заявки и почему не на почту](#kuda-prihodyat-zayavki) 9. [Защита формы обратной связи от спама](#zashchita-ot-spama) 10. [Ошибки, из-за которых форма теряет заявки](#oshibki-form) ## Что такое форма обратной связи Форма обратной связи это блок на сайте, через который посетитель пишет компании, не открывая почту и мессенджер: оставляет имя, контакт и сообщение и нажимает «Отправить». Обращение сохраняется у владельца сайта, а человек сразу видит подтверждение. Это самый короткий путь от вопроса посетителя до ответа менеджера. Хорошая форма обратной связи решает две задачи сразу. Посетителю она даёт понятный способ связаться без поиска адреса в подвале. Компании даёт заявки в одном месте и в одном формате: телефон записан цифрами, а не «звоните после шести», сообщение привязано к странице, с которой его отправили. ## Виды форм обратной связи Формы различаются тем, чего вы ждёте от человека после отправки. От этого зависит число полей и место на странице. | Вид формы | Зачем | Поля | | ------------------------------ | ------------------------------------- | ------------------------------------- | | Обратный звонок | Человек хочет поговорить, а не писать | Имя, телефон, удобное время | | Заявка на услугу | Менеджер готовит предложение | Контакт, задача, срок, бюджет | | Вопрос | Консультация до покупки | Контакт, тема, сообщение | | Жалоба или сообщение об ошибке | Разобрать проблему без переписки | Что случилось, где, файл или скриншот | | Отзыв | Оценка после покупки или визита | Звёзды или смайлы, комментарий | | Форма в подвале | Связь с любой страницы | Контакт и сообщение | | Всплывающая кнопка | Форма под рукой, но не мешает читать | Любой набор, открывается по клику | Для развёрнутой заявки удобнее готовые шаблоны: [«Контактная форма»](https://askyo.ru/shablony/contact) на шесть блоков, [«B2B лид-форма»](https://askyo.ru/shablony/lead-b2b) с размером компании и каналом связи, [«Форма обратной связи»](https://askyo.ru/shablony/feedback-form) с ветвлением по причине обращения. Для оценки качества после обращения есть [CSAT](https://askyo.ru/shablony/csat-support), для отзыва о продукте шаблон [«Отзыв о продукте»](https://askyo.ru/shablony/product-feedback). ## Какие поля ставить в форму обратной связи: 10 примеров Каждое поле отнимает у человека несколько секунд и немного желания дойти до кнопки. Поэтому в форму обратной связи ставят только поля, без которых вы не сможете ответить. Вот из чего обычно выбирают: | Поле | Зачем | Как настроить | | ---------------------------- | ------------------------------------- | --------------------------------------------------------------------------------------------------------------- | | Имя | Обратиться по имени в ответе | [Короткий текст](https://askyo.ru/tipy-voprosov/short-text), обязательное | | Телефон | Перезвонить | [Телефон](https://askyo.ru/tipy-voprosov/phone) с проверкой формата | | Почта | Ответить письмом | [Почта](https://askyo.ru/tipy-voprosov/email) с проверкой формата | | Тема обращения | Сразу отдать нужному сотруднику | [Выпадающий список](https://askyo.ru/tipy-voprosov/dropdown) из 3-6 тем | | Сообщение | Суть вопроса своими словами | [Длинный текст](https://askyo.ru/tipy-voprosov/long-text) | | Удобный способ связи | Не звонить тем, кто просил написать | [Один вариант](https://askyo.ru/tipy-voprosov/single-choice): звонок, мессенджер, почта | | Удобное время | Звонить, когда человек может говорить | Выпадающий список интервалов | | Файл или скриншот | Показать ошибку или документ | [Загрузка файла](https://askyo.ru/tipy-voprosov/file-upload), с тарифа Pro | | Оценка | Понять настроение до чтения текста | [Смайлы](https://askyo.ru/tipy-voprosov/rating-emoji) или [звёзды](https://askyo.ru/tipy-voprosov/rating-stars) | | Согласие на обработку данных | Требование 152-ФЗ при сборе контактов | [Согласие](https://askyo.ru/tipy-voprosov/consent), обязательное | Для формы «напишите нам» хватает четырёх полей: имя, контакт, сообщение, согласие. Остальное включайте, только если по нему кто-то будет действовать. Поля, которые нужны не всем, можно показывать по условию: блок «приложите скриншот» появляется, только если выбрана тема «ошибка на сайте». ## Как поставить форму обратной связи на Тильду 1. Соберите форму в аскио, опубликуйте её и откройте вкладку «Виджет» в окне публикации. Скопируйте фрагмент кода. 2. В редакторе страницы Тильды добавьте блок T123 «HTML-код» из раздела «Другое». 3. Вставьте код в блок и сохраните. 4. Опубликуйте страницу и проверьте форму на опубликованной версии. В редакторе Тильды скрипты не выполняются, поэтому на месте блока форма не видна. Это нормально: она появится на опубликованной странице. ## Как поставить форму обратной связи на WordPress Плагин для формы ставить не нужно. В редакторе блоков откройте страницу, добавьте блок «Произвольный HTML» и вставьте туда код виджета. Если форма нужна на всех страницах, например в сайдбаре или подвале, добавьте тот же блок в разделе «Внешний вид → Виджеты». Сохраните и откройте страницу на сайте: форма подгрузится вместе с ней. Если тема или плагин безопасности вырезают тег script из содержимого, вставьте код в шаблон темы или через плагин для вставки кода в страницы. ## Как поставить форму обратной связи на 1С-Битрикс Откройте нужную страницу в режиме правки, переключите визуальный редактор в режим кода (HTML) и вставьте фрагмент виджета туда, где должна стоять форма. Сохраните страницу. В Битриксе часто стоит ограничение на вставку скриптов в содержимое страниц: редактор может молча вырезать тег script. Тогда вставьте код в шаблон сайта (например, перед закрывающим тегом body, если нужна кнопка в углу на всех страницах) или во включаемую область. Подробности про атрибуты и события виджета в [документации для разработчиков](https://askyo.ru/embed). ## Форма в странице, кнопка в углу или окно по клику Одну и ту же форму обратной связи можно показать тремя способами, режим выбирается при копировании кода: - В странице: форма встаёт в то место, куда вставлен код. Подходит для страницы «Контакты» и подвала. - Кнопка в углу: плавающая кнопка со своим текстом и иконкой, форма открывается по нажатию. Подходит, если форма нужна на всех страницах, но не должна занимать место. - Окно по клику: форма открывается, когда человек нажимает на любой ваш элемент с нужным атрибутом, например на кнопку «Задать вопрос» в карточке товара. Для любого режима можно скрыть форму на телефонах и ограничить список сайтов, на которых виджет разрешено показывать. Почему виджет не тянет за собой iframe, разобрано в статье [про Shadow DOM](https://askyo.ru/blog/widget-na-saite), а общие сценарии встраивания на странице [опрос на сайт](https://askyo.ru/opros-na-sayt). ## Куда приходят заявки и почему не на почту Все обращения копятся во входящих внутри сервиса, их можно выгрузить в CSV для Excel. Писем о новых заявках аскио не отправляет: на это легко рассчитывать и так же легко пропустить, когда письмо ушло в спам. Вместо почты с тарифа Pro подключается webhook: каждая новая заявка уходит на ваш адрес, например в Telegram-бот менеджеров или в CRM. Пошаговая схема с AmoCRM и Telegram в статье [«Webhook + AmoCRM + Telegram»](https://askyo.ru/blog/webhook-amocrm-telegram). На бесплатном тарифе заявки не теряются, их просто нужно смотреть во входящих. ## Защита формы обратной связи от спама - Проверка формата телефона и почты отсекает мусор вида «asdf» ещё до отправки. - Обязательные поля не дают отправить пустую форму. - Блок [капчи](https://askyo.ru/tipy-voprosov/captcha-block) Yandex SmartCaptcha останавливает ботов. Доступен с тарифа Pro. - Ограничение сайтов, на которых разрешён виджет, не даёт встроить вашу форму на чужую страницу. ## Ошибки, из-за которых форма теряет заявки - Семь обязательных полей там, где хватило бы трёх. Человек хотел задать вопрос, а его просят указать ИНН. - Нет подтверждения после отправки. Посетитель не уверен, ушло ли сообщение, и отправляет его трижды или уходит к конкуренту. - Поле «телефон» без проверки. В базе оказываются номера без кода города и с лишней цифрой. - Заявки никто не смотрит. Если оповещений нет, назначьте человека, который проверяет входящие хотя бы дважды в день. - Форма на сайте, который долго грузится. Тяжёлый iframe добавляет сотни килобайт, и на мобильном интернете форма появляется, когда посетитель уже ушёл. Если сравниваете сервисы для формы на сайт, посмотрите [сравнение аскио и Яндекс Форм](https://askyo.ru/compare/yandex-forms). Когда вместо короткого обращения нужны подробные данные о клиенте, соберите [анкету](https://askyo.ru/anketa): там больше полей и логики показа. Другие виды форм, от заявки до брифа, собраны на странице [конструктора форм](https://askyo.ru/konstruktor-form). Дальше ## Готовые шаблоны Откройте шаблон, поменяйте формулировки под себя и опубликуйте. Вопросы, логика и настройки приходят вместе с ним. - ### [Форма обратной связи](https://askyo.ru/shablony/feedback-form) Умная форма с ветвлением: пользователь выбирает причину обращения и получает свой набор вопросов. 20 блоков · с ветвлением - ### [Контактная форма](https://askyo.ru/shablony/contact) Минимум полей — для сайта или подписной страницы. 6 блоков - ### [CSAT — оценка обращения](https://askyo.ru/shablony/csat-support) Короткий пульс по качеству поддержки: смайл, что сработало, что нет. 4 блока - ### [Отзыв о продукте](https://askyo.ru/shablony/product-feedback) Звёзды, NPS, тонкая семантика и поле для развёрнутого мнения. 5 блоков - ### [B2B лид-форма](https://askyo.ru/shablony/lead-b2b) Контакт, размер компании, интересы и канал связи. 13 блоков [Все шаблоны: Обратная связь](https://askyo.ru/shablony/kategoriya/feedback)[Каталог шаблонов](https://askyo.ru/shablony) ## Читайте в блоге - ### [Форма обратной связи, из которой можно что-то понять](https://askyo.ru/blog/shablon-formy-obratnoy-svyazi) Одно поле «ваше сообщение» собирает бесполезные ответы. Разбираем шаблон формы обратной связи на 20 блоков, из которых человек видит пять. - ### [Виджет опросов в Shadow DOM: почему iframe устарел](https://askyo.ru/blog/widget-na-saite) iframe весит 200+ КБ, ломает поисковую индексацию и плохо адаптируется. Shadow DOM-виджет это современный путь встраивания. Разбираем технически. - ### [Webhook + AmoCRM + Telegram: обработка опросов](https://askyo.ru/blog/webhook-amocrm-telegram) Ответ из опроса должен мгновенно превращаться в задачу, лида или уведомление. Показываем три рабочих сценария на Webhook без кода. [Все статьи блога](https://askyo.ru/blog) Частые вопросы ## Вопросы про форму обратной связи Куда приходят заявки с формы? Во входящие внутри сервиса: там видно каждое обращение, дату и страницу, с которой его отправили. Выгрузка в CSV доступна на любом тарифе, в XLSX с тарифа Team. С тарифа Pro подключаются оповещения в Telegram и передача в Битрикс24, AmoCRM, Google Sheets или на ваш webhook. Приходит ли уведомление на почту? Нет, писем о новых заявках сервис не отправляет. Оповещения работают через Telegram и webhook на тарифе Pro и выше, а без них заявки нужно смотреть во входящих. Если критично получать сигнал мгновенно, настраивайте Telegram. Как защитить форму от спама? Добавьте в форму блок капчи: используется Yandex SmartCaptcha, она отсекает ботов до отправки. Блок доступен с тарифа Pro. Дополнительно помогают обязательные поля с проверкой формата: примитивные боты на них спотыкаются. Форма не сломает вёрстку сайта? Нет. Виджет рендерится в Shadow DOM, поэтому его стили и стили сайта изолированы друг от друга. Весит около 35 КБ против 180-200 КБ у решений на iframe, так что на скорость страницы влияет заметно меньше. Работает на Тильде и WordPress? Да, и на Битриксе тоже. Нужна только возможность вставить произвольный код в страницу или шаблон. Для разработчиков есть JS API с событиями жизненного цикла и примерами для React и Vue. Форма обратной связи бесплатная? Да. На бесплатном тарифе доступны до 5 форм и 150 обращений всего, проверка полей, условная логика и виджет на сайт. Карта не нужна. Капча и оповещения в Telegram и CRM открываются на Pro. Какие поля нужны в форме обратной связи? Для формы «напишите нам» достаточно четырёх: имя, телефон или почта, сообщение и согласие на обработку данных. Тему обращения добавьте, если заявки разбирают разные люди, а загрузку файла, если клиенты присылают скриншоты или документы. Каждое лишнее поле снижает число отправленных форм. Нужен ли плагин, чтобы поставить форму на WordPress? Нет. Код виджета вставляется в блок «Произвольный HTML» на странице или в разделе «Внешний вид → Виджеты», если форма нужна на всех страницах. Плагин понадобится, только если тема или плагин безопасности вырезают тег script из содержимого: тогда код вставляют в шаблон темы. ## Поставьте форму на сайт за 5 минут Одна строка кода, виджет 35 КБ, проверка контактов. Бесплатный тариф без карты. [Создать форму бесплатно ](https://app.askyo.ru/build)[Документация виджета](https://askyo.ru/embed)