Как добавить форму обратной связи на статический сайт без backend

Статический сайт — это быстрый, дешевый и надежный способ запустить лендинг, промо-страницу, документацию или сайт продукта. Но у него есть типичная проблема: как принимать заявки, если собственного backend нет?

Например, у вас есть сайт на Cloudflare Pages, GitHub Pages, Netlify, Vercel, S3/Selectel Object Storage или любом другом статическом хостинге. HTML, CSS и JavaScript работают отлично, но форма обратной связи сама по себе не умеет отправлять данные в Telegram, Email или CRM.

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

Проблема

Обычная HTML-форма выглядит просто:

<form>
  <input name="name" placeholder="Ваше имя" />
  <input name="email" placeholder="Email" />
  <textarea name="message" placeholder="Сообщение"></textarea>
  <button type="submit">Отправить</button>
</form>

Но такая форма ничего полезного не делает, пока у нее нет обработчика.

Чтобы заявка реально дошла до вас, нужно:

• принять данные формы;
• проверить, что запрос пришел с разрешенного сайта;
• защититься от спама;
• сохранить заявку;
• отправить уведомление в Telegram, Email или Webhook;
• обработать ошибки доставки;
• дать пользователю понятный результат: успешно или нет.

Если backend нет, все это приходится решать другим способом.

Плохой вариант: mailto:

Иногда форму пытаются заменить ссылкой на email:

<a href="mailto:sales@example.com">Написать нам</a>

Или делают форму, которая открывает почтовый клиент пользователя.

Это плохой вариант для лидогенерации.

Минусы:

• у пользователя может не быть настроенного почтового клиента;
• заявка не сохраняется в системе;
• нет аналитики;
• нельзя нормально валидировать поля;
• нельзя защититься от спама;
• нельзя отправить данные сразу в Telegram, CRM или webhook;
• пользователь может просто закрыть окно письма и ничего не отправить.

mailto: подходит только как запасной контакт, но не как основная форма заявки.

Вариант 1: написать свой backend

Классическое решение — сделать свой endpoint:

POST /api/contact

Он принимает данные формы и отправляет их дальше.

Плюсы:

• полный контроль;
• можно реализовать любую бизнес-логику;
• можно интегрировать CRM, Telegram, Email, аналитику.

Минусы:

• нужен backend-разработчик;
• нужно где-то хостить API;
• нужно поддерживать безопасность;
• нужно следить за доставкой уведомлений;
• нужно делать антиспам;
• нужно логировать ошибки;
• нужно поддерживать инфраструктуру.

Для большого продукта это нормально. Для лендинга, промо-страницы или MVP — часто избыточно.

Вариант 2: serverless function

Можно сделать обработчик формы на Cloudflare Workers, Vercel Functions, Netlify Functions или AWS Lambda.

Примерно так:

export default {
  async fetch(request) {
    const data = await request.json()

    // validate data
    // send telegram notification
    // send email
    // return response

    return Response.json({ ok: true })
  }
}

Плюсы:

• не нужен полноценный сервер;
• удобно для простых сценариев;
• можно быстро запустить.

Минусы:

• код все равно нужно писать и поддерживать;
• секреты нужно хранить безопасно;
• retry-доставку нужно делать самому;
• защиту от спама нужно делать самому;
• логику webhook/email/telegram нужно поддерживать самому;
• при нескольких сайтах начинается дублирование кода.

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

Вариант 3: form backend / lead capture service

Form backend — это внешний сервис, который принимает POST-запросы от формы и доставляет заявку в нужные каналы.

Общий принцип:

Static Website → Form POST → Lead Capture Service → Telegram / Email / Webhook

На сайте остается только HTML/JS-код формы. Вся backend-логика находится во внешнем сервисе.

Такой подход удобен, если нужно:

• быстро подключить форму;
• не писать backend;
• получать заявки в Telegram;
• отправлять копии на Email;
• передавать данные в CRM через webhook;
• защитить форму от спама;
• видеть историю заявок;
• не терять заявки при временных ошибках доставки.

Пример интеграции формы

Ниже пример простой формы, которая отправляет заявку через JavaScript.

<form id="lead-form">
  <input name="name" placeholder="Ваше имя" required />
  <input name="email" type="email" placeholder="Email" required />
  <textarea name="message" placeholder="Сообщение"></textarea>

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

<script>
  const form = document.querySelector('#lead-form')

  form.addEventListener('submit', async (event) => {
    event.preventDefault()

    const formData = new FormData(form)

    const payload = {
      name: formData.get('name'),
      email: formData.get('email'),
      message: formData.get('message')
    }

    const response = await fetch('https://api.example.com/api/c1/sites/YOUR_SITE_KEY/submissions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(payload)
    })

    if (!response.ok) {
      alert('Не удалось отправить заявку. Попробуйте еще раз.')
      return
    }

    form.reset()
    alert('Заявка отправлена.')
  })
</script>

YOUR_SITE_KEY — публичный ключ сайта. Он нужен, чтобы сервис понял, к какому сайту относится заявка.

Что должно быть в хорошем form backend

Просто принять POST-запрос недостаточно. Для production-сценария важны дополнительные вещи.

1. Domain verification

Сервис должен понимать, что заявки действительно приходят с вашего сайта.

Для этого можно использовать подтверждение домена через DNS TXT-запись.

Пример:

subscribe-verification=abc123

Это снижает риск, что кто-то подключит чужой домен или начнет отправлять мусор от имени вашего сайта.

2. Captcha

Публичная форма быстро начинает получать спам.

Для простых форм часто достаточно встроенной math captcha:

7 + 4 = ?

Пользователь решает простой пример, а сервис проверяет ответ на backend-стороне.

Важно:

• challenge должен иметь TTL;
• один challenge нельзя использовать повторно;
• проверка должна происходить на сервере;
• ответ нельзя доверять только frontend-коду.

3. Rate limiting

Даже с captcha стоит ограничивать частоту отправки.

Например:

не больше 10 заявок в минуту с одного IP

Rate limiting защищает от:

• ботов;
• случайных повторных отправок;
• простого flood-спама;
• перегрузки каналов уведомлений.

4. Доставка в несколько каналов

Хороший сценарий — отправлять заявку сразу в несколько мест:

Telegram + Email + Webhook

Например:

• Telegram — быстро увидеть заявку;
• Email — сохранить копию;
• Webhook — отправить данные в CRM или внутреннюю систему.

5. Retry при ошибках

Webhook или Email могут временно не работать.

Например:

• CRM вернула 500;
• SMTP-сервер временно недоступен;
• Telegram API ответил ошибкой;
• сеть дала timeout.

Если сервис просто попробует один раз и забудет заявку — это плохая надежность.

Нужен retry-механизм:

1-я попытка → ошибка
2-я попытка через 30 секунд
3-я попытка через 2 минуты
4-я попытка через 10 минут

Так заявки не теряются из-за временных сбоев.

Какой минимальный flow нужен

Для владельца сайта хороший flow выглядит так:

1. Создать сайт в dashboard.
2. Подтвердить домен через DNS.
3. Скопировать HTML/JS snippet.
4. Настроить каналы уведомлений: Telegram, Email или Webhook.
5. Вставить форму на сайт.
6. Отправить тестовую заявку.
7. Проверить, что уведомление пришло.

После этого форма готова к рекламному трафику.

Чеклист перед запуском формы

Перед тем как вести трафик на лендинг, проверьте:

• форма отправляет данные успешно;
• обязательные поля валидируются;
• после отправки пользователь видит понятное сообщение;
• заявка приходит в Telegram или Email;
• webhook получает корректный payload;
• ошибки доставки логируются;
• включена защита от спама;
• настроен rate limit;
• домен подтвержден;
• тестовая заявка сохранена в истории.

Когда стоит использовать готовый form backend

Готовый сервис особенно полезен, если:

• сайт статический;
• backend ради одной формы писать не хочется;
• нужно быстро запустить лендинг;
• нужно получать заявки в Telegram;
• нужно подключить webhook в CRM;
• сайтов много;
• заявки нельзя терять;
• нужна простая защита от спама.

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

Итог

Добавить форму обратной связи на статический сайт без backend можно несколькими способами:

• mailto: — самый простой, но ненадежный вариант;
• свой backend — гибко, но дорого в поддержке;
• serverless function — удобно для разработчиков, но требует кода;
• form backend — быстрый способ принимать заявки без собственной backend-инфраструктуры.

Для лендингов, статических сайтов, промо-страниц и MVP лучше всего подходит внешний lead capture service: сайт отправляет форму в API, а сервис доставляет заявку в Telegram, Email или Webhook.

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

CTA

Хотите принимать заявки с сайта без backend?

Подключите Form Hook: добавьте SDK, подтвердите домен и получайте лиды в Telegram, Email или Webhook.