Блог · Функциональность
20 августа 2026

Формы без
бэкенда

Как принимать заявки со статического HTML-сайта — без своего сервера, только serverless-функции.

Коротко
  • Тег <form> сам по себе никуда данные не отправляет — на статике нужен либо сервис форм, либо serverless-функция
  • Formspree/Getform — вообще без кода, просто email в action; свой Vercel/Netlify-обработчик — больше контроля
  • Секретные ключи (токены ботов, пароли) — только в переменных окружения, никогда в коде фронтенда
  • Honeypot-поле — самый простой и эффективный первый рубеж защиты от спам-ботов
01 / Проблема

Почему форма — не просто HTML

Тег <form> сам по себе никуда не отправляет данные

На статическом сайте нет сервера, который примет данные формы и что-то с ними сделает — сохранит в базу, отправит письмо, кинет уведомление в Telegram. Обычный <form action="..."> должен на что-то ссылаться — а если это «что-то» не существует, форма просто не работает.

Решение — serverless-функция: маленький кусок кода, который выполняется в облаке только в момент отправки формы, а всё остальное время не занимает ресурсы и не требует администрирования сервера.

02 / Готовые решения

Готовые сервисы форм

Самый быстрый способ — ничего не программировать

СервисОсобенность
FormspreeПросто указываете email в action формы — без бэкенда вообще
Getform / BasinПохожий принцип, есть вебхуки для интеграции с другими сервисами
Google FormsБесплатно, но выглядит не как часть вашего сайта — подходит для внутренних задач

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

03 / Свой вариант

Своя serverless-функция

Больше контроля — своя логика обработки

Если нужно не просто получить письмо, а, например, записать заявку в свою базу данных или отправить уведомление в Telegram-бота — берут serverless-платформу вроде Vercel или Netlify Functions. Функция получает данные формы через POST-запрос и делает с ними что угодно.

// api/submit-form.js — пример на Vercel
export default async function handler(req, res) {
  if (req.method !== 'POST') return res.status(405).end();
  const { name, email, message } = req.body;

  // например, отправка в Telegram-бота
  await fetch(`https://api.telegram.org/bot${process.env.BOT_TOKEN}/sendMessage`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      chat_id: process.env.CHAT_ID,
      text: `Новая заявка: ${name}, ${email}\n${message}`
    })
  });

  res.status(200).json({ ok: true });
}

Важно: секретные ключи (токен бота, пароли) храните в переменных окружения платформы, а не прямо в коде — код фронтенда виден всем в браузере.

04 / Спам

Защита от спам-ботов

Форма без защиты соберёт спам за первую же неделю

01
Honeypot-полеСкрытое CSS-полем поле формы — боты его заполняют, живые люди не видят и не трогают. Если поле не пустое — заявку просто игнорируем
02
reCAPTCHA или hCaptchaКлассическая защита, если honeypot не справляется — требует подключения виджета на форму
03
Rate limiting на функцииОграничьте количество запросов с одного IP в минуту — защищает от массовых автоматических отправок
05 / FAQ

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

Короткие ответы на главное

Можно ли принимать файлы через такую форму?

Да, но потребуется отдельная логика загрузки — обычно файл сохраняют в облачное хранилище (например, S3-совместимое), а в базу или письмо записывают только ссылку на него.

Сколько стоят serverless-функции?

У Vercel и Netlify есть бесплатный тариф с щедрым лимитом вызовов в месяц — для формы обратной связи среднего сайта этого хватает с большим запасом.

Что если функция временно недоступна?

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

Нужна форма с обработкой на бэкенде?

Настроим приём заявок с сайта — с защитой от спама и уведомлением в Telegram или на почту.