Как обрабатывать отправки форм Webflow без кастомного бэкенда

Контактная форма в Webflow выглядит отлично сразу после создания, но сам Webflow лишь отправляет тебе данные заявки по email - он не сохраняет записи в базу данных, не подключается к CRM и не запускает никакую пользовательскую логику. Если тебе нужно больше, чем простое email-уведомление, придётся направить отправки форм через внешний сервис. Хорошая новость: это можно сделать без единой строки серверного кода.

Что даёт Webflow по умолчанию

Встроенный обработчик форм Webflow делает три вещи: отправляет email-уведомление владельцу сайта, показывает сообщение об успехе и сохраняет заявки в панели управления Webflow (на платных тарифах). Для простых контактных форм на небольших сайтах этого хватает, но как только появляются более сложные требования - всё рассыпается:

• Автоответ пользователю, заполнившему форму
• Пересылка заявок в командный почтовый ящик или CRM
• Условная логика (например, маршрутизация лидов по интересу к продукту)
• Фильтрация спама сверх базового honeypot от Webflow
• Надёжный журнал доставки с временными метками и повторными попытками

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

Нативные интеграции - Zapier и Make

Webflow имеет прямую интеграцию с Zapier и Make (бывший Integromat). Когда приходит новая заявка с формы, срабатывает триггер и можно выстроить любую цепочку действий: добавить строку в Google Sheets, создать контакт в HubSpot, отправить сообщение в Slack и так далее.

Это самый популярный no-code путь среди дизайнеров. Настройка выглядит так:

1. В Webflow перейди в Настройки проекта - Интеграции и подключи аккаунт Zapier.
2. В Zapier создай новый Zap с триггером Webflow - New Form Submission .
3. Выбери нужную форму по названию.
4. Добавь шаг с действием (Gmail, Slack, Airtable и т.д.).
5. Протестируй на реальной заявке и включи Zap.

Make дешевле для сложных сценариев, но оба сервиса создают зависимость: если Zapier или Make упадёт или аккаунт достигнет лимита, заявки будут молча теряться или накапливаться в очереди.

Использование webhook в Webflow

Webhook в Webflow - это более прямой путь. При каждой отправке формы Webflow выполняет HTTP POST-запрос на указанный тобой URL. Ты контролируешь принимающий endpoint и можешь делать с payload всё что угодно.

Как настроить:

1. Перейди в Настройки проекта - Интеграции - Webhooks в Webflow.
2. Нажми Добавить webhook , выбери триггер Form Submission .
3. Вставь URL endpoint-а принимающего сервиса.
4. Сохрани и протестируй на реальной заявке.

Payload, который отправляет Webflow, - это JSON-объект со значениями всех полей, названием формы и метаданными сайта. Типичный payload выглядит так:

{
  "name": "Contact Form",
  "site": "my-webflow-site",
  "data": {
    "Name": "Jane Smith",
    "Email": "[email protected]",
    "Message": "Hi, I'd like a quote."
  },
  "submittedAt": "2024-11-15T10:22:00Z"
}

Загвоздка в том, что нужно что-то для приёма этого webhook. Варианты: небольшой Cloudflare Worker , Pipedream workflow или специализированный бэкенд для форм. Писать собственный обработчик - это именно та задача с "кастомным бэкендом", которую эта статья помогает избежать. Именно здесь сервисы form-to-email становятся самым чистым решением.

Замена endpoint формы на внешний сервис

Вместо того чтобы вообще использовать встроенный обработчик Webflow, можно направить атрибут action формы на сторонний сервис для обработки форм. Сервис принимает POST-запрос, валидирует его, фильтрует спам и отправляет тебе результаты по email. Никакого бэкенда на твоей стороне не нужно.

Процесс настройки в Webflow:

1. В редакторе Webflow выбери элемент формы.
2. В панели Настройки формы укажи в поле Действие URL endpoint-а твоего сервиса (например, https://sendform.net/!your-form-id ).
3. Установи Метод в значение POST .
4. Убедись, что у каждого поля ввода есть атрибут name - Webflow устанавливает их по умолчанию.
5. Опубликуй сайт и протестируй отправку.

Такой подход полностью обходит встроенный обработчик форм Webflow. Заявка идёт напрямую из браузера посетителя на сервис форм. Ты получаешь email, сервис занимается повторными попытками и фильтрацией спама, а Webflow остаётся просто UI-слоем.

Этот же подход работает для любого статического или no-code сайта. Если ты также используешь хостинг на GitHub Pages или Cloudflare Pages, статья о бесплатном хостинге статических сайтов с рабочими контактными формами описывает точно такой же подход.

Sendform против альтернатив

Несколько сервисов для форм работают с Webflow. Вот как выглядит сравнение основных вариантов по параметрам, которые реально важны для контактной формы:

Sendform выделяется по нескольким конкретным причинам, которые не помещаются в таблицу:

• Настройка без лишних шагов: Ты получаешь URL endpoint-а формы без предварительной регистрации. Вставь его в поле "Действие" в Webflow - и готово.
• Заявки не хранятся по умолчанию: Sendform пересылает данные по email и не сохраняет их на своих серверах - это правильное поведение по умолчанию с точки зрения соответствия GDPR. Конкуренты вроде Formspree хранят все заявки в своей панели управления, а значит данные твоих пользователей живут на стороннем сервере неограниченное время.
• Удобно для разработчиков и доступно без кода: В отличие от Zapier, нет никакого workflow, который нужно поддерживать. В отличие от Netlify Forms, сервис не привязан к конкретному хостинг-провайдеру - работает с Webflow, GitHub Pages или любым другим хостингом.
• Честный бесплатный тариф: Никаких скрытых стен "обновись, чтобы разблокировать редиректы", которые другие сервисы используют для перевода на платные планы.

Какой подход выбрать?

Правильный ответ зависит от того, что тебе реально нужно после отправки формы:

• Только email-уведомления: Используй Sendform. Вставь URL endpoint-а в поле "Действие" в Webflow - займёт две минуты.
• Email + синхронизация с CRM или таблицей: Используй Sendform для доставки email и при необходимости добавь шаг в Zapier, triggered входящим письмом, или используй webhook-вывод Sendform, если он доступен на твоём тарифе.
• Сложная многошаговая автоматизация: Webhook из Webflow в Make или Zapier здесь оправдан, но закладывай бюджет на платный тариф.
• Ты уже на Netlify: Netlify Forms подойдёт для простых случаев, но лимит в 100 заявок в месяц быстро закончится на любом активном сайте.

Для подавляющего большинства контактных форм в Webflow - имя, email и поле сообщения, которые должны надёжно попадать в твой почтовый ящик - Sendform это самый быстрый и чистый путь. Никакого бэкенда, никаких ежемесячных лимитов задач, за которыми нужно следить, и никаких данных заявок, которые лежат в сторонней панели управления, о которой ты забыл.

Обрабатывай контактную форму Webflow без написания бэкенда

Sendform даёт тебе готовый endpoint формы, который можно вставить прямо в поле "Действие" в Webflow - заявки с формы мгновенно приходят в твой почтовый ящик, с фильтрацией спама и настройками, соответствующими GDPR, из коробки.

Попробовать Sendform бесплатно →