Мультистеп-калькулятор с условной логикой, которого нет в стандартных блоках 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: весь виджет действительно один вставляемый блок без внешних библиотек.