DevOps

Интеграция n8n для обработки форм контактов. Часть 2: Настройка workflow

Пошаговая инструкция по настройке n8n workflow для обработки форм контактов: установка, создание узлов, настройка интеграций.

~6 мин
#n8n #Workflow #Webhook #Email #Telegram #SQLite #Automation
Интеграция n8n для обработки форм контактов. Часть 2: Настройка workflow

Введение

В первой части мы рассмотрели архитектуру решения и преимущества использования n8n для обработки форм на статических сайтах. Теперь перейдем к практической части — созданию рабочего workflow, который будет принимать данные из формы, валидировать их, отправлять email, уведомлять в Telegram и сохранять в базу данных.

Лучший способ понять n8n — создать свой первый workflow. — Опыт разработчика

Регистрация в n8n.cloud

  1. Регистрация: Перейдите на n8n.io и создайте аккаунт
  2. Преимущества: Автоматические обновления, резервное копирование, HTTPS

Создание workflow

Шаг 1: Новый workflow

  1. Войдите в n8n
  2. Нажмите “Workflows” → “New workflow”
  3. Дайте название: “Contact Form Processing”
  4. Сохраните workflow

Шаг 2: Добавление Webhook узла

Webhook узел будет принимать данные из формы контактов.

Настройка Webhook узла yaml 
1
2
3
4
5
6

Тип: Webhook
HTTP Method: POST
Path: /webhook/form-contact
Response Mode: Respond to Webhook
Options:
  - CORS: * (для тестирования разрешает все)

Важные настройки:

  • Path: Уникальный путь для вашего webhook
  • Response Mode: “Respond to Webhook” позволяет контролировать ответ клиенту в n8n
  • CORS: Необходимо ограничить до домена в продакшене

Шаг 3: Добавление Edit Fields узла

Узел преобразует входящие данные в удобный формат.

Настройка Edit Fields узла javascript 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10

Values to Set:
  name: {{ $json.body.name }}
  email: {{ $json.body.email }}
  topic: {{ $json.body.topic }}
  message: {{ $json.body.message }}
  agreement: {{ $json.body.agreement }}
  timestamp: {{ $now }}
  ip: {{ $json.headers["x-real-ip"] }}
  userAgent: {{ $json.headers["user-agent"] }}
  website: {{ $json.body.website }}

Шаг 4: Добавление Code узла для валидации

Для валидации используем Code node с языком программирования javascript:

Code node: Валидация данных javascript 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

// Получаем данные из предыдущего узла
const { name, email, topic, message, agreement, website } = $json;

// Объект для хранения ошибок
const errors = {};

// Проверка имени
if (!name || name.trim() === '') {
  errors.name = "Имя обязательно";
}

// Проверка email с regex
const emailRegex = /^[^@]+@[^@]+\.[^@]+$/;
if (!email || !emailRegex.test(email)) {
  errors.email = "Некорректный email";
}

// Проверка темы
if (!topic || topic.trim() === '') {
  errors.topic = "Выберите тему";
}

// Проверка сообщения
if (!message || message.trim() === '') {
  errors.message = "Сообщение обязательно";
}

// Проверка согласия (checkbox возвращает "on" или true)
const isAgreed = agreement === true || agreement === "on" || agreement === "1";
if (!isAgreed) {
  errors.agreement = "Необходимо согласие на обработку данных";
}

// Проверка honeypot поля (должно быть пустым)
if (website && website.trim() !== '') {
  errors.honeypot = "Спам обнаружен";
}

// Проверяем, есть ли ошибки
const hasErrors = Object.keys(errors).length > 0;

// Возвращаем результат
if (hasErrors) {
  // Получаем первую ошибку
  const firstErrorKey = Object.keys(errors)[0];
  const firstErrorMessage = errors[firstErrorKey];
  
  return {
    success: false,
    error: firstErrorMessage,
    field: firstErrorKey,
    allErrors: errors,
    // Отправляем в выход "false" для обработки ошибок
    __$output: "false"
  };
} else {
  // Все проверки пройдены
  return {
    success: true,
    data: $json,
    // Отправляем в выход "true" для продолжения обработки
    __$output: "true"
  };
}

Шаг 5: Добавление IF узла для настройки выходов из Code node

  1. Выход “true” → дальнейшая обработка (Email, Telegram)
  2. Выход “false” → Error Response

Шаг 6: Настройка Email узла

Настройка Email узла (SMTP) yaml 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Тип: Email
Connection: SMTP
Настройки SMTP:
  Host: smtp.yandex.ru
  Port: 465 (SSL) или 587 (TLS)
  User: your-email@yandex.ru
  Password: [app-specific password]
  Secure: true (для порта 465)

Параметры письма:
  From: your-email@yandex.ru
  To: your-email@yandex.ru
  Subject: Новая заявка: {{ $json.data.topic }}
  Body Format: HTML
  Body:
    <h3>Новая заявка с сайта</h3>
    <p><strong>Имя:</strong> {{ $json.data.name }}</p>
    <p><strong>Email:</strong> {{ $json.data.email }}</p>
    <p><strong>Тема:</strong> {{ $json.data.topic }}</p>
    <p><strong>Сообщение:</strong><br>{{ $json.data.message }}</p>
    <p><strong>Время:</strong> {{ $json.data.timestamp }}</p>
    <p><strong>IP:</strong> {{ $json.data.ip }}</p>
    <p><strong>User Agent:</strong> {{ $json.data.userAgent }}</p>

Шаг 6: Настройка Telegram узла

Настройка Telegram узла yaml 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

Тип: Telegram
Resource: Bot
Operation: Send Message
Chat ID: ваш Telegram ID
Текст:
  📨 Новая заявка с сайта
  👤 Имя: {{ $json.data.name }}
  📧 Email: {{ $json.data.email }}
  📝 Тема: {{ $json.data.topic }}
  ⏰ Время: {{ $json.data.timestamp }}
  🌐 IP: {{ $json.data.ip }}
  
  💬 Сообщение:
  {{ $json.data.message }}

Как получить Chat ID в Telegram:

  1. Создайте бота через @BotFather
  2. Включить “Show Peer IDs in Profile” в Settings -> Advanced -> Expremental settings
  3. В профиле Бота посмотреть id

Шаг 7: Настройка Response узлов

Успешный Response

Success Response node json 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

Тип: Response
Response Code: 200
Headers:
  Content-Type: application/json
  Access-Control-Allow-Origin: *
Body:
  {
    "success": true,
    "message": "Заявка успешно отправлена",
    "timestamp": "{{ $now }}"
  }

Ошибка валидации

Error Response node json 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

Тип: Response
Response Code: 400
Headers:
  Content-Type: application/json
  Access-Control-Allow-Origin: *
Body:
  {
    "success": false,
    "error": "{{ $json.error }}",
    "field": "{{ $json.field }}"
  }

Соединение узлов

Соберите workflow в следующем порядке:

Порядок соединения узлов text 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

1. Webhook
   ↓
2. Edit Fields
   ↓
3. Code (валидация)
   ├─── Выход "true" ───▶ 4. Email
   │                         ↓
   │                     5. Telegram
   │                         ↓
   │                     6. Success Response
   │
   └─── Выход "false" ──▶ 7. Error Response

Тестирование workflow

Тест 1: Проверка webhook

Тестирование webhook через curl bash 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10

curl -X POST https://domain.app.n8n.cloud/webhook-test/form-contact \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Тестовый пользователь",
    "email": "test@example.com",
    "topic": "Вопрос по интеграции",
    "message": "Тестовое сообщение",
    "agreement": true,
    "website": ""
  }'

Тест 2: Проверка ошибок валидации

Тестирование ошибок валидации bash 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

# Пустое имя
curl -X POST https://domain.app.n8n.cloud/webhook-test/form-contact \
  -H "Content-Type: application/json" \
  -d '{"name": "", "email": "test@example.com"}'

# Некорректный email
curl -X POST https://domain.app.n8n.cloud/webhook-test/form-contact \
  -H "Content-Type: application/json" \
  -d '{"name": "Тест", "email": "invalid-email"}'

# Заполненное honeypot поле
curl -X POST https://domain.app.n8n.cloud/webhook-test/form-contact \
  -H "Content-Type: application/json" \
  -d '{"name": "Тест", "email": "test@example.com", "website": "spam"}'

Тест 3: Использование Execution History

  1. Отправьте тестовые данные
  2. Перейдите в “Executions” в n8n
  3. Найдите ваше выполнение
  4. Просмотрите данные на каждом узле
  5. Проверьте ошибки, если они есть

Оптимизация workflow

Добавление Rate Limiting в 1 узле (Webhook)

Rate Limit node yaml 
1
2
3

Тип: Webhook
Limit: 5 запросов
Duration: 60 секунд

Включи Retry On Fail в Webhook.

Проблемы с которыми столкнулся

Проблема: “No Respond to Webhook node found in the workflow” Решение: Послеь включения Webhook в режиме Respond to Webhook,необходимо в конце workflow добавить завершающий узел Webhook Response Node.

Проблема: Email не отправляется Решение: Проверьте SMTP настройки, используйте app-specific password для почтовых сервисов.

Заключение

В итоге создали полнофункциональный n8n workflow для обработки форм контактов. Workflow включает:

  1. Прием данных через webhook
  2. Валидацию с проверкой всех полей и honeypot защиты
  3. Отправку email с деталями заявки
  4. Уведомление в Telegram для мгновенного оповещения
  5. Ответ клиенту с информацией об успехе или ошибке

Ключевые моменты:

  • Использование Code node для сложной валидации
  • Тестированиие workflow через Execution History
  • Добавление Rate Limiting для защиты от DDoS атак

В следующей статье мы обновим фронтенд — модифицируем HTML форму, добавим JavaScript обработку и CSS стили для улучшения пользовательского опыта.

Что дальше?

В следующих статьях этой серии мы подробно рассмотрим:

  1. Часть 3: Обновление фронтенда — модификация HTML формы, добавление JavaScript, CSS стили
  2. Часть 4: Безопасность и тестирование — защита от спама, rate limiting, тестовые сценарии

*Это вторая статья из серии по интеграции n8n. В следующих частях мы перейдем к практической реализации.

Ещё по теме

Похожие материалы