НАВЧАЛЬНИЙ ПРИКЛАД

Підготовка інтеграції форми з CRM

Змініть JSON заявки й перевірте, як код розділяє контакт і завдання. Помилки полів видно до наступного кроку; справжня CRM не підключена.

DEMOБез вигаданих показників продажів

Полотно:

Це ширина демонстраційного полотна. Вона не замінює перевірку справжнього пристрою.

DEMO / crm-mapping

Підготовка інтеграції форми з CRM

В інтеграції недостатньо передати довільний текст форми: системі-отримувачу потрібна зрозуміла структура. Демонстрація показує підготовку даних заявки з ім’ям, email, послугою та повідомленням до майбутнього передавання в CRM.

Відкрити робочу демонстрацію

ПІДГОТОВКА ІНТЕГРАЦІЇLOCAL / JS

FORM → CRM

Допомагає погодити формат майбутньої інтеграції та перевірити, які поля отримає система-отримувач.

Заявка JSON: name, email, service, message

Змініть приклад і запустіть перевірку.

Результат перетворення

Це підготовка структури: мережевого запиту, надсилання листа й підключення CRM немає.

Для запуску потрібен JavaScript. Розбір завдання й фрагмент коду доступні нижче.

Код, який можна спробувати

Фрагмент функції, яка виконує перетворення в цій демонстрації.

function mapInquiry(payload) {
  if (payload === null || typeof payload !== 'object' || Array.isArray(payload) ||
      Object.getPrototypeOf(payload) !== Object.prototype) throw new Error('CRM_OBJECT');
  const name = payload.name === undefined ? '' : payload.name;
  if (typeof name !== 'string' || name.trim().length > 100) throw new Error('CRM_NAME');
  if (typeof payload.email !== 'string') throw new Error('CRM_EMAIL');
  const email = payload.email.trim();
  if (email.length > 254 || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) throw new Error('CRM_EMAIL');
  if (typeof payload.service !== 'string' || !['site', 'code', 'ads'].includes(payload.service.trim())) {
    throw new Error('CRM_SERVICE');
  }
  if (typeof payload.message !== 'string' || payload.message.trim().length < 10 ||
      payload.message.trim().length > 1500) throw new Error('CRM_MESSAGE');
  return {
    contact: {name: name.trim(), email},
    request: {service: payload.service.trim(), message: payload.message.trim()},
    source: 'portfolio-demo'
  };
}

Локальна демонстрація: текст обробляється в браузері без завантаження файлу, сервера та збереження даних.

Змінити навчальний заголовокЛише текст, без HTML. Зміни залишаються у вкладці.

Завдання в цьому сценарії

Як побудовано рішення

Читаємо редагований JSON: email, service і message обов’язкові, name необов’язкове. Перевіряємо синтаксис, формат email і послугу зі списку code, site або ads.
Збираємо результат з окремими блоками contact і request та додаємо джерело portfolio-demo. Невідомі вхідні поля в результат не включаємо.
Показуємо підготовлену структуру на сторінці або пояснюємо помилку. Мережевого запиту, збереження контакту й передавання у справжню CRM в цьому прикладі немає.

Проміжні матеріали

Початкове завдання та обмеження → В інтеграції недостатньо передати довільний текст форми: системі-отримувачу потрібна зрозуміла структура. Демонстрація показує підготовку даних заявки з ім’ям, email, послугою та повідомленням до майбутнього передавання в CRM.
Склад рішення → Редагована заявка JSON і приклади коректного введення та помилок.
Перевірка перед запуском → Перевірити обов’язкові поля, неправильний email, невідому послугу та виключення зайвих вхідних полів із результату.

Що перевірити перед запуском

Перевірити обов’язкові поля, неправильний email, невідому послугу та виключення зайвих вхідних полів із результату.
Для реальної інтеграції погодити контракт CRM, доступи й правила зберігання; окремо перевірити передавання, повторні спроби та захист від дублів.

Що входить у приклад

Редагована заявка JSON і приклади коректного введення та помилок.
Локальна перевірка вхідних полів і перетворення на contact, request та source.
Результат для перегляду на сторінці без підключення зовнішньої системи.

Технічний паспорт

DevPilot 1.5.2 · Охоплення перевірок, вихідний код і дата свідчень

Статус: DEMO · Вигадана компанія й навчальні дані
Матеріали: Власні HTML/CSS/SVG, вихідний код і локальні алгоритми. Фотографії клієнтів не використовуються.
Обробка: Демонстрація виконується в браузері. Відкриття прикладу не створює заявку чи оплачений проєкт.
Докази: Вміст і локальні перевірки відокремлені від справжнього браузерного, хостингового та комерційного приймання.