I'm available for business trips to other cities for projects lasting a month or longer.

Добавить изображение на радио-кнопки при клике в Тильда

Хочешь сборник бесплатного кода для Тильды?
Тогда подписывайся на мой ТГ-канал - t.me/breeze_tilda
Модификация меняет radio-button в форме Тильды на кастомную картинку.

Первая модификация меняет кругляшок радио-кнопки в поле формы Вопрос с вариантами ответа - Один вариант ответа (радиокнопки) на одну картинку после нажатия на нее. Ниже есть код, где картинка зависит от варианта ответа в форме и меняется в зависимости от того, какая кнопка нажата.

Инструкция:
  1. Создайте форму, допустим: BF203N
  2. Добавьте в Контент - Поля для ввода - Вопрос с вариантами ответа
  3. Пропишите варианты ответа и выберите Вид ответа: радиокнопки
  4. Загрузите в блок IM01 свое изображение (потом блок можно удалить)
  5. Скопируйте код ниже и вставьте ссылку на изображение в него
<style> 
.t-radio__item {
  position: relative;
}
/*Меняем радио-кнопки на кастомные.
Поблагодари за код - подпишись на ТГ https://t.me/breeze_tilda*/

.t-radio__item input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  cursor: pointer;
}

.t-radio__indicator {
  &::after {
    display: none !important;
  }
  width: 25px !important; /* Меняется ширина радио-кнопки (кружка) */
  height: 25px !important; /* Меняется высота радио-кнопки (кружка) */
  transition: all 0.2s ease;
}

.t-radio__item input[type="radio"]:checked + .t-radio__indicator {
  /* Поменяй ссылку на свое изображение */
  background-image: url('https://static.tildacdn.com/tild3961-3636-4362-a232-326434336139/free-icon-sakura-222.png') !important;
  background-size: cover;
  background-position: center;
  border-color: transparent !important;
}
</style>

Второй вариант замены радио-кнопки, где каждый вариант ответа в форме имеет свою иконку

Хочешь сборник бесплатного кода для Тильды?
Тогда подписывайся на мой ТГ-канал - t.me/breeze_tilda
В форме обратной связи или квиза на Тильде на радио-кнопках появляется картинка или эмодзи в зависимости от того, какая кнопка нажата.

Тут все тоже самое, что и в 1 варианте, единственное, что нам надо - это прописать в коде value="Значение для опции 1".

Найти value (значение) вашей радио-кнопки:
  • Зайдите в редактор вашей формы в Tilda.
  • Для каждой опции радио-кнопки вы задавали название (то, что видит пользователь) и значение (то, что отправляется в систему). Именно это значение вам и нужно. Например, если у вас опция "Розы", её значение вы могли поставить roses. То есть вот так: Розы=roses
  • Если вы не ставили значения, например roses, то впишите в код просто - Розы
2. Заполнить шаблон:
  • Скопируйте код выше.
  • Замените "Значение для опции 1" на ваше реальное значение (например, roses или Розы).
  • Замените 'ССЫЛКА_НА_ПЕРВУЮ_КАРТИНКУ' на прямую ссылку на ваше изображение.
  • Повторите этот процесс для каждой опции, которой вы хотите задать уникальную картинку.
<style> 
.t-radio__item {
  position: relative;
}
/*Меняем радио-кнопки на кастомные.
Поблагодари за код - подпишись на ТГ https://t.me/breeze_tilda*/

.t-radio__item input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.t-radio__indicator {
  &::after {
    display: none !important;
  }
  width: 25px !important; /* Меняется ширина радио-кнопки (кружка) */
  height: 25px !important; /* Меняется высота радио-кнопки (кружка) */
  transition: all 0.2s ease;
  background-image: none !important;
}

 /* Вот тут [value="Да"] надо поменять на то, что у вас прописано в форме на радио-кнопке в Тильде */
.t-radio__item input[value="Да"]:checked + .t-radio__indicator {
  background-image: url('ССЫЛКА_НА_ПЕРВУЮ_КАРТИНКУ') !important;
  background-size: cover;
  background-position: center;
  border-color: transparent !important;
}

 /* Тоже самое и тут */
.t-radio__item input[value="Нет"]:checked + .t-radio__indicator {
  background-image: url('ССЫЛКА_НА_ВТОРУЮ_КАРТИНКУ') !important;
  background-size: cover;
  background-position: center;
  border-color: transparent !important;
}

 /* Если у вас нет 3го варианта, то можно удалить этот блок */
.t-radio__item input[value="Не знаю"]:checked + .t-radio__indicator {
  background-image: url('ССЫЛКА_НА_ТРЕТЬЮ_КАРТИНКУ') !important;
  background-size: cover;
  background-position: center;
  border-color: transparent !important;
}
</style>
Смена вида переключателя radio в форме в Tilda работает со следующими блоками: BF203N, BF204N, BF306N, BF307N, BF308N, BF309N, BF310N, BF311N, или BF402N, BF403N, QZ101, QZ101A, QZ101B, QZ101C, QZ101D, QZ101E, QZ101F. Может еще и с другими там, где есть радио-кнопки
Больше кода для Tilda в ТГ-канале
Поблагодари за код - подпишись https://t.me/breeze_tilda