Мультистеп-калькулятор з умовною логікою, якого немає у стандартних блоках Tilda

Форми Tilda вміють один крок і прості поля. Як тільки клієнту потрібне покрокове опитування з розрахунком ціни й полями, що залежать від попередніх відповідей, конструктор впирається у стелю. Нижче — робочий віджет, що вирішує це через вставку коду в блок T123.

Біль

Де стандартна Tilda зупиняється

Що просять клієнти

Покрокова анкета: спочатку тип проєкту, потім опції, потім контакт.
Ціна рахується на льоту й видна до відправки заявки.
Поля залежать від відповідей: обрав магазин — з'явилося питання про кількість товарів.
Валідація телефону до відправки, а не мовчазний пропуск сміття в CRM.

Що дає конструктор із коробки

Форми в один крок, без розгалуження й розрахунку суми.
Zero Block малює що завгодно, але логіку не рахує.
Готового блоку «калькулятор» у бібліотеці немає.
Вихід, передбачений самою платформою: свій HTML і JS через блок T123.

Живий артефакт

Калькулятор, як він стає на сторінку Tilda

Це не скриншот і не макет: віджет працює прямо тут. Ціни умовні, для демонстрації логіки.

Розрахунок вартості сайтукрок 1 з 3

0 грнпопередньо

Рішення

Як це влаштовано всередині

Механіка

Один самодостатній блок: розмітка, стилі і JS з префіксом класів t123x, щоб не конфліктувати зі стилями Tilda.
Стан кроків і ціна рахуються в одному об'єкті, розгалуження полів залежить від обраного типу проєкту.
Заявка збирається в JSON і йде вебхуком у будь-яку CRM або Telegram. На стенді відправку вимкнено, payload показується на екрані.

Куди вставляти

У Tilda: Бібліотека блоків, категорія «Інше», блок T123.
Вставити код віджета цілком у тіло блоку.
Натиснути Опублікувати: код у T123 працює тільки на опублікованій сторінці, у редакторі він видно як текст.

Каркас вставки (фрагмент)

<div id="t123x" class="t123x">...</div>
<style> /* усі стилі з префіксом .t123x */ </style>
<script>
  var state = { step: 1, type: null, opts: [], pages: 1, goods: null };
  function price(){ /* базова ціна типу + опції + сторінки + товари */ }
  function render(){ /* крок 1: тип, крок 2: опції з розгалуженням, крок 3: контакт */ }
  // відправка: fetch(WEBHOOK_URL, {method:'POST', body: JSON.stringify(payload)})
</script>

Повний код віджета лежить у вихідному коді цієї сторінки одним блоком: відкрийте view-source і скопіюйте все між маркерами T123X-WIDGET-START і T123X-WIDGET-END.

Як перевірити

Перевірка за три хвилини

Пройдіть калькулятор вище: виберіть «Інтернет-магазин» і переконайтеся, що з'явилося питання про кількість товарів, якого немає у інших типів.
На кроці 3 введіть телефон коротший дев'яти цифр: форма не пропустить і підсвітить помилку.
Заповніть коректно і натисніть «Отримати розрахунок»: побачите JSON-payload, який у бойовому варіанті відправив би вебхук у CRM.
Відкрийте view-source: весь віджет дійсно один вставлений блок без зовнішніх бібліотек.