Перейти к содержимому
FFormhook
← Назад к блогу

Блог

Как добавить контактную форму на Cloudflare Pages

· 3 мин чтения

Cloudflare Pages - быстрый и щедрый статический хостинг: запушили репозиторий, получили глобальный деплой, готово. Чего у него нет - так это аналога Netlify Forms: никакого встроенного сервиса, который сканирует ваш HTML в поисках тега <form> и начинает собирать отправки. Разверните обычную HTML-форму как есть на Cloudflare Pages - и POST-запрос уйдёт в никуда. Вот почему, и вот два способа это исправить.

Почему у Cloudflare Pages нет собственного продукта для форм

Cloudflare Pages - это хостинг статических файлов с опциональным слоем Functions для динамических маршрутов, а не платформа для обработки форм. Функция форм у Netlify работает за счёт анализа результата сборки при деплое и создания скрытого бэкенда для каждой найденной формы; Cloudflare Pages такого анализа не делает. Артефакты вашей сборки - это просто файлы на CDN. Если форме нужно куда-то отправлять данные, это «куда-то» придётся построить или одолжить самостоятельно. Вряд ли Cloudflare когда-нибудь закроет этот пробел - Pages намеренно ограничен статическими ресурсами плюс тонким serverless-слоем, а не конвейером для разбора форм.

Вариант 1: написать собственную Pages Function

Cloudflare Pages поддерживает Functions - небольшие обработчики в стиле Workers, которые лежат в каталоге /functions и выполняются на edge-инфраструктуре Cloudflare. Можно добавить functions/api/contact.ts, который читает тело POST-запроса, валидирует его, фильтрует спам, отправляет письмо (через API какого-нибудь провайдера, поскольку Workers не может устанавливать «сырые» SMTP-соединения), и, возможно, пишет данные в KV или D1 для хранения. Это работает, и всё остаётся в рамках одного проекта Cloudflare. Но теперь именно вы поддерживаете валидацию, фильтрацию спама, хранение и доставку писем - тот самый бэкенд, писать который статический хостинг должен был избавить вас от необходимости.

Вариант 2: направить форму на хостинговый бэкенд (рекомендуется)

Более быстрый путь - отправлять POST-запрос сервису, созданному именно для этого. Оставьте свою разметку, добавьте один атрибут:

<form action="https://formhook.app/f/YOUR_API_KEY" method="POST">
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
</form>

Это вся интеграция целиком. Никакой Function, никакого Worker, никаких ключей API для почты, которые нужно хранить. Отправки появляются в панели и могут запускать веб-push-уведомление - в том числе на iOS, если сайт добавлен на главный экран. Защита от спама включена по умолчанию: honeypot-поле и ограничение частоты запросов отсекают большую часть спама ещё до того, как он доберётся до вас, а для более целенаправленных атак можно добавить Cloudflare Turnstile - собственную приватность-ориентированную CAPTCHA Cloudflare, вполне уместную пару для формы, живущей на сайте Cloudflare Pages. Отправки и загруженные файлы хранятся на инфраструктуре в ЕС. Всё это не зависит от того, как построен остальной сайт: Astro, обычный HTML, статический экспорт Next.js, Hugo - чем бы ни генерировалась разметка, тег формы остаётся тем же самым, а деплой не меняется.

Как получить свой эндпоинт

  1. Зарегистрируйтесь и создайте форму в панели - карта не нужна.
  2. Скопируйте уникальный URL формы (он выглядит как https://formhook.app/f/fh_xxxxxxxx).
  3. Вставьте его в атрибут action вашей существующей <form>.
  4. Закоммитьте и задеплойте как обычно.

Бесплатный тариф покрывает 250 отправок в месяц - этого достаточно для большинства контактных форм. Посмотрите страницу с тарифами, чтобы узнать, что даёт тариф Pro, если позже понадобятся загрузка файлов или подтверждённый домен отправки.

Рабочая форма в одну строку

Размещение в ЕС, отправки хранятся вечно, push-уведомления на любом тарифе.

Начать бесплатно

Без банковской карты · читайте документацию

Читать дальше