Одна форма вместо восьми
Демо на видео ⬆️

Верстала я на днях первый экран страницы, где настроены продажи серии уроков и удивилась от количества форм, их было столько же, сколько карточек с уроками😳

Это было сделано для того, чтобы выбранный урок при открытии формы всегда был на первом месте в списке, с активным чекбоксом и выделением. Что логично с точки зрения покупателя, сразу видно, что выбрано и исключен лишний клик.

Но 8 форм😳
А если позиций на странице будет 20, 30... При таком количестве блоков с формой - это лишняя работа для специалиста и потенциальный хаос при редактировании.

💡 Решение

Я оставила одну универсальную форму с полным списком уроков в предложении.

А с помощью скрипта:
- связала каждую кнопку с нужным предложением внутри этой формы,
- при клике нужный урок автоматически отмечается галочкой,
- сам блок с уроком поднимается в начало списка,
- пользователь видит его первым, но при этом может выбрать и другие уроки.
После закрытия формы всё возвращается в исходное состояние, чекбоксы сбрасываются👌

✨ Таким образом мы оптимизируем саму механику GetCourse, решив сразу три типовые боли:
- дублирование форм,
- запутанный UX для пользователей,
- лишнюю ручную работу для специалистов.

🧠 Результат

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

P. S. Попутно починила баг Геткурс, когда он выделяет цветом только одно последнее предложение из выбранных, что сбивает пользователя.
Теперь все выбранные чекбоксы выделены цветом👌

Сам скрипт я выложу в комментариях под этим постом 👇

Индикатор прокрутки страницы разметка ⬇️

<div id="progress-bar"></div>
<style>
#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 0%;
  background-color: #0E7EE5;
  z-index: 9999;
  -webkit-transition: width 0.2s ease;
  -o-transition: width 0.2s ease;
  transition: width 0.2s ease;
}
</style>

<script>
document.addEventListener('scroll', function() {
    var scrollTop = window.scrollY || window.pageYOffset;
    var docHeight = document.body.scrollHeight - window.innerHeight;
    var progress = (scrollTop / docHeight) * 100;
    document.getElementById('progress-bar').style.width = progress + '%';
  });
</script>

Друзья, если вам такой контент интересен, ставьте ❤️ или 👍

Ну или что хотите поставьте😁
Так я пойму, что не зря его тут выкладываю😜

Друзья, всем привет 🤗
В видео показываю решение частного случая в работе.

Возможно у вас тоже возникают подобные ситуации 🤓

В следующем посте выложу скрипт ⬇️😜

Алиса придумала забаву, мне нравится 😜