Пошаговая форма заявки на лендинге в Cursor AI: HTML POST без CORS, Formspree Free, Make webhook, Google Таблица и Telegram. Для новичков без программиста.
Коуч три недели рисовала PDF в Canva и дала ссылку на Google Диск — контакты не собрала: формы не было, уведомления тоже. Марина пошла дальше: сверстала лендинг в Cursor, вставила Make webhook в JavaScript и неделю думала, что Make сломан. На деле браузер блокировал fetch (это CORS), а заявки принимаются обычной HTML-формой через Formspree или POST на Make. За вечер соберете одностраничник с полями «имя + контакт», отправите тест и увидите строку в Google Таблице и Telegram — без сервера и PHP.
Форма заявки на лендинге работает без backend, если отправка идет через HTML POST, а не JavaScript fetch на чужой домен. Два рабочих пути: Formspree (до 50 заявок в месяц бесплатно, письмо на почту) или action формы на Custom Webhook Make.com (бесплатно, но страница может перейти на Make). Связка Make → Google Sheets → Telegram дает прозрачную воронку за один вечер в Cursor AI.
Материал про бизнес-лендинг и сбор лидов, не про подачу документов через Госуслуги. По Wordstat запрос «как сделать форму заявки на сайте» — 23 показа в месяц, а широкий «форма заявки на сайте» — 693. Узкий запрос редкий, зато по связке Cursor + форма + Make мало пошаговых гайдов: QForm и WebAsk продают drag-and-drop, но не показывают, куда реально падает заявка с вашего HTML.
Webhook — это «адрес-приемник»: форма отправляет данные на URL, а Make ловит их и разносит по таблице, почте и Telegram. Ни VPS, ни PHP на старте не нужны — достаточно статичного index.html на бесплатном хостинге.
Выберите поля формы: имя, контакт и согласие
Типичная ошибка новичка — перегрузить форму десятью полями «на всякий случай». На практике хватает трех элементов: имя, телефон или email (одно поле контакта), кнопка «Оставить заявку». Четвертый элемент — чекбокс с короткой фразой про согласие на обработку персональных данных по 152-ФЗ. Без галочки заявку лучше не принимать.
Делайте: одно поле contact с подписью «Телефон или Telegram». Не делайте: обязательный адрес, должность и бюджет на первом экране — конверсия падает, а CRM еще не настроена.
Способ приема заявок Нужен ли свой сервер Бесплатный старт Куда попадает заявка Formspree (HTML POST) Нет 50 заявок/мес, 2 email, 30 дней истории Submissions + письмо; webhook на Make только на paid Make Custom Webhook Нет Free Make с лимитом credits Make History → Sheets + Telegram QForm / WebAsk (виджет) Нет Есть free-тарифы SaaS Кабинет конструктора, не ваш index.html
Итоговый вердикт: если лендинг рисуете в Cursor и нужен свой дизайн — Formspree для почты или прямой POST на Make для таблицы. QForm удобен, когда HTML-лендинга нет и нужен виджет за пять минут.
Сверстайте одностраничник с формой в Cursor AI
Cursor — AI-редактор кода: вы описываете задачу на русском, Agent правит index.html. Откройте папку проекта, создайте index.html и дайте промпт: «Одностраничный лендинг коуча, mobile-first, форма с полями name и contact, кнопка отправки, блок ‘Спасибо, заявка принята'». Сначала проверьте верстку в браузере без backend — поля крупные на телефоне, кнопка на всю ширину.
Добавьте honeypot — скрытое поле-пустышку для ботов. Formspree в официальной доке рекомендует такой фильтр без сложной reCAPTCHA: человек поле не видит, бот заполняет — заявка отсекается.
- Шаг 1: Создайте папку проекта и файл index.html в Cursor.
- Шаг 2: Попросите Agent сверстать форму с action и method=»POST» — пока с заглушкой в action.
- Шаг 3: Проверьте мобильную версию через DevTools или телефон по локальному preview.
- Шаг 4: Добавьте honeypot-поле и чекбокс согласия одной короткой фразой.
- Шаг 5: Убедитесь, что у каждого input есть атрибут name — без него Make и Formspree не увидят данные.
Если лендинг еще не начинали, смотрите материал про лендинг в Cursor AI без кода — тот же принцип одностраничника.
Подключите Formspree: регистрация и активация
Formspree — посредник между HTML и почтой. Регистрируетесь, создаете форму, получаете id. В index.html меняете action на https://formspree.io/f/ВАШ_ID и method POST. Официальная инструкция требует минимум: правильный action, POST и name у каждого поля.
Критичный момент: Formspree активирует форму только после первой реальной отправки. Отправьте тест сами — иначе чужие заявки могут теряться, пока кажется, что все сломано. На Free-тарифе — 50 submissions в месяц, уведомления на два email, история 30 дней.
Делайте: сразу после регистрации — тестовая заявка и проверка Submissions. Не делайте: рассчитывать на бесплатный webhook Formspree → Make — плагин Webhook доступен на Professional и Business, не на Free.
Обойдите CORS: прямой POST на Make или paid webhook
CORS — правило браузера: страница с вашего домена не может дернуть чужой API через JavaScript fetch, если тот API не разрешил ваш сайт. Make webhook не открывает CORS для произвольного fetch — поэтому красная ошибка в консоли у Марины была нормальной, а не поломкой Make.
Два безопасных обхода для новичка:
- HTML form POST на Make. Make официально пишет: URL Custom Webhook можно вставить в action формы. Браузер отправляет данные как обычную форму — CORS не мешает. Минус: после отправки пользователь может увидеть страницу Make, если не настроить redirect.
- Formspree + Webhook plugin (paid). Форма шлет на Formspree, Formspree пересылает JSON в Make. UX мягче, но нужен апгрейд Formspree.
Схема free-воронки:
Посетитель → HTML форма (Cursor) → POST на hook.make.com → Make сценарий → Google Sheets + Telegram
Например, в action подставляете URL из Webhooks → Custom webhook. Нажимаете Redetermine data structure, отправляете тест с реальными name и phone — Make узнает поля для Sheets и Telegram.
Соберите сценарий Make: таблица, Telegram и History
В Make создайте scenario: триггер Webhooks → Custom webhook → скопируйте URL в action формы. После тестовой заявки откройте History — там bundle с полями name и contact. Добавьте Google Sheets «Add a row» и Telegram «Send a message» с теми же переменными.
- Шаг 1: Create scenario → Webhooks → Custom webhook → скопировать URL.
- Шаг 2: Вставить URL в action формы, отправить тест, нажать Redetermine data structure.
- Шаг 3: Google Sheets — новая строка с name, contact, датой.
- Шаг 4: Telegram Bot — короткое уведомление «Новая заявка: …».
- Шаг 5: Включить scenario (ON) и повторить тест с другого браузера или телефона.
Каталог Make насчитывает более 3 000 интеграций. Логику лид-магнита нарастите по материалу про лид-магнит через Cursor и Make.
Проверьте форму и поймите, что все сработало
Критерий успеха: с телефона или другого браузера отправили тест — за ~минуту строка в Google Таблице (или письмо Formspree) и уведомление в Telegram; в Make History успешный bundle с полями name и contact; на странице «Спасибо, заявка принята», а не техническая ошибка.
В реальном проекте чаще ломается одно из трех: забыли name у поля, не активировали Formspree первой отправкой, не сделали Redetermine после смены полей. Консоль браузера смотрите только если снова полезли в fetch — для HTML POST она должна быть чистой.
Для страницы «Спасибо» на free покажите локальный блок success после submit или thank-you.html на том же хостинге. Redirect Formspree на кастомный URL — опция paid-планов.
Чек-лист перед публикацией на Netlify или GitHub Pages
- Тест с телефона через мобильный интернет, не только Wi-Fi с ноутбука.
- Honeypot на месте — спам не забил таблицу за ночь.
- Скрытые поля UTM (utm_source, utm_campaign), если трафик с рекламы.
- Лимит 50 заявок Formspree Free — напоминание проверить счетчик mid-month.
- Scenario Make включен (ON), иначе webhook молча не обработается.
Опубликуйте папку на Netlify или GitHub Pages. Дальше свяжите форму с автоворонкой в Telegram через Make. Make глубже разбирают на курсе Make.com и вайбкодинга и в клубе «Ковчег» (@maya_pro).
Материал проверен: Артур Хорошев (CEO Maya AI, автор курса по Make.com и вайбкодингу).
Достоверность данных: лимиты Formspree Free и Webhook plugin — help.formspree.io; Custom Webhook и HTML POST — help.make.com и make.com/how-to-guides; CORS — habr.com/ru/companies/otus/articles/706908/; Wordstat «форма заявки на сайте» (693), «как сделать форму заявки на сайте» (23) — регион 225, 2026-06-25.
Частые вопросы
Нужен ли backend или VPS для формы заявки?
Нет. Статичный HTML на Netlify или GitHub Pages plus Formspree или Make webhook достаточно. Свой сервер понадобится позже при сложной авторизации или тысячах заявок в день.
Куда падают заявки, если я ничего не настраивал?
Никуда — форма без action и POST просто перезагрузит страницу. Проверьте action, method POST и name у полей, затем тест и Formspree Submissions или Make History.
Почему в консоли CORS при отправке на Make?
Вы вызываете webhook через JavaScript fetch с чужого домена — браузер блокирует запрос. Замените fetch на HTML-форму с action на URL webhook или Formspree как посредник.
Formspree или QForm — что выбрать с Cursor?
QForm быстрее для виджета без HTML. Cursor plus Formspree или Make дает свой дизайн и прозрачный путь в таблицу и Telegram. Для DIY-лендинга второй путь логичнее.
Сколько стоит на старте?
Formspree Free — 50 заявок в месяц; Make Free — с лимитом credits; хостинг статики — 0 руб. Webhook Formspree в Make потребует paid Formspree; прямой POST на Make остается бесплатным компромиссом по UX.
Как защитить форму от спама?
Honeypot-поле по инструкции Formspree и не публикуйте URL webhook в открытых чатах. При росте спама — reCAPTCHA или апгрейд тарифа.
Можно ли принимать заявки только на email без Make?
Да. Formspree Free шлет на два адреса и хранит submissions 30 дней. Make нужен для Google Таблицы, Telegram и автоматических follow-up.