Форма для опроса и квиза на сайте — без бэкенда

Зачем сайту опросы и квизы

Обычная форма собирает заявку. Опрос и квиз работают иначе: они вовлекают посетителя и в обмен на «усилие» дают ценность — результат, подборку или расчёт. Благодаря этому конверсия в заявку у квизов часто выше, чем у стандартных форм.

Где это работает:

• опрос о продукте — узнаёте предпочтения аудитории;
• опрос «как вы узнали о нас» — аналитика источников трафика;
• квиз-подбор — «подберите решение под ваш бюджет»;
• квиз для лендинга — интерактивная заявка с результатом;
• викторина — тест, который пользователи проходят ради интереса.

И опрос, и квиз легко построить на обычном HTML и отправить ответы через API — как любую другую форму.

Чем квиз отличается от опроса

Опрос собирает мнения и факты. Посетитель отвечает на вопросы, вы получаете данные. Ответы обычно короткие, а в конце опроса нет «результата» — он нужен вам, а не респонденту.

Квиз — это интерактивный сценарий. Посетитель отвечает на серию вопросов и получает результат: подборку, рекомендацию, скидку или расчёт. Квиз почти всегда завершается сбором контакта — телефона или email, чтобы отправить результат.

Для опроса важен охват ответов, для квиза — лиды. От этого зависит структура полей и CTA-кнопки.

Форма для опроса: пример кода

Опрос может быть одним вопросом с вариантами ответа. Всё, что нужно, — HTML с input type="radio" и скрипт, который отправляет выбранный вариант в FormToMail.

<form id="survey-form">
  <h3>Как вы узнали о нас?</h3>

  <label><input type="radio" name="source" value="Поиск"> Поиск</label>
  <label><input type="radio" name="source" value="Реклама"> Реклама</label>
  <label><input type="radio" name="source" value="Рекомендация"> Рекомендация</label>
  <label><input type="radio" name="source" value="Другое"> Другое</label>

  <button>Отправить ответ</button>
</form>

<script>
document.getElementById("survey-form").addEventListener("submit", async (event) => {
  event.preventDefault();

  const source = event.target.elements.source.value;

  await fetch("https://api.formtomail.ru/send", {
    method: "POST",
    headers: {
      "Authorization": "Bearer YOUR_API_KEY",
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      title: "Ответ на опрос",
      body: { "Как вы узнали о нас?": source }
    })
  });
});
</script>

При отправке вы получите письмо с заголовком «Ответ на опрос» и ответом респондента. Несколько вопросов добавляются так же — каждый становится отдельным полем в body.

Форма для квиза: пример кода

Квиз — тот же набор вопросов, но в конце обязательное поле для контакта: телефон или email, чтобы выслать результат. В FormToMail результат уходит вместе со всеми ответами.

<form id="quiz-form">
  <p>1. Какой цвет нравится больше?</p>
  <label><input type="radio" name="q1" value="Синий"> Синий</label>
  <label><input type="radio" name="q1" value="Зелёный"> Зелёный</label>

  <p>2. Что для вас важнее?</p>
  <label><input type="radio" name="q2" value="Цена"> Цена</label>
  <label><input type="radio" name="q2" value="Качество"> Качество</label>

  <input name="phone" placeholder="Телефон для результата">
  <button>Узнать результат</button>
</form>

<script>
document.getElementById("quiz-form").addEventListener("submit", async (event) => {
  event.preventDefault();

  const q1 = event.target.elements.q1.value;
  const q2 = event.target.elements.q2.value;
  const phone = event.target.elements.phone.value;

  await fetch("https://api.formtomail.ru/send", {
    method: "POST",
    headers: {
      "Authorization": "Bearer YOUR_API_KEY",
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      title: "Квиз: результат",
      body: {
        "Вопрос 1": q1,
        "Вопрос 2": q2,
        "Телефон": phone
      }
    })
  });
});
</script>

Менеджер видит все ответы на вопросы и телефон клиента — этого достаточно, чтобы перезвонить, уточнить детали и довести до сделки.

Как подключить без бэкенда

Шаги одинаковы для опроса и квиза:

• создайте бесплатный API-ключ в личном кабинете;
• укажите получателей: email (электронную почту) и/или Telegram (Телеграм);
• вставьте HTML-форму и скрипт на страницу сайта;
• замените YOUR_API_KEY на ваш ключ;
• отправьте тестовый ответ — он придёт на почту и в Telegram.

Другие примеры для HTML, Vue, React, PHP, Python и cURL — на странице примеров кода, а полное описание параметров API — в документации.

Куда отправляются ответы

Ответы опроса и результаты квиза попадают туда, куда вы настроили API-ключ:

• email (электронная почта) — письмо с заголовком и полями формы;
• Telegram (Телеграм) — уведомление боту, удобно получать на смартфон;
• все каналы сразу — письмо дублируется и на почту, и в Telegram.

Так ответы опроса можно собирать в общей почте команды, а результаты квизов — мгновенно видеть в Telegram и отвечать клиенту прямо из чата.

Какой формат выбрать

Если нужны данные о посетителях — делайте опрос. Если нужны контакты и вовлечение — квиз. Форма при этом и там и там подключается одинаково.

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

Чем квиз отличается от опроса?

Опрос собирает мнения и ответы, а квиз — это интерактивная игра с вопросами и результатом для посетителя. Квиз обычно завершается сбором контактов.

Нужен ли бэкенд для опроса или квиза?

Нет. FormToMail принимает ответы через API и отправляет их на email (электронную почту) и в Telegram. Достаточно HTML-формы и небольшого скрипта.

Куда приходят ответы опроса и результаты квиза?

На email (электронную почту) и в Telegram (Телеграм) — получателей вы указываете при создании API-ключа.

Вывод

Опрос и квиз — отличные инструменты для аналитики и сбора лидов. Их легко сделать на чистом HTML, а ответы приходят на email (электронную почту) и в Telegram (Телеграм) без бэкенда.

Подключите опрос или квиз за 5 минут: создайте API-ключ, вставьте форму и начните получать ответы.

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