URL скопирован в буфер обмена!
Как добавить поле рейтинг (звездочки) в стандартную форму Tilda?
При помощи данной модификации можно добавить поле рейтинга (звездочки) в стандартные формы Tilda.
Модификация работает с включенным Autoscale в блоках
Модификация работает только с стандартными блоками
Номер модификации в библиотеке TiCode
Id блока с формой
Ссылка на SVG активную звезду
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD048--><script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-oqQgEyrJZfz9M9jyZ+4L8QxNQuaSCu1ea8gkNPIggzo=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('#rec623230397 .t-img-select__control_rb').click(function() {
$(this).prevAll().find('.t-img-select__indicator').addClass('ticodeactivestar');
$(this).nextAll().find('.t-img-select__indicator').removeClass('ticodeactivestar');
$(this).find('.t-img-select__indicator').addClass('ticodeactivestar');
});
});
</script>
<style>
#rec623230397 .t-img-select__indicator {
width: 35px !important;
position: relative;
box-shadow: none;
}
#rec623230397 .t-img-select__indicator.ticodeactivestar {
position: relative;
}
#rec623230397 .t-img-select__indicator.ticodeactivestar::before {
content: '';
background-image: url('https://static.tildacdn.one/tild3030-3737-4664-b866-303631653264/TC_star_active.svg');
background-size: cover;
width: 35px;
height: 35px;
position: absolute;
top: 0;
left: 0;
}
#rec623230397 .t-img-select__control {
width: 35px !important;
}
#rec623230397 .t-img-select__indicator:after {
display: none !important;
}
#rec623230397 .t-img-select__text {
display: none;
}
#rec623230397 .t-img-select__container {
margin: 0px -5px 0 !important;
}
#rec623230397 .t-img-select__item {
width: 35px !important;
}
</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>
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем блок стандартной формы, например popup BF502N;
2. Добавляем в форму поле "Вопрос с вариантами ответа в виде картинок". Скачиваем по ссылке svg звезду из загружаем в поле ввода 5 раз. Каждую звезду подписываем числом от 1 до 5(это нужно для того чтобы в СРМ приходила не ссылка на картинку, а число). Результат должен получиться вот такой;
3. В генераторе кода указываем id блока с формой и делаем дополнительные настройки:
Ссылка на активную звезду - указываем ссылку на активную звезду. Можно скачать по ссылке (если нужен другой цвет, то загружаем файл в фигму, меняем цвет и выгружаем в формате svg). Создаем на сайте блок IM01, загружаем в него активную звезду и копируем ссылку на картинку. Ссылку вставляем в генератор, а сам блок скрываем, кликнув на глаз.
4. Копируем готовый код и вставляем в HTML блок Т123.
Примечание! Модификация не работает с формами в Zero Block.
2. Добавляем в форму поле "Вопрос с вариантами ответа в виде картинок". Скачиваем по ссылке svg звезду из загружаем в поле ввода 5 раз. Каждую звезду подписываем числом от 1 до 5(это нужно для того чтобы в СРМ приходила не ссылка на картинку, а число). Результат должен получиться вот такой;
3. В генераторе кода указываем id блока с формой и делаем дополнительные настройки:
Ссылка на активную звезду - указываем ссылку на активную звезду. Можно скачать по ссылке (если нужен другой цвет, то загружаем файл в фигму, меняем цвет и выгружаем в формате svg). Создаем на сайте блок IM01, загружаем в него активную звезду и копируем ссылку на картинку. Ссылку вставляем в генератор, а сам блок скрываем, кликнув на глаз.
4. Копируем готовый код и вставляем в HTML блок Т123.
Примечание! Модификация не работает с формами в Zero Block.
Оцените наш сервис
