Как сделать выбор приза в виде колеса-рулетки через форму ZeroBlock в Tilda
Крутите колесо и выиграйте приз
Просто нажмите кнопку ниже, чтобы вызвать окно с колесом призов
Крутите колесо
заполните форму и нажмите кнопку "крутить"
Время на активацию приза
Время активации приза вышло, но скоро будут новые розыгрыши подарков
00:00:00:00
Ура, вы выиграли!
Приз
промокод
Промокод действует при оформлении любого заказа.
Нажмите на кнопку "Получить приз" и оформите заказ, используя промокод
По всем вопросам розыгрыша пишите на mail@mail.ru

Как сделать выбор приза в виде колеса-рулетки через форму ZeroBlock в Tilda

1
Создали ZeroBlock для колеса и задали ему класс uc-wheel-block
2
В этом блоке создали элементы:
-- само колесо в виде shape с классом wheelfortune
-- Блок формы:
  • заголовок для формы "Крутите колесо" из элемента Text
  • и подзаголовок "заполните форму и нажмите кнопку "крутить" из элемента Text
  • и саму Form (объединили их в autolayout и задали класс form-section)
  • в форму добавили hidden field с именем wheel-prize
-- Блок таймера из трёх элементов Text
  • "Время на активацию приза" - задали ему класс timer-active
  • "Время активации приза вышло, но скоро будут новые розыгрыши подарков" - задали ему класс timer-out
  • "00:00:00:00" - задали ему класс timer-num
  • объединили их в autolayout и задали класс timer-section
-- Блок выигрыша
  • добавляем заголовок "Ура, вы выиграли!"
  • текст для приза "Приз" (задали ему класс prize-name)
  • внутри делаем ещё блок промокода, который состоит из элемента Text с надписью "Промокод" (задан класс promocode-text ) , иконки копирования (задан класс promocode-copy) и описания под полем промокода из Text "Промокод действует при оформлении любого заказа. Нажмите на кнопку "Получить приз" и оформите заказ, используя промокод". Объединили их в autolayout и задали класс promocode-block
  • добавили кнопку "Получить приз" со ссылкой # и задали ей класс btn-get-prize
  • добавили текст итоговый внизу "По всем вопросам розыгрыша пишите на mail@mail.ru"
все элементы блока выигрыша объединили в autolayout и задали класс prize-section
3
Если нужен popup, то добавляем блок Т1093, задаём ему ссылку #wheel-fortune (по этой ссылке и сможем вызывать popup любой кнопкой), прописываем в него ZeroBlock с колесом и задаём класс uc-wheel-popup
4
Если будут участвовать товары из каталога, то добавляем блок ST100
5
Заполняем конструктор призов и конструктор колеса
Если нужно своё изображение колеса, то добавляем его просто фонов в shape колеса. Макеты можно скачать по ссылке
6
Вставили код на страницу в блок Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Как сделать выбор приза в виде колеса-рулетки через форму ZeroBlock в Tilda
Фрагмент видео

📋 Конструктор призов

Название Цвет сектора Цвет текста Вероятность Итоговое сообщение Промокод Ссылка Время действия (день/час/мин) UID ⚙️
Форматирование (выделите текст в ячейке):
💡 Подсказка: заполните все данные
  • Для переноса строк используйте кнопку "Перенос строки"
  • Для выделения используйте кнопки B и I под таблицей
  • В столбец "Вероятность" можно вводить только числа от 0 до 99 (до десятых)
  • Время: день (0-99), час (0-23), мин (0-59). Пустые поля = 0
  • Цвета: выберите через палитру или введите HEX вручную
Всего строк: 0

🎡 Конструктор колеса

⚙️ Функциональные настройки

⚪ Центральная точка

📏 Линии секторов

✏️ Текст в секторах

🌑 Тень колеса

🎨 Прочее

Добавьте минимум 2 приза в конструкторе выше, чтобы увидеть предпросмотр.
Предпросмотр 500×500
Made on
Tilda