Как сделать сайт-анкету: форма и заявки в 2026 году

Сайт-анкету можно собрать как одну страницу: короткое объяснение, вопросы, согласие на обработку данных, кнопка отправки и экран подтверждения. Самый быстрый путь без кода состоит из конструктора формы и страницы с встраиваемым блоком. Свой HTML нужен, когда важны особый дизайн, сложная логика или интеграция с вашей системой.

Что должно получиться в конце

Рабочий результат выглядит так: человек понимает цель анкеты, заполняет только нужные поля, видит ошибки до отправки, получает подтверждение, а владелец получает запись с датой и источником. Если заявка появилась только в интерфейсе, но не дошла до таблицы, почты или CRM, задача не выполнена.

• Исходные условия: известна цель анкеты, получатель ответов и следующий шаг после заполнения.
• Ожидаемый результат: одна опубликованная ссылка, которая открывается на телефоне и компьютере.
• Обязательная проверка: тестовая заявка доходит в хранилище, а повторная отправка не создаёт путаницу.
• Частые сбои: обязательное поле не объяснено, письмо попало в спам, встраиваемая форма обрезалась, человек не понял, была ли отправка.
• Ограничение: для медицинских, финансовых, паспортных и других чувствительных данных нужен отдельный разбор требований и защищённого хранения.

Сначала спроектируйте вопросы

Начинайте не с цвета кнопки, а с решения, которое будет принято по ответам. Для каждого поля задайте вопрос: «Что изменится, если ответа не будет?» Если ничего не изменится, удалите поле. Такой фильтр сокращает анкету и снижает риск собирать лишние данные.

Разделите поля на три группы. Первая помогает связаться, например имя и выбранный канал. Вторая описывает задачу, например формат проекта и желаемый результат. Третья нужна для маршрутизации, например город или удобное время. Не просите точный адрес, документы и платёжные сведения, если процесс этого не требует.

1. Запишите цель анкеты одним предложением: кто отвечает, что вы решаете по ответу и что человек получит дальше.
2. Составьте полный список вопросов, затем оставьте только те, которые влияют на решение или обратную связь.
3. Выберите тип поля: короткая строка для имени, email для почты, варианты выбора для фиксированного списка, многострочное поле для описания.
4. Отметьте обязательными только критичные поля. Рядом с вопросом объясните формат или ограничение.
5. Сделайте отдельный текст после отправки: что принято, когда и каким способом будет следующий контакт.

Хорошая анкета собирает не максимум сведений, а минимум данных, достаточный для следующего понятного действия.

Если сначала нужно увидеть расположение блоков, используйте инструкцию по макету сайта. Для сайта-анкеты достаточно черновика из пяти зон: заголовок, польза, вопросы, согласие, подтверждение.

По теме: Как сделать ответы на сайте: FAQ без лишнего JavaScript

Как выбрать способ сборки

Выбирайте по правилу. Если нужно быстро опубликовать анкету и получать ответы в кабинете, берите конструктор форм. Если форма должна выглядеть частью существующего сайта, используйте встраивание. Если данные уходят в собственную базу, нужна сложная проверка или личный кабинет, делайте серверную форму.

Tally поддерживает стандартное встраивание, всплывающую форму и полноэкранный вариант; встраивание заявлено как бесплатная функция. Параметры страницы можно передавать в скрытые поля, чтобы сохранить источник перехода. Это описано в официальной инструкции Tally по embed. Скрытые поля доступны в редакторе через отдельный блок, что подтверждает официальная справка Tally.

• Отдельная форма по ссылке подходит для опроса, регистрации и быстрого теста идеи.
• Форма внутри страницы подходит, если до вопросов нужно объяснить услугу, показать примеры или ответить на возражения.
• Собственный HTML подходит, если уже есть разработчик, сервер и понятная схема хранения.
• Обычная ссылка на почту не подходит, если ответы нужно сравнивать, фильтровать и не терять.

Как собрать сайт-анкету без кода

Сначала создайте форму в выбранном сервисе и отправьте тестовый ответ по прямой ссылке. Только после этого встраивайте её в страницу. Так проще понять, где ошибка: внутри формы или в коде сайта.

1. Создайте пустую форму и добавьте заголовок с конкретным результатом, например «Ответьте на вопросы, чтобы получить подходящий вариант программы».
2. Добавьте поля по подготовленной карте. Для длинной анкеты разделите вопросы на экраны и показывайте прогресс, но не дробите каждый вопрос в отдельный шаг без причины.
3. Настройте уведомление владельцу и место хранения ответов. Не используйте личный чат как единственное хранилище.
4. Добавьте страницу подтверждения с ожидаемым сроком и способом связи. Не обещайте мгновенный ответ, если его никто не обеспечивает.
5. Опубликуйте форму и выполните тест по прямой ссылке в режиме инкогнито.
6. Откройте страницу сайта, вставьте код из раздела Share или Embed, задайте достаточную высоту и проверьте прокрутку на узком экране.
7. Добавьте ссылку на правила обработки данных и отдельное действие согласия, если вы собираете персональные данные. Текст и порядок согласия согласуйте с требованиями вашей ситуации.

В российском законе согласие описано как конкретное, предметное, информированное, сознательное и однозначное, а обязанность доказать его получение возложена на оператора. Актуальная редакция приведена в статье 9 закона о персональных данных. Один шаблон чекбокса не заменяет юридическую проверку именно вашего процесса. При работе с данными граждан России отдельно проверьте локализацию базы данных и трансграничную передачу, прежде чем использовать иностранный сервис форм.

По теме: Как сделать описание сайта: лид и meta description

Как сделать свою HTML-форму

В собственной форме каждый элемент ввода должен иметь понятную подпись. Связка label и input помогает экранным дикторам и увеличивает область нажатия, это объясняет справочник MDN по label. Атрибут required не отправляет пустое обязательное поле, но он не заменяет проверку на сервере.

<form action="/api/application" method="post">
  <label for="name">Как к вам обращаться</label>
  <input id="name" name="name" autocomplete="name" required>

  <label for="task">Что вы хотите получить</label>
  <textarea id="task" name="task" maxlength="1000" required></textarea>

  <button type="submit">Отправить анкету</button>
</form>

Браузерная проверка помогает сразу подсветить неверный формат, но её легко обойти. MDN прямо рекомендует проверять отправленные данные и на сервере, даже если поля уже валидируются в браузере. Подробности есть в официальном руководстве по валидации форм. Сервер должен повторно проверить длину, типы и допустимые значения, а затем вернуть понятный успех или ошибку.

Если вы только начинаете с HTML, сначала пройдите путь создания сайта с нуля. Не вставляйте в страницу ключи к таблице, CRM или почтовому сервису. Всё, что видно в коде браузера, нельзя считать секретом.

Проверка по четырём состояниям

Не ограничивайтесь одной успешной заявкой. Проверьте четыре состояния: пустая форма, неверный формат, успешная отправка и недоступный сервер. Для каждого должно быть понятно, что произошло и что делать дальше.

• Пусто: обязательные поля подсвечены, фокус переходит к первому, уже введённые данные не исчезают.
• Ошибка формата: рядом с полем написано, что исправить, а не только «Что-то пошло не так».
• Успех: виден отдельный экран подтверждения, запись появилась в хранилище, уведомление дошло получателю.
• Сбой сети: кнопка не создаёт дубликаты, человек может повторить отправку и понимает, что первая попытка не подтверждена.
• Телефон: поля помещаются по ширине, клавиатура не закрывает кнопку, форму можно пройти без масштабирования.
• Доступность: по анкете можно пройти клавишей Tab, подписи читаются отдельно от подсказок внутри полей.

Если заявки не доходят, проверяйте по порядку: появилась ли запись в кабинете формы, сработала ли интеграция, дошло ли письмо, не отфильтровал ли его почтовый сервис. Если форма обрезана, откройте её напрямую, затем проверьте высоту контейнера и скрипт встраивания. Если ответы приходят без источника, добавьте скрытое поле и передавайте только нужные параметры страницы.

Сайт-анкету не стоит использовать как замену защищённой системе для чувствительных сведений, как единственный канал экстренной связи или как автоматическое решение, влияющее на права человека. Для простой заявки из имени и контакта форма подходит. Для сложного отбора с документами и юридическими последствиями сначала спроектируйте хранение, доступы и ручную проверку.

Частые вопросы

Можно ли сделать сайт-анкету бесплатно?

Да, для теста можно использовать бесплатное встраивание формы и бесплатный статический хостинг. До запуска проверьте лимиты выбранного сервиса, экспорт ответов и наличие нужных уведомлений.

Сколько вопросов оставить?

Столько, сколько влияет на следующий шаг. Начните с контакта, задачи и одного вопроса для маршрутизации. Остальное перенесите в последующий разговор, если без этих сведений можно ответить.

Нужна ли отдельная страница после отправки?

Да, она подтверждает успех и объясняет следующий шаг. Без неё человек может нажать кнопку повторно и создать дубликат.

Как принимать подписку на новости через такую форму?

Не смешивайте заявку и рассылку в один неясный пункт. Для подписки нужен отдельный понятный сценарий; его структура разобрана в статье как сделать подписку на сайт.