Формы без
бэкенда
Как принимать заявки со статического HTML-сайта — без своего сервера, только serverless-функции.
Как принимать заявки со статического HTML-сайта — без своего сервера, только serverless-функции.
Тег <form> сам по себе никуда не отправляет данные
На статическом сайте нет сервера, который примет данные формы и что-то с ними сделает — сохранит в базу, отправит письмо, кинет уведомление в Telegram. Обычный <form action="..."> должен на что-то ссылаться — а если это «что-то» не существует, форма просто не работает.
Решение — serverless-функция: маленький кусок кода, который выполняется в облаке только в момент отправки формы, а всё остальное время не занимает ресурсы и не требует администрирования сервера.
Самый быстрый способ — ничего не программировать
| Сервис | Особенность |
|---|---|
| Formspree | Просто указываете email в action формы — без бэкенда вообще |
| Getform / Basin | Похожий принцип, есть вебхуки для интеграции с другими сервисами |
| Google Forms | Бесплатно, но выглядит не как часть вашего сайта — подходит для внутренних задач |
Плюс готовых сервисов — ноль кода и ноль администрирования. Минус — данные проходят через чужой сервер, и на бесплатных тарифах обычно есть лимит на количество отправок в месяц.
Больше контроля — своя логика обработки
Если нужно не просто получить письмо, а, например, записать заявку в свою базу данных или отправить уведомление в 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 }); }
Важно: секретные ключи (токен бота, пароли) храните в переменных окружения платформы, а не прямо в коде — код фронтенда виден всем в браузере.
Форма без защиты соберёт спам за первую же неделю
Короткие ответы на главное
Да, но потребуется отдельная логика загрузки — обычно файл сохраняют в облачное хранилище (например, S3-совместимое), а в базу или письмо записывают только ссылку на него.
У Vercel и Netlify есть бесплатный тариф с щедрым лимитом вызовов в месяц — для формы обратной связи среднего сайта этого хватает с большим запасом.
Покажите пользователю понятную ошибку на фронтенде и дублируйте контактный email на странице — на случай, если форма всё же недоступна.
Настроим приём заявок с сайта — с защитой от спама и уведомлением в Telegram или на почту.