URL скопирован в буфер обмена!
Как добавить в форму поле с динамическими ячейками на Tilda?
С помощью этой модификации можно добавить в стандартную или Zero Block форму Tilda поле ввода с динамическими ячейками. Пользователь сможет перетаскивать ячейки с текстом, задавая их последовательность, которая будет отправлена при отправке формы.
Модификация работает с включенным Autoscale в блоках
Модификация работает с Zero Block и стандартными блоками
Номер модификации в библиотеке TiCode
Тип формы
Класс формы
Переменная поля формы
Текст ячеек
Обязательное поле
Тип курсора
Настройки ячеек
Цвет фона
Цвет текста
Радиус скругления углов
Цвет обводки
Толщина обводки
Размер текста
Настройки ячеек при наведении (hover)
Цвет фона при наведении
Цвет текста при наведении
Цвет обводки при наведении
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD104--><script src="https://cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
const TiCodeFormObserver = new MutationObserver((mutationsList, observer) => {
const TCDformtype = document.querySelector(".ticellform");
const TCDforminput = document.querySelector("input[name='ticellinput']");
if (TCDformtype && TCDforminput) {
observer.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 leftShape = document.createElement('div');
const rightShape = document.createElement('div');
leftShape.className = 'scroll-shape left';
rightShape.className = 'scroll-shape right';
leftShape.innerHTML = '◄';
rightShape.innerHTML = '►';
TCDforminput.parentElement.appendChild(leftShape);
TCDforminput.parentElement.appendChild(rightShape);
leftShape.addEventListener('click', () => {
TCDcellContainer.scrollBy({ left: -100, behavior: 'smooth' });
});
rightShape.addEventListener('click', () => {
TCDcellContainer.scrollBy({ left: 100, behavior: 'smooth' });
});
const updateArrows = () => {
const scrollLeft = TCDcellContainer.scrollLeft;
const maxScrollLeft = TCDcellContainer.scrollWidth - TCDcellContainer.clientWidth;
leftShape.style.display = scrollLeft > 5 ? 'flex' : 'none';
rightShape.style.display = scrollLeft < maxScrollLeft - 5 ? 'flex' : 'none';
};
TCDcellContainer.addEventListener("scroll", updateArrows);
setTimeout(updateArrows, 100);
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;
},
onMove: (evt) => {
const container = TCDcellContainer;
const rect = container.getBoundingClientRect();
const scrollStep = 10;
const mouseX = evt.originalEvent.clientX;
if (mouseX - rect.left < 10) {
container.scrollLeft -= scrollStep;
} else if (rect.right - mouseX < 10) {
container.scrollLeft += scrollStep;
}
}
});
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;
});
}
}
});
TiCodeFormObserver.observe(document.body, { childList: true, subtree: true });
const intervalId = setInterval(() => {
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%;
padding: 0 10px;
-ms-overflow-style: none;
scrollbar-width: none;
}
.ti-input-cell::-webkit-scrollbar {
display: none;
}
.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;
text-align: center;
display: flex;
font-family: Arial, sans-serif;
}
.cell:hover {
background-color: ;
color: ;
border-color:
}
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;
}
.scroll-shape {
position: absolute;
top: 0;
bottom: 0;
width: 20px;
background: rgba(255, 255, 255, 0.4);
z-index: 15;
display: none;
justify-content: center;
align-items: center;
font-size: 18px;
color: #F96855;
cursor: pointer;
user-select: none;
}
.scroll-shape.left {
left: 0;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.scroll-shape.right {
right: 0;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
</style>
<script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>
1. Создаем форму в Zero Block или стандартный блок с формой и выбираем в генераторе тип формы который создали. Если создали форму в зеро блок, то присваиваем ей класс ticelliform
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
Если создавали стандартный блок формы, то поле "Класс формы" оставляем пустым;
2. Создаем в форме поле ввода в одну строку и указываем Имя переменной (variable name) - ticellinput Скрипт в это поле и будет подгружать наши блоки с текстом;
3. Указываем в генераторе в поле "Текст ячеек" названия ячеек через запятую. Если ячеек будет больше, чем может поместиться в ширину поля ввода, автоматически включится горизонтальная прокрутка.
4. При необходимости указываем дополнительные настройки в генераторе:
Обязательное поле - если включено, и в настройках формы стоит галочка "обязательно к заполнению", поле будет считаться заполненным только после того, как пользователь хотя бы раз передвинет ячейки. Если выключено, поле считается заполненным, даже если ячейки не двигались;
Тип курсора - выбираем тип курсора который будет показывать при наведении на ячейки;
Цвет фона и Цвет текста - указываем цвет для фона и текста ячеек;
Радиус скругления углов - указываем радиус скругления углов ячеек. Если скругление не требуется, ставим значение 0;
Цвет обводки и Толщина обводки - указываем цвет и толщину обводки ячеек. Толщину лучше указывать в пределах от 1 до 5;
Размер текста - указываем размер текста ячеек. Учитывайте что такой же размер будет и при адаптивах;
Настройки ячеек при наведении (hover)- указываем цвет при наведении. Если не нужны, оставляем поля пустыми;
5. Копируем готовый код и вставляем в HTML блок Т123
Примечание! При большом количестве ячеек скроллить можно с помощью колесика мыши, если курсор находится в зоне поля. Модификация изначально разрабатывалась для Zero Block, но также совместима с большинством стандартных форм. Однако с некоторыми формами она может не работать из-за различий в разметке.
При отправке формы, данные будут передаваться в виде текстовой цепочки через запятую, сохраняя последовательность, заданную пользователем перед отправкой.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
Если создавали стандартный блок формы, то поле "Класс формы" оставляем пустым;
2. Создаем в форме поле ввода в одну строку и указываем Имя переменной (variable name) - ticellinput Скрипт в это поле и будет подгружать наши блоки с текстом;
3. Указываем в генераторе в поле "Текст ячеек" названия ячеек через запятую. Если ячеек будет больше, чем может поместиться в ширину поля ввода, автоматически включится горизонтальная прокрутка.
4. При необходимости указываем дополнительные настройки в генераторе:
Обязательное поле - если включено, и в настройках формы стоит галочка "обязательно к заполнению", поле будет считаться заполненным только после того, как пользователь хотя бы раз передвинет ячейки. Если выключено, поле считается заполненным, даже если ячейки не двигались;
Тип курсора - выбираем тип курсора который будет показывать при наведении на ячейки;
Цвет фона и Цвет текста - указываем цвет для фона и текста ячеек;
Радиус скругления углов - указываем радиус скругления углов ячеек. Если скругление не требуется, ставим значение 0;
Цвет обводки и Толщина обводки - указываем цвет и толщину обводки ячеек. Толщину лучше указывать в пределах от 1 до 5;
Размер текста - указываем размер текста ячеек. Учитывайте что такой же размер будет и при адаптивах;
Настройки ячеек при наведении (hover)- указываем цвет при наведении. Если не нужны, оставляем поля пустыми;
5. Копируем готовый код и вставляем в HTML блок Т123
Примечание! При большом количестве ячеек скроллить можно с помощью колесика мыши, если курсор находится в зоне поля. Модификация изначально разрабатывалась для Zero Block, но также совместима с большинством стандартных форм. Однако с некоторыми формами она может не работать из-за различий в разметке.
При отправке формы, данные будут передаваться в виде текстовой цепочки через запятую, сохраняя последовательность, заданную пользователем перед отправкой.
Подбор недвижимости на Бали
