Пошагово:
- Делаете всё, как Виктория: https://www.youtube.com/watch?v=zfP_DBYZRwk
- Создаёте блок форму BF204N, добавляете ей класс .uc-hidden-form (эта будет скрытая форма, ответы принимать мы будет в формах в квизе, а заполнять и отсылать через эту скрытую форму). Создаёте в этой форме все те же самые вопросы, что и в квизе, только в формате «поле для ввода в одну строку», а имена переменных пишите: t-q1, t-q2, t-q3, name, phone. Я дополнительно заглушил, добавив поле email с именем email, так как тильда ругается, если нет email (можете просто собирать у пользователей email или оставить, как у меня)
- Меняете в моём скрипте ID zero-блоков на свои (15-19 строки)
- Меняете в моём скрипте 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>