N8n form

N8n Form: Полное руководство по созданию и интеграции веб-форм

N8n Form — это встроенный функционал платформы автоматизации n8n, предназначенный для создания и обработки веб-форм без необходимости написания кода. Этот инструмент позволяет генерировать уникальные URL-адреса форм, которые могут быть встроены на сайты, отправлены по электронной почте или использованы в мессенджерах для сбора данных. Собранные данные автоматически запускают рабочие процессы (workflows) в n8n, где они могут быть обработаны, преобразованы и отправлены в любые подключенные системы, такие как CRM, базы данных, телеграм-боты или таблицы.

Архитектура и принцип работы N8n Form

Форма в n8n не является самостоятельным приложением, а представляет собой специальный триггерный узел (Webhook node) в рабочем процессе. При создании формы n8n генерирует уникальный публичный HTTPS-эндпоинт. Когда пользователь заполняет и отправляет форму, данные передаются методом POST на этот эндпоинт, что инициирует выполнение связанного рабочего процесса. Данные формы становятся доступными в workflow как выходные данные узла Webhook и могут использоваться в последующих узлах.

Создание базовой формы: пошаговый процесс

Процесс создания формы состоит из нескольких этапов:

• Создание нового рабочего процесса: В интерфейсе n8n необходимо создать новый workflow.
• Добавление узла Webhook: Из списка триггеров требуется выбрать узел «Webhook». В его настройках необходимо активировать опцию «Respond with Webhook» и выбрать метод «GET». Это действие автоматически создаст URL формы.
• Конфигурация полей формы: В том же узле Webhook, в разделе «Parameters», определяются поля формы. Каждому полю присваивается имя (Name) и тип (Type).
• Добавление узлов для обработки данных: После узла Webhook добавляются узлы для дальнейших действий, например, «Send Email», «Google Sheets», «Telegram» и другие.
• Активация workflow: Рабочий процесс необходимо перевести в активное состояние, после чего URL формы станет доступным для использования.

Типы полей и их параметры

Узел Webhook в режиме формы поддерживает различные типы полей для ввода данных. Каждое поле имеет набор конфигурируемых параметров.

Тип поля (Type)	Описание	Ключевые параметры
String	Однострочное текстовое поле.	Required (обязательное), Default Value, Placeholder, Validation Regex.
Number	Поле для ввода чисел.	Required, Default Value, Min Value, Max Value.
Options	Выпадающий список (select) или радио-кнопки.	Required, Values (список опций в формате name/value).
Boolean	Чекбокс (флажок).	Required, Default Value (true/false).
Date	Поле для выбора даты.	Required, Default Value.
File	Поле для загрузки файла.	Required, Max File Count, Allowed File Types.

Обработка и интеграция данных из формы

Данные, полученные из формы, доступны в рабочем процессе как JSON-объект. К ним можно обращаться через выражение {{$node["Webhook"].json["field_name"]}}. Это позволяет гибко использовать введенную информацию.

• Валидация и преобразование: С помощью узлов «Function» или «IF» можно добавить дополнительную проверку данных, преобразовать их или разветвить workflow по условиям.
• Сохранение в базах данных: Узлы для работы с PostgreSQL, MySQL, Airtable позволяют напрямую записывать данные из формы в таблицы.
• Интеграция с облачными сервисами: Данные можно отправлять в Google Sheets, Notion, CRM-системы (HubSpot, Pipedrive), сервисы рассылок (Mailchimp, SendGrid).
• Уведомления: Мгновенная отправка уведомлений о новой заявке в Telegram, Slack, Discord или по электронной почте.

Расширенные возможности и кастомизация

N8n Form предоставляет возможности для создания сложных интерактивных форм.

• Многостраничные формы: Реализуются путем создания нескольких узлов Webhook (для каждой страницы) и управления потоком данных между ними с помощью логических узлов.
• Динамическое обновление контента: Используя внешние API, можно заполнять выпадающие списки данными из других систем в реальном времени.
• Кастомизация HTML: Стандартный вид формы минималистичен. Для глубокой кастомизации интерфейса можно создать собственную HTML-форму на отдельной странице, которая будет отправлять POST-запрос на webhook-URL n8n.
• Обработка файлов: Загруженные файлы сохраняются в n8n в виде бинарных данных. Их можно обработать, переименовать и отправить в облачные хранилища (Google Drive, S3) или прикрепить к письму.

Безопасность и ограничения

Использование встроенных форм требует внимания к вопросам безопасности и понимания ограничений.

• Аутентификация форм: Публичные формы не имеют встроенной защиты паролем. Для ограничения доступа можно использовать кастомные заголовки или параметры запроса, проверяемые в workflow.
• Защита от спама: Рекомендуется реализовать проверку reCAPTCHA через интеграцию с соответствующим API Google в начале workflow.
• Валидация на стороне сервера: Всегда дублируйте критическую валидацию данных внутри workflow, так как клиентская валидация может быть обойдена.
• Ограничения n8n Cloud: Для облачной версии n8n существуют лимиты на размер загружаемого файла (обычно до 16 МБ) и время выполнения workflow. Формы требуют активного (активированного) workflow.

Сравнение с альтернативными решениями

Критерий	N8n Form	Специализированные сервисы (Google Forms, Typeform)	Самостоятельная разработка
Интеграция	Мгновенная и глубокая, данные сразу попадают в workflow.	Требует настройки подключений, часто через Zapier/Make.	Полный контроль, но требует написания кода для каждой интеграции.
Гибкость логики	Максимальная. Любая логика обработки, ветвления, преобразования.	Ограничена функционалом платформы.	Абсолютная, но сложна в реализации.
Дизайн и UX	Базовый, минимально настраиваемый интерфейс.	Высокий, множество шаблонов и тем.	Любой, но требует усилий фронтенд-разработчика.
Стоимость и хостинг	Зависит от выбора (self-hosted или cloud). Self-hosted — единовременные затраты на сервер.	Подписка, часто с лимитами на количество ответов.	Затраты на хостинг и время разработки.

Практические примеры использования

Пример 1: Форма обратной связи на сайте. Пользователь заполняет имя, email и сообщение. Workflow сохраняет данные в Google Sheets, отправляет копию письма менеджеру в Telegram и автоматический ответ «Спасибо!» на email отправителя через SendGrid.

Пример 2: Заявка на вакансию с резюме. Форма собирает контактные данные и позволяет загрузить файл резюме. Workflow сохраняет текстовые данные в Airtable, загружает файл в указанную папку Dropbox, а ссылку на файл добавляет в запись Airtable, после чего уведомляет HR в Slack.

Пример 3: Динамическая форма выбора услуги. Первое поле — выбор категории услуги (например, из Options). Следующий узел «IF» проверяет выбор и направляет пользователя на разные вторые страницы формы (разные узлы Webhook) с уточняющими вопросами, специфичными для каждой категории.

Ответы на часто задаваемые вопросы (FAQ)

Можно ли изменить дизайн стандартной формы n8n?

Стандартный интерфейс формы, генерируемый n8n, практически не поддается кастомизации (цвет, шрифты, расположение полей). Для полного контроля над дизайном необходимо создать свою HTML-страницу с формой, стилизовать ее с помощью CSS, а в атрибуте action формы указать URL webhook из n8n. Имена полей input должны совпадать с именами параметров, заданных в узле Webhook.

Как защитить форму от спама и ботов?

Наиболее эффективный способ — интеграция Google reCAPTCHA v2 или v3. На свою кастомную HTML-страницу формы необходимо добавить виджет reCAPTCHA. В workflow n8n сразу после узла Webhook добавьте узел «HTTP Request» для проверки ответа пользователя путем отправки секретного ключа на API Google. Только при успешной проверке workflow должен продолжать выполнение.

Что происходит с данными формы, если workflow неактивен?

Если рабочий процесс, содержащий узел формы (Webhook), находится в неактивном состоянии, его эндпоинт недоступен. Попытка отправить данные на URL формы завершится ошибкой (например, 404 или 503). Данные не сохраняются и теряются. Перед использованием формы всегда убеждайтесь, что workflow активирован.

Есть ли ограничение на размер загружаемого через форму файла?

Да, ограничения существуют. Для self-hosted версии n8n лимит зависит от конфигурации вашего сервера и может быть изменен через переменные окружения. Для n8n Cloud действуют строгие лимиты, которые указаны в тарифном плане (например, 16 МБ или 32 МБ). Для загрузки больших файлов рекомендуется использовать прямую загрузку в облачное хранилище (например, S3), предоставив пользователю сгенерированную временную ссылку.

Можно ли создать форму с логической веткой (если ответ А, то задать вопрос Б)?

Да, такая логика реализуется с помощью многостраничных форм. Первый узел Webhook собирает первоначальные данные (ответ А). Далее узел «IF» или «Switch» анализирует полученное значение и, в зависимости от результата, направляет выполнение workflow к одному из нескольких других узлов Webhook, каждый из которых представляет собой следующую страницу формы с уникальным URL и своим набором полей (вопрос Б). Необходимо организовать передачу данных между этими страницами, например, через скрытые поля.

Как интегрировать n8n форму на сайт WordPress?

Существует два основных метода. Первый: скопировать сгенерированный URL формы и вставить его в атрибут action любой кастомной HTML-формы, созданной через виджет или шорткод. Второй: использовать URL формы как endpoint для плагинов, которые позволяют отправлять данные на внешний URL (например, плагины для создания кастомных форм). Необходимо убедиться, что имена полей в форме на WordPress совпадают с именами параметров в узле Webhook n8n.