Форма заказа нескольких товаров в Тильде

Форму заказа нескольких товаров в Тильде обычно пытаются сделать через стандартный конструктор форм, но T123 или Zero Block из коробки собирают только одну позицию за раз: имя, телефон, один текстовый комментарий. Как только у клиента в заявке пять-семь товаров с разным количеством, штатные поля превращаются в кашу из текста, которую менеджер потом час разбирает вручную. Я делал такие формы для оптовых каталогов и B2B-лендингов на Тильде не раз, и ниже разберу рабочую схему: от штатной корзины Tilda до кастомного скрипта, который собирает список позиций в один JSON и передаёт его в CRM.

Когда нужна форма заказа нескольких товаров, а когда хватит корзины Tilda

Штатная корзина Tilda, блок T‑Cart он же Tilda Store, отлично работает, если у вас реальный интернет-магазин с фиксированными ценами и онлайн-оплатой: клиент добавляет товары, видит сумму, платит через встроенный модуль. Но у половины моих клиентов на Тильде другая ситуация: каталог с ценами «по запросу», опт от определённого количества, комплектация под проект, в общем всё, где сумму заказа считает менеджер, а не касса сайта. В таком случае городить полноценный магазин с корзиной и оплатой избыточно: клиенту нужно отметить нужные позиции, указать количество и отправить заявку, дальше с ним свяжутся. Вот здесь и нужна форма заказа нескольких товаров, гибрид формы обратной связи и мини-корзины без чекаута.

Признаки, что вам нужен именно такой гибрид, а не полноценный интернет-магазин:

• цены индивидуальные или зависят от объёма заказа;
• оплата не через сайт, а по счёту или при получении заказа;
• каталог до 30-40 позиций, где не нужен полноценный фильтр и поиск по магазину;
• заявки обрабатывает менеджер вручную или полуавтоматически через CRM.

Если ни один из пунктов не про вас и клиент реально должен платить онлайн прямо на сайте, проще подключить полноценный магазин Tilda сразу с оплатой, а не собирать заявки руками.

Штатные блоки Tilda для сбора нескольких позиций

T‑Cart требует включённого магазина Tilda Store с реальными ценами и работает как полноценная корзина: добавил товар, счётчик количества, итоговая сумма, переход к оплате. Для сценария «цена по запросу» он не подходит: сумма всегда посчитана, а поле для комментария по каждой позиции отдельно не предусмотрено.

Второй вариант, Zero Block с карточками товаров и отдельной формой ниже. Верстается быстро: на каждую карточку вешается счётчик количества через data-атрибуты, форма стоит отдельным блоком. Проблема в том, что из коробки эти два блока никак не связаны. Менеджер получает письмо с именем и телефоном, а какие товары и в каком количестве выбрал клиент - непонятно, если это не прописать скриптом.

Есть третий полу-рабочий вариант: чекбоксы с названиями товаров прямо внутри формы Tilda (T123). Он держит до 10-15 позиций, дальше форма превращается в длинную простыню, а количество для каждой позиции всё равно не спросишь без кастомных полей. Для каталога из 5-7 товаров это рабочий компромисс без единой строчки кода, для каталога побольше - нет.

Кастомный скрипт: как собрать список товаров в одну заявку

Рабочая схема, которую я обычно ставлю: карточки товаров в Zero Block со счётчиком количества, у каждой карточки атрибуты data-sku, data-title, data-price. В форме - скрытое поле, куда перед отправкой скрипт кладёт JSON со списком выбранных позиций. Дальше письмо или запись в CRM приходит не набором разрозненных полей, а готовым составом заказа.

document.addEventListener('submit', function (e) {
  var form = e.target.closest('form');
  if (!form || form.getAttribute('data-tilda-form') !== 'multi-order') return;

  var items = [];
  document.querySelectorAll('.js-order-item').forEach(function (block) {
    var qty = parseInt(block.querySelector('.js-order-qty').value, 10) || 0;
    if (qty > 0) {
      items.push({
        sku: block.dataset.sku,
        title: block.dataset.title,
        price: Number(block.dataset.price),
        qty: qty
      });
    }
  });

  if (!items.length) {
    e.preventDefault();
    alert('Выберите хотя бы один товар');
    return;
  }

  var hidden = form.querySelector('input[name="orderjson"]');
  hidden.value = JSON.stringify(items);
}, true);

Важный момент: скрипт вешается на capture-фазу события submit (третий аргумент true), потому что Tilda сама обрабатывает отправку формы через свой обработчик, и нужно успеть подставить значение в скрытое поле до того, как форма уйдёт на сервер. На практике здесь чаще всего и ловят баг: скрипт срабатывает, но с опозданием на один клик, и в CRM прилетает пустое поле orderjson.

Счётчик количества у каждой карточки - обычный инпут с кнопками плюс/минус, без сложной логики. Отдельно стоит добавить пересчёт видимой суммы заказа на лету, если цены на сайте всё же фиксированные, чтобы клиент видел итог до отправки, а не после звонка менеджера.

Интеграция формы с оплатой и доставкой

После того как заявка с составом заказа ушла с сайта, дальше её обычно нужно куда-то передать: в CRM, менеджеру в мессенджер, на расчёт доставки. Схему, которая у меня чаще всего в проде: вебхук от Tilda-формы летит в n8n, там JSON с товарами раскладывается на строки заказа, создаётся сделка в amoCRM или Bitrix24, а уведомление с составом заказа и суммой падает менеджеру в Telegram через aiogram-бота. Отдельным шагом можно подставить расчёт доставки по зонам СДЭК на основе города клиента, а не гонять его на отдельный калькулятор.

Если на сайте всё же нужна оплата по части заказа (например, предоплата), эквайринг подключается тем же способом, что и для обычного магазина Tilda: T‑Bank принимает оплату по ссылке или через встроенный виджет, а сумма для оплаты берётся не из корзины Tilda, а формируется тем же скриптом на основе выбранных позиций. Отдельно ставится страница с деталями заказа для менеджера, если товаров больше 8-10 и в письме их уже неудобно читать.

Собирать такую связку формы, CRM, эквайринга и доставки вручную на голом JS долго и хрупко к любому обновлению Tilda, я обычно беру на себя разработку интеграции формы с CRM и эквайрингом для Tilda, чтобы заказчик получил готовый рабочий поток заявок, а не набор скриптов, которые ломаются при следующем редизайне сайта.

Валидация и защита от пустых и задвоенных заявок

Без проверок на стороне скрипта форма заказа нескольких товаров быстро обрастает мусорными заявками. Что я обычно ставлю по умолчанию:

• минимум одна позиция с количеством больше нуля, иначе отправка блокируется до заполнения;
• дедупликация по sku, если клиент кликнул «добавить» дважды на одной карточке;
• минимальная сумма заказа, если она вообще есть, проверяется до отправки, а не после звонка менеджеру;
• скрытое honeypot-поле в форме против простых спам-ботов, которые заполняют все поля подряд;
• блокировка повторной отправки той же формы чаще одного раза в 10-15 секунд, чтобы двойной клик не создавал две одинаковые заявки в CRM.

Отдельно стоит проверять количество на карточке: без ограничения сверху боты и невнимательные клиенты иногда вписывают в поле количества случайные значения вроде 99999, и такая заявка улетает в CRM как есть, если её не отсечь на этапе валидации.

Сколько стоит доработка формы заказа нескольких товаров в Тильде

Цена зависит от того, что уже есть на сайте и что нужно на выходе: просто собрать список товаров в письмо или довести до полноценной связки с CRM и доставкой.

Комиссия эквайринга не входит в стоимость разработки и зависит от тарифа банка, а не от того, лендинг это или магазин, обычно нужно уточнять её отдельно у своего банка при подключении оплаты.

Частые вопросы

Можно ли сделать форму заказа нескольких товаров без программиста, средствами Tilda?

Частично да, если товаров немного: чекбоксы с названиями прямо в форме T123 держат 10-15 позиций без указания количества по каждой. Как только нужно количество на позицию и передача состава заказа в CRM отдельным полем, без скрипта не обойтись.

Как передать список товаров из формы в amoCRM или Bitrix24?

Через вебхук от Tilda: заявка с JSON состава заказа улетает на обработчик, дальше n8n или отдельный серверный скрипт раскладывает товары на строки сделки в CRM. Прямой встроенной интеграции «форма с несколькими товарами -> строки сделки» у Tilda нет, это всегда доработка.

Что делать, если в каталоге больше 40 товаров и форма становится слишком длинной?

В этом случае обычно выгоднее перейти на полноценный магазин Tilda с фильтрами и поиском по каталогу, а не тащить длинный список карточек через форму, для такого объёма позиций разбор заявок вручную всё равно станет узким местом.

Нужен ли отдельный интернет-магазин, если у меня всего 5-10 товаров с ценой по запросу?

Нет, для такого объёма форма заказа с кастомным скриптом обходится дешевле и работает быстрее в настройке, чем разворачивать Tilda Store с корзиной ради товаров, которые всё равно продаются по индивидуальному счёту.