Марина собрала лендинг услуг в Cursor и попросила: «сделай квиз из четырех вопросов». Страница получилась красивой, но после кнопки «Отправить» ничего не произошло — она не знала, что ответы нужно отдельно подключить к Formspree или Make. Знакомая боль: в поиске десятки обзоров Marquiz и Tilda, а вам нужен свой квиз без ежемесячной подписки. Ниже — как за один вечер собрать квиз на сайте в Cursor AI, отправить заявки в Telegram или Google Таблицу и получить рабочую ссылку для рекламы.
Квиз на сайте в Cursor AI — это один файл index.html с пошаговыми экранами, без React и npm. Ответы уходят через Formspree (до 50 заявок в месяц бесплатно) или webhook Make.com в таблицу и Telegram. Публикация — drag-and-drop на vercel.com/drop. Оптимум: 3-5 вопросов, прохождение до двух минут, тестовая заявка до запуска рекламы.
По Яндекс Вордстат запрос «квиз на сайте» набирает 351 показ в месяц — в 16 раз чаще узкого «сделать квиз на сайт» (22 показа). В выдаче доминируют SaaS-конструкторы, а связка «один HTML + Cursor + Formspree» почти не попадает в топ. При этом на GitHub полно простых квизов без бэкенда, а Vercel Drop с июня 2026 позволяет выложить папку с index.html без Git и командной строки.
Качественный маркетинговый квиз по данным AdsQuiz конвертирует в 9-30% против 1-3% у обычной формы. Ниже — один путь без девяти конструкторов и без штатного программиста.
Определите цель квиза: сегментация, подбор услуги или бонус
Квиз — это не «еще одна форма», а короткий диалог: один вопрос на экран, в конце персональный результат и контакт. Без цели легко набить десять вопросов и потерять людей на втором шаге.
| Цель | Пример вопроса | Что на финальном экране |
|---|---|---|
| Сегментация лида | «Какой бюджет на проект?» | Рекомендация тарифа + поле телефона |
| Подбор услуги | «Что важнее: скорость или экономия?» | Название пакета + кнопка «Получить расчет» |
| Бонус за прохождение | «Сколько заявок в месяц?» | Чек-лист или скидка + имя и email |
AdsQuiz и Albato сходятся: оптимально 3-6 вопросов, максимум 5-7. На практике четыре шага с прогрессом «2 из 4» дают лучшую доходимость, чем длинный опросник. Типичная ошибка — спрашивать телефон в начале. Оставьте имя и контакт на финале, когда человек уже видит свой результат.
Делайте: один четкий сценарий под рекламу. Не делайте: смешивать «подбор услуги» и «опрос удовлетворенности» в одном квизе.
Соберите квиз в Cursor Agent: один index.html без npm
Cursor AI — редактор, где вы описываете задачу текстом, а агент пишет код за вас. Для квиза не нужны React, npm и сборщики: достаточно одного index.html, стилей через Tailwind CDN (подключается ссылкой из интернета) и простого JavaScript для переключения шагов.
- Создайте папку проекта на компьютере, например quiz-landing, и откройте ее в Cursor.
- Добавьте правило в файл .cursor/rules/quiz.mdc: один HTML-файл, без npm, vanilla JS, шаги через currentQuestionIndex и show/hide блоков — как в открытых quiz-проектах на GitHub.
- Дайте промпт агенту: «Сделай квиз из 4 вопросов в одном index.html: Tailwind CDN, один вопрос на экран, кнопки Далее и Назад, прогресс, финальный экран с полями имя и телефон».
- Проверьте локально: откройте index.html двойным кликом в браузере — страница должна листаться без сервера.
- Уточните дизайн вторым промптом: цвета бренда, мобильная верстка, текст кнопки на финале.
На GitHub типичный паттерн — data, display и control: вопросы, экран и логика «Далее». Попросите Cursor разделить их — так проще менять тексты. Часто ломается так: агент тянет React «на всякий случай». Правило quiz.mdc отсекает лишнее.
Схема сборки:
Папка на диске → правило quiz.mdc → промпт в Cursor Agent → index.html → двойной клик в браузере → правки текстом
Для первого квиза достаточно Cursor Agent. Настройку MCP можно отложить — см. подключение MCP в Cursor, если захотите расширить сценарий.
Настройте вопросы и UX: один экран, шаг назад, и финальный CTA
UX квиза проще, чем кажется: человек всегда понимает, на каком он шаге и что будет дальше. Один вопрос — один экран. Кнопка «Далее» активна только после выбора варианта. «Назад» не сбрасывает уже выбранные ответы.
На финальном экране покажите персональный результат: «Вам подходит пакет Стандарт» или «Ваш бонус — чек-лист из 12 пунктов». Под результатом — одно поле контакта и кнопка с глаголом действия: «Получить расчет», а не сухое «Отправить».
В реальном проекте часто забывают мобильную проверку: кнопки крупные, вопрос короткий, прогресс «3 из 4» снижает отказы.
Делайте: варианты ответов кнопками, не выпадающим списком. Не делайте: обязательный email на первом экране — конверсия падает.
Подключите отправку ответов: Formspree или Make.com
Главная ловушка истории Марины: красивый квиз без «трубы» для заявок. После «Отправить» данные должны попасть туда, где вы их увидите — почта, таблица или Telegram.
| Критерий | Formspree | Make.com + webhook |
|---|---|---|
| Старт | Регистрация, form ID, скрипт с unpkg | Сценарий: Webhook → Google Sheets → Telegram |
| Лимит бесплатно | 50 заявок/мес., история 30 дней | Зависит от тарифа Make, гибче при росте |
| Когда выбирать | Первые тесты и до 50 лидов | Нужны таблица + уведомление в чат команды |
Путь A — Formspree. Зарегистрируйтесь на formspree.io, создайте форму, скопируйте ID. Попросите Cursor добавить отправку через @formspree/ajax. Ответы передайте скрытыми полями. При лимите Formspree покажет form over quota — сигнал перехода на Make.
Путь B — Make.com. Custom Webhook → Add Row в Google Sheets → Send Message в Telegram Bot. Подробнее — в гайде Make AI Agents и MCP-автоматизация.
Типичная ошибка: запуск рекламы до тестовой заявки. Отправьте себе прохождение квиза и убедитесь, что строка появилась в таблице или сообщение пришло в Telegram в течение минуты.
Проверьте на телефоне и опубликуйте через Vercel Drop
Локально квиз уже работает. Чтобы дать ссылку коллеге или вставить в рекламу, нужен хостинг статики. Vercel Drop (vercel.com/drop) принимает папку или zip с index.html перетаскиванием — без Git и CLI.
- Пройдите квиз на телефоне по локальной сети или после публикации — все кнопки и поля должны нажиматься пальцем.
- Отправьте тестовую заявку с реальным, но своим номером.
- Загрузите папку на vercel.com/drop и скопируйте публичный URL.
- Добавьте UTM-метки к ссылке для рекламы, чтобы отличать трафик из квиза.
- Сохраните исходник index.html — правки в Cursor и повторная загрузка занимают минуты.
На практике публикация быстрее виджета Marquiz, но дизайн на вас. Для MVP это плюс: свой бренд без подписки на конструктор.
Пройдите чек-лист запуска перед рекламой
Вы поймете, что квиз готов, когда выполнены все пункты:
- публичная ссылка открывается на телефоне;
- прохождение 3-5 шагов занимает меньше двух минут;
- тестовая заявка видна в Telegram, таблице или почте;
- в проекте один index.html без npm-сборки;
- есть план B при лимите Formspree (миграция на Make webhook).
Перед масштабированием проверьте финальную кнопку и страницу «спасибо». При росте за 50 заявок в месяц заранее переключите webhook на Make.
Сложные цепочки с CRM и AI-обработкой лидов разбираем на курсе Make.com и вайбкодинга на kv-ai.ru.
Что дальше
- Зафиксируйте вопросы в Google Doc — так проще править промпты.
- Раз в неделю смотрите, на каком шаге бросают квиз.
- A/B-тестируйте заголовок первого экрана.
Один вечер на первый квиз — нормальный срок без штатного разработчика.
Материал проверен: Артур Хорошев (CEO Maya AI, автор курса по Make.com и вайбкодингу).
Достоверность данных: лимиты Formspree Free и AJAX-отправка — help.formspree.io; Vercel Drop — vercel.com/docs/drop; Project Rules Cursor — cursor.com/docs/rules; конверсия квиза 9-30% — adsquiz.io; Telegram — make.com/en/integrations/telegram; частотность «квиз на сайте» (351) и «сделать квиз на сайт» (22) — Яндекс Вордстат на 27.06.2026.
Частые вопросы
Как сделать квиз на сайт без программиста?
Откройте Cursor, опишите квиз промптом на русском, получите index.html. Подключите Formspree для первых 50 заявок в месяц или Make webhook для таблицы и Telegram. Опубликуйте папку на vercel.com/drop — программировать вручную не нужно.
Чем квиз в Cursor отличается от Tilda и Marquiz?
Tilda и Marquiz быстрее стартуют внутри своей экосистемы, но берут подписку и ограничивают дизайн шаблонами. Cursor дает свой HTML без ежемесячного SaaS: полный контроль над текстами, шагами и куда уходят заявки. Marquiz удобнее, если нужен готовый виджет за час; Cursor — когда нужен свой квиз без бюджета на конструктор.
Куда отправлять ответы квиза для малого бизнеса?
На старте хватит Formspree на email (до двух адресов на Free). Когда нужны таблица для менеджеров и пуш в Telegram — соберите сценарий Make: webhook → Google Sheets → Send Message. Так заявка не потеряется в спаме.
Можно ли обойтись без Make, только Formspree?
Да, для первых тестов и до 50 заявок в месяц Formspree достаточно. История хранится 30 дней. Когда лимит близок — заранее переключите отправку на Make webhook, не дожидаясь ошибки form over quota в пик рекламы.
Сколько вопросов оптимально в маркетинговом квизе?
3-5 вопросов — золотая середина по AdsQuiz и Tilda Education. Больше семи — резко растут отказы. Один контактный блок в конце, после персонального результата.
Нужен ли React или npm для квиза в Cursor?
Нет. Достаточно index.html с vanilla JavaScript и Tailwind CDN. Зафиксируйте это в .cursor/rules/quiz.mdc.
