Скрипт для марквиза на тильде

Пошагово:

  1. Делаете всё, как Виктория: https://www.youtube.com/watch?v=zfP_DBYZRwk
  2. Создаёте блок форму BF204N, добавляете ей класс .uc-hidden-form (эта будет скрытая форма, ответы принимать мы будет в формах в квизе, а заполнять и отсылать через эту скрытую форму). Создаёте в этой форме все те же самые вопросы, что и в квизе, только в формате «поле для ввода в одну строку», а имена переменных пишите: t-q1, t-q2, t-q3, name, phone. Я дополнительно заглушил, добавив поле email с именем email, так как тильда ругается, если нет email (можете просто собирать у пользователей email или оставить, как у меня)
  3. Меняете в моём скрипте ID zero-блоков на свои (15-19 строки)
  4. Меняете в моём скрипте ID формы на ID вашей формы (122 строка)
    Всё работает!
    В качестве спасибо зайдите на мой канал и поставьте лайк любому видео
<style>
.next-btn, .next-btn a, .next-btn * .prev-btn, .prev-btn a, .prev-btn * {
  cursor: pointer !important;
}
.uc-hidden-form {
  display: none !important;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  console.log('Квиз-скрипт запущен');

  // ====== 1) Находим Zero-блоки ======
  const block1 = document.querySelector('#rec846629495'); // Вопрос №1
  const block2 = document.querySelector('#rec846690295'); // Вопрос №2
  const block3 = document.querySelector('#rec846690521'); // Вопрос №3
  const block4 = document.querySelector('#rec846690830'); // Имя/телефон
  const block5 = document.querySelector('#rec846691003'); // Спасибо

  // ====== 2) Кнопки на этих блоках ======
  // Блок 1
  let nextBtn1 = block1 ? block1.querySelector('.next-btn') : null;

  // Блок 2
  let nextBtn2 = block2 ? block2.querySelector('.next-btn') : null;
  let prevBtn2 = block2 ? block2.querySelector('.prev-btn') : null;

  // Блок 3
  let nextBtn3 = block3 ? block3.querySelector('.next-btn') : null;
  let prevBtn3 = block3 ? block3.querySelector('.prev-btn') : null;

  // Блок 4
  let sendBtn   = null;
  let nameInput = null;
  let phoneInput= null;

  if (block4) {
    sendBtn    = block4.querySelector('.send-btn');
  }

  // ====== 3) Показываем/скрываем блоки ======
  function showBlock(block){ if(block) block.style.display = 'block'; }
  function hideBlock(block){ if(block) block.style.display = 'none'; }

  // Изначально только блок1
  showBlock(block1);
  hideBlock(block2);
  hideBlock(block3);
  hideBlock(block4);
  hideBlock(block5);

  // ====== 4) Логика переходов «Вперёд/Назад» ======

  // --- Блок1 -> Блок2 ---
  if(nextBtn1){
    nextBtn1.addEventListener('click', function(e){
      e.preventDefault();
      const checked1 = block1.querySelector('input[name="question1"]:checked');
      if(!checked1){
        alert("Пожалуйста, выберите один из вариантов (вопрос №1).");
        return;
      } else {
        valQ1 = checked1 ? checked1.value : '';
      }
      hideBlock(block1);
      showBlock(block2);
    });
  }

  // --- Блок2 -> Блок1 (Назад) ---
  if(prevBtn2){
    prevBtn2.addEventListener('click', function(e){
      e.preventDefault();
      hideBlock(block2);
      showBlock(block1);
    });
  }
  // --- Блок2 -> Блок3 (Вперёд) ---
  if(nextBtn2){
    nextBtn2.addEventListener('click', function(e){
      e.preventDefault();
      const checked2 = block2.querySelector('input[name="question2"]:checked');
      if(!checked2){
        alert("Выберите вариант ответа (вопрос №2).");
        return;
      } else {
        valQ2 = checked2 ? checked2.value : '';
      }
      hideBlock(block2);
      showBlock(block3);
    });
  }

  // --- Блок3 -> Блок2 (Назад) ---
  if(prevBtn3){
    prevBtn3.addEventListener('click', function(e){
      e.preventDefault();
      hideBlock(block3);
      showBlock(block2);
    });
  }
  // --- Блок3 -> Блок4 (Вперёд) ---
  if(nextBtn3){
    nextBtn3.addEventListener('click', function(e){
      e.preventDefault();
      const checked3 = block3.querySelector('input[name="question3"]:checked');
      if(!checked3){
        alert("Выберите вариант ответа (вопрос №3).");
        return;
      } else {
        valQ3 = checked3 ? checked3.value : '';
      }
      hideBlock(block3);
      showBlock(block4);
    });
  }

  // ====== 5) Скрытая форма внутри #rec846667907 ======
  // !!! Важно: ищем именно <form>, а не сам #rec846667907

  const hiddenFormBlock = document.querySelector('#rec846667907');
  let hiddenForm     = null;
  let hiddenQ1       = null;
  let hiddenQ2       = null;
  let hiddenQ3       = null;
  let hiddenName     = null;
  let hiddenPhone    = null;
  let hiddenEmail    = null;
  let hiddenSubmit   = null;

  if(hiddenFormBlock){
    // Предположим, внутри него <form id="hiddenQuizForm" class="t-form js-form-proccess">
    hiddenForm   = hiddenFormBlock.querySelector('form.js-form-proccess');
    if(hiddenForm){
      hiddenQ1     = hiddenForm.querySelector('input[name="t-q1"]');
      hiddenQ2     = hiddenForm.querySelector('input[name="t-q2"]');
      hiddenQ3     = hiddenForm.querySelector('input[name="t-q3"]');
      hiddenName   = hiddenForm.querySelector('input[name="name"]');
      hiddenPhone  = hiddenForm.querySelector('input[name="phone"]');
      hiddenEmail  = hiddenForm.querySelector('input[name="email"]');
      hiddenSubmit = hiddenForm.querySelector('.t-submit');
    }
  }

  // ====== 6) Нажатие «Отправить» ======
  if(sendBtn){
    sendBtn.addEventListener('click', function(e){
      e.preventDefault();

      // Проверяем имя/телефон
      nameInput  = block4.querySelector('input[name="name-mk"]');
      phoneInput = block4.querySelector('input[name="phone-mk"]');

      const userName = nameInput ? nameInput.value.trim() : '';
      const userPhone = phoneInput? phoneInput.value.trim() : '';
      console.log('nameInput:', nameInput)
      console.log('phoneInput:', phoneInput)
      console.log('userName:', userName)
      console.log('userPhone:', userPhone)
      if(!userName || !userPhone){
        alert("Укажите имя и телефон!");
        return;
      }

      // Записываем их в скрытую форму
      if(hiddenForm){
        if(hiddenQ1)    hiddenQ1.value = valQ1;
        if(hiddenQ2)    hiddenQ2.value = valQ2;
        if(hiddenQ3)    hiddenQ3.value = valQ3;
        if(hiddenName)  hiddenName.value  = userName;
        if(hiddenPhone) hiddenPhone.value = userPhone;
        if(hiddenEmail) hiddenEmail.value = 'dummy@noemail.local'; 
        // Или любое другое значение email

        // Жмём стандартную кнопку отправки
        if(hiddenSubmit){
          hiddenSubmit.click(); // Триггерим Tilda-отправку
          console.log('Форма отправлена через hiddenSubmit.click()');
        } else {
          console.warn('Не найдена .t-submit внутри hiddenForm');
        }
      } else {
        console.warn('Не найдена скрытая форма (js-form-proccess) внутри #rec846667907');
      }

      // Переход на «Спасибо»
      hideBlock(block4);
      showBlock(block5);
    });
  }
});
</script>