Как добавить в форму поле с динамическими ячейками на Tilda?

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

Модификация работает с включенным Autoscale в блоках

Модификация работает с Zero Block и стандартными блоками

Номер модификации в библиотеке TiCode

Генератор кода

поделиться модификацией

Тип формы

Класс формы

Переменная поля формы

Текст ячеек

Обязательное поле

Тип курсора

Настройки ячеек

Цвет фона

Цвет текста

Радиус скругления углов

Цвет обводки

Толщина обводки

Размер текста

Настройки ячеек при наведении (hover)

Цвет фона при наведении

Цвет текста при наведении

Цвет обводки при наведении

войти

Войдите в аккаунт чтобы получить доступ к генератору кода

регистрация

оплатить

Этот генератор кода доступен только тем кто оплатил подписку

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script> <script> document.addEventListener("DOMContentLoaded", () => { const TiCodeFormObserver = new MutationObserver((mutationsList, TiCodeFormObserver) => { const TCDformtype = document.querySelector(".ticellform"); const TCDforminput = document.querySelector("input[name='ticellinput']"); if (TCDformtype && TCDforminput) { TiCodeFormObserver.disconnect(); const TCDcellContainer = document.createElement("div"); TCDcellContainer.classList.add("ti-input-cell"); const TCDcellsText = 'Качество, Цена, Сроки'; const TCDinputcells = TCDcellsText.split(',').map((text, index) => ({ text: text.trim(), id: (index + 1).toString() })); TCDinputcells.forEach(cell => { const div = document.createElement("div"); div.classList.add("cell"); div.setAttribute("data-id", cell.id); div.textContent = cell.text; TCDcellContainer.appendChild(div); }); TCDforminput.style.position = 'relative'; TCDforminput.parentElement.style.position = 'relative'; TCDforminput.parentElement.appendChild(TCDcellContainer); const TCDautoEmpty = false; if (!TCDautoEmpty) { const orderedCells = TCDinputcells.map(cell => cell.text).join(", "); TCDforminput.value = orderedCells; } TCDcellContainer.addEventListener("wheel", (event) => { event.preventDefault(); TCDcellContainer.scrollLeft += event.deltaY || event.wheelDelta; }); new Sortable(TCDcellContainer, { animation: 150, handle: ".cell", onEnd: () => { const orderedCells = Array.from(TCDcellContainer.children) .map(cell => cell.textContent.trim()) .join(", "); TCDforminput.value = orderedCells; } }); const form = TCDformtype.querySelector("form"); if (form) { form.addEventListener("submit", () => { const orderedCells = Array.from(TCDcellContainer.children) .map(cell => cell.textContent.trim()) .join(", "); TCDforminput.value = orderedCells; }); } } else { } }); TiCodeFormObserver.observe(document.body, { childList: true, subtree: true }); const intervalId = setInterval(() => { const TCDformtype = document.querySelector(".t-input-block"); const TCDforminput = document.querySelector("input[name='podbor']"); if (TCDforminput) { clearInterval(intervalId); TiCodeFormObserver.disconnect(); } }, 1000); }); </script> <style> .ti-input-cell { position: absolute; top: 50%; left: 5px; right: 5px; transform: translateY(-50%); display: flex; gap: 5px; z-index: 10; pointer-events: auto; max-width: 100%; overflow-x: auto; overflow-y: hidden; height: 100%; } .cell { align-items: center; background-color: #F96855; border: px solid ; padding: 5px 10px; border-radius: 5px; cursor: move; font-size: 16; color: #ffffff; white-space: nowrap; flex-shrink: 0; user-select: none !important; margin: 5px 0px 5px 0px; text-align: center; display: flex; font-family: Arial, sans-serif; } .cell:hover { background-color: ; color: ; border-color: } .ti-input-cell::-webkit-scrollbar, .ti-input-cell::-webkit-scrollbar-thumb { display: none; } input[name='ticellinput']::selection { background-color: transparent; color: transparent; } input[name='ticellinput'] { color: transparent !important; caret-color: black; pointer-events: none; user-select: none !important; } </style>

КОПИРОВАТЬ КОД

1. Создаем форму в Zero Block или стандартный блок с формой и выбираем в генераторе тип формы который создали. Если создали форму в зеро блок, то присваиваем ей класс ticelliform
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс

Если создавали стандартный блок формы, то поле "Класс формы" оставляем пустым;

2. Создаем в форме поле ввода в одну строку и указываем Имя переменной (variable name) - ticellinput Скрипт в это поле и будет подгружать наши блоки с текстом;

3. Указываем в генераторе в поле "Текст ячеек" названия ячеек через запятую. Если ячеек будет больше, чем может поместиться в ширину поля ввода, автоматически включится горизонтальная прокрутка.

4. При необходимости указываем дополнительные настройки в генераторе:
Обязательное поле - если включено, и в настройках формы стоит галочка "обязательно к заполнению", поле будет считаться заполненным только после того, как пользователь хотя бы раз передвинет ячейки. Если выключено, поле считается заполненным, даже если ячейки не двигались;
Тип курсора - выбираем тип курсора который будет показывать при наведении на ячейки;
Цвет фона и Цвет текста - указываем цвет для фона и текста ячеек;
Радиус скругления углов - указываем радиус скругления углов ячеек. Если скругление не требуется, ставим значение 0;
Цвет обводки и Толщина обводки - указываем цвет и толщину обводки ячеек. Толщину лучше указывать в пределах от 1 до 5;
Размер текста - указываем размер текста ячеек. Учитывайте что такой же размер будет и при адаптивах;
Настройки ячеек при наведении (hover)- указываем цвет при наведении. Если не нужны, оставляем поля пустыми;

5. Копируем готовый код и вставляем в HTML блок Т123

Примечание! При большом количестве ячеек скроллить можно с помощью колесика мыши, если курсор находится в зоне поля. Модификация изначально разрабатывалась для Zero Block, но также совместима с большинством стандартных форм. Однако с некоторыми формами она может не работать из-за различий в разметке.

При отправке формы, данные будут передаваться в виде текстовой цепочки через запятую, сохраняя последовательность, заданную пользователем перед отправкой.

Подбор недвижимости на Бали