Марина собрала в Cursor квиз из четырёх шагов, вставила в fetch ссылку hook.make.com и неделю думала, что автоматизация сломана: в браузере CORS, в Postman — 200. Боль новичка: обзоры Marquiz и Tilda не объясняют, как сделать квиз на сайте без подписки и почему после «Отправить» тишина. Ниже путь за вечер: index.html в Cursor, Formspree, Make — заявка в Google Таблице и Telegram.
Маркетинговый квиз на сайте — это не викторина для развлечения, а короткий диалог из 3-5 вопросов с финальным контактом. Браузер не может напрямую слать данные в Make из-за CORS — нужен Formspree. Цепочка: квиз в Cursor → Formspree → webhook Make → строка в Google Таблице + сообщение в Telegram. На бесплатных планах хватает на MVP: 50 заявок в Formspree и 1000 credits в Make в месяц.
По Вордстату на июль 2026 «квиз на сайте» — 349 показов в месяц, а «викторина онлайн» — 56 750: люди путают квиз для заявок с игрой. Выдача по Cursor + квиз + Telegram почти пуста — продают SaaS, а не DIY. Шанс для коуча или мастера, который хочет три вопроса-квалификатора, но боится кода.
Путь «описал в Cursor → Formspree → Make» без React и npm. Квиз здесь — диалог для малого бизнеса: коуч или мастер задаёт три вопроса и в конце просит контакт за персональный расчёт, а не устраивает викторину ради баллов. Логика как у формы заявки через Cursor и Make.
Сформулируйте цель квиза: диалог, а не викторина
Квиз для заявок спрашивает «подходит ли клиент», а не «угадали столицу». Хватает 3-5 шагов: задача, срок, бюджет — и контакт. Кейс Marquiz 2026: 1556 открытий на РСЯ → 42 заявки (2,7% CR) — дело в вопросах и оффере, не в бренде конструктора.
| Критерий | Маркетинговый квиз | Развлекательная викторина |
|---|---|---|
| Цель | Квалификация лида и контакт | Вовлечение и игровой опыт |
| Длина | 3-5 вопросов + имя и телефон | 10+ вопросов, редко просят телефон |
| Финал | «Персональный расчёт», «Подбор программы» | Результат «вы — гений» без заявки |
| Стек DIY | index.html + Formspree + Make | Обычно отдельный SaaS |
Делайте: каждый вопрос приближает к офферу («когда планируете старт?»). Не делайте: опрос ради опроса — падает доверие. Ответы спрячьте в hidden-полях формы: Make увидит их отдельными колонками в таблице, и в Telegram придёт не только телефон, но и выбор клиента.
Соберите пошаговый квиз в Cursor: один index.html без npm
Квиз не равен React. Cursor Agent собирает одностраничник на обычном JavaScript: шаги переключаются кнопками «Далее»/»Назад». Проекты вроде Quizner-js на GitHub показывают тот же паттерн без npm.
- Создайте папку проекта и файл index.html. В Cursor откройте Agent (Ctrl+I или Cmd+I) и опишите квиз по-русски: число шагов, варианты ответов, цвета, мобильная вёрстка.
- Добавьте правило в .cursor/rules/quiz.mdc: один HTML-файл, vanilla JS, без npm и React — иначе агент утащит в сборщик.
- Проверьте локально: откройте файл в браузере, пройдите все шаги на ширине телефона (F12 → режим мобильного).
- Вставьте honeypot: скрытое поле, которое боты заполняют, а люди не видят — меньше спама в Formspree.
- Сделайте экран «Спасибо» после успешной отправки — человек должен понять, что заявка ушла.
Типичная ошибка: «сделай как Marquiz» без правил — агент тащит лишние пакеты. Для MVP хватит кнопок и «шаг 2 из 4». См. лендинг в Cursor без кода.
Подключите Formspree: почему нельзя слать fetch прямо в Make
CORS — правило браузера: ваша страница не может напрямую постучаться в hook.make.com. Postman отвечает 200, и кажется, что виноват Make. На практике виноват антипаттерн «вставил webhook в JavaScript»: браузер блокирует запрос, а Make не обязан принимать данные с чужого сайта без посредника.
Правильная схема:
Квиз в браузере → POST на Formspree (form action или @formspree/ajax) → плагин Webhooks в Formspree → Custom Webhook URL из Make → сценарий Make
Formspree Free: 50 заявок/мес, история 30 дней, 2 email-уведомления. Создайте форму, пропишите action на formspree.io/f/ID или @formspree/ajax для экрана «Спасибо» без перезагрузки.
В Plugins → Webhooks вставьте URL Custom Webhook из Make. Не делайте: fetch на hook.make.com — снова CORS и тишина после «Отправить». На практике Formspree Submissions — первая точка, где видно, дошла ли заявка с квиза.
Настройте Make: webhook, Google Таблица и Telegram
Make — визуальные цепочки: webhook запускает таблицу и Telegram. Free в 2026: 1000 credits/мес, 2 сценария — для одного квиза хватает.
- Создайте сценарий с модулем Webhooks → Custom webhook. Скопируйте URL в Formspree Webhooks.
- Включите listening (ожидание) и отправьте тестовую заявку с квиза. В History должен появиться зелёный bundle.
- Если полей не видно — нажмите Redetermine data structure в настройках webhook после новой тестовой отправки.
- Добавьте Google Sheets → Add a row: привяжите таблицу, сопоставьте имя, телефон и ответы квиза с колонками.
- Добавьте Telegram → Send a message: укажите chat_id бота (через getUpdates после /start) и текст с полями заявки.
В реальном проекте часто ломается шаг 3: поля не видны, если тест шёл без listening. Пустой chat_id в Telegram — сначала /start боту, потом id из getUpdates. Таблица для лидов настраивается так же, как в контент-плане в Google Sheets через Make.
Опубликуйте квиз и проверьте заявку с телефона за 1-2 минуты
Локальный файл не принимает заявки с чужого телефона. Выложите папку на Vercel Drop: zip с index.html — публичная ссылка. Пройдите квиз с мобильного, оставьте тестовое имя и реальный контакт — так вы повторите путь настоящего лида.
Успех: за 1-2 минуты строка в Google Таблице, сообщение в Telegram и зелёный bundle в Make History с полями ответов квиза. Есть в Formspree, нет в Make — чините Webhooks или listening; пусто везде — form action. Прогоните с другого телефона до рекламы.
Пройдите чек-лист перед рекламой и заложите лимиты
Перед трафиком пройдите список — снимает типичные потери у новичков.
- Honeypot и «Спасибо» — спам не съест лимит Formspree, человек видит подтверждение.
- Мобильная вёрстка — большинство квизов проходят с телефона.
- UTM в скрытых полях — метка из ссылки попадёт в таблицу и покажет источник лида.
- Политика обработки ПДн — ссылка рядом с полем контакта.
- План на 50+ заявок — на free Formspree счётчик обнуляется каждый календарный месяц; при росте заложите платный тариф или другой приём форм.
Итоговый вердикт: квиз на сайте без абонплаты конструктора — связка Cursor + Formspree + Make за вечер. Marquiz выигрывает шаблонами и аналитикой, но DIY-путь прозрачнее: видите каждый шаг от кнопки до Telegram и не платите, пока не выросли за 50 заявок Formspree.
Углубить Make — в курсе по Make и вайбкодингу: webhook, таблицы, боты на задачах малого бизнеса.
Что дальше
- Добавьте вопрос-квалификатор и перетестируйте Make с listening.
- Включите email-уведомление Formspree как запасной канал.
- Пропишите UTM в скрытых полях для рекламных ссылок.
Материал проверен: Артур Хорошев (CEO Maya AI, автор курса по Make.com и вайбкодингу).
Достоверность данных: лимиты Formspree и Webhooks — help.formspree.io; Make Free — make.com/en/pricing; Custom Webhook — help.make.com/webhooks (02.07.2026); кейс 2,7% CR — marquiz.ru/blog/5-rules-2026/; Wordstat «квиз на сайте» 349 и «викторина онлайн» 56 750 — регион 225, 02.07.2026.
Частые вопросы
Как сделать квиз на сайте без программиста?
Опишите квиз в Cursor Agent на русском, получите один index.html, подключите Formspree как приём формы и Make для Google Таблицы и Telegram. Код правит агент, вам нужно проверить шаги и отправить тестовую заявку с телефона.
Чем квиз отличается от обычной формы заявки?
Форма сразу просит контакт. Квиз сначала задаёт 3-5 вопросов-квалификаторов и только в конце просит имя и телефон — человек уже вложился в диалог и чаще оставляет заявку на персональный результат.
Куда попадают ответы после отправки квиза?
Сначала в Formspree (раздел Submissions), затем webhook пересылает данные в Make. Make добавляет строку в Google Таблицу и шлёт сообщение в Telegram. Проверяйте все три точки при первом тесте.
Можно ли обойтись без платных конструкторов вроде Marquiz?
Да, для MVP: Formspree даёт 50 заявок в месяц бесплатно, Make — 1000 credits и 2 сценария. Платить имеет смысл, когда нужны встроенная аналитика, A/B-тесты и десятки готовых шаблонов без настройки webhook.
Почему в консоли ошибка CORS при отправке в Make?
Браузер блокирует прямой запрос на hook.make.com с вашей страницы — это защита, а не поломка Make. Используйте Formspree (form action или ajax-пакет) и Webhooks на URL Make: заявка идёт через посредника, который браузеру разрешён.
Нужен ли свой сервер?
Нет. Статический index.html на Vercel Drop достаточно: Formspree принимает заявки, Make обрабатывает в облаке. Free Make (1000 credits) хватает на сценарий webhook → таблица → Telegram на старте.
