/ Сайтостроение / Scripts & jquery / Квиз-форма

Квиз-форма

05.10.2019

51

/ Сайтостроение / Scripts & jquery / Квиз-форма

Создадим квиз-форму без использования какого-либо плагина на чистом html, css, jQuery и php. В данной записи приведу пример квиза по ремонту помещения. В квизе использованы различные варианты полей (текст, radio, checkbox), а также некоторые интересные решения.

Верстка

<div id="quiz">

	<form action="/thank-you/" method="POST" id="quiz_form">
			
		<input type="hidden" name="uri" value="https://site.ru"/> 
			
		<div id="step0">
			<h2>Рассчитайте стоимость ремонта вашего помещения,<br>пройдя простой тест за 1 минуту!</h2>
			<p>Ответы на тест подскажут нам, сколько можно сэкономить благодаря нашим оптовым ценам на отделочные материалы, мебель и декор.</p>
			<p><a id="to_step1" class="btn">Пройти тест</a></p>
		</div>
		
		<div id="other_steps">
					
			<div id="step1" class="step">
								
				<h2>Какой тип помещения у вас?</h2>
									
				<div id="type-home" class="step-quest">
					
					<div>	
						<label for="type-home_1_input">
							<input id="type-home_1_input" type="radio" name="type-home" value="Новостройка">
							<img src="/wp-content/uploads/2019/09/Novostrojka.jpg">
							Новостройка
						</label>
					</div>
					
					<div>				
						<label for="type-home_2_input">
							<input id="type-home_2_input" type="radio" name="type-home" value="Вторичный жилой фонд">
							<img src="/wp-content/uploads/2019/09/vtorichnoe-zhile.jpg">
							Вторичный жилой фонд
						</label>
					</div>				

					<div>
						<label for="type-home_3_input">
							<input id="type-home_3_input" type="radio" name="type-home" value="Дом, коттедж, таунхауз">
							<img src="/wp-content/uploads/2019/09/dom-kottedzh.jpg">
							Дом, коттедж, таунхауз
						</label>
					</div>					

					<div>
						<label for="type-home_4_input">
							<input id="type-home_4_input" type="radio" name="type-home" value="Коммерческое помещение">
							<img src="/wp-content/uploads/2019/09/Kommercheskoe-pomeshhenie.jpg">
							Коммерческое помещение
						</label>
					</div>				
										
				</div>
						
				<div class="quiz_buttons">				
					<p><a id="to_step2" class="btn">Далее</a></p>
				</div>
								
			</div>
			
			<div id="step2" class="step">
								
				<h2>Какая у вас общая площадь помещений под ремонт?</h2>
									
				<div id="area" class="step-quest">
					<div><input id="area_input" type="text" name="area" placeholder="Площадь помещения (кв.м)"></div>
				</div>
									
				<div class="quiz_buttons">		
					<p><a class="btn back_btn" href="javascript:history.back()">Назад</a></p>			
					<p><a id="to_step3" class="btn">Далее</a></p>
				</div>
								
			</div>
			
			<div id="step3" class="step">
								
				<h2>Косметический или капитальный ремонт необходим?</h2>
				
				<small>выберите один или несколько вариантов</small>
									
				<div id="type-repair" class="step-quest">
										
					<div>					
					<label for="type-repair_1_input">
						<input id="type-repair_1_input" type="checkbox" name="type-repair[]" value="Косметический ремонт (обои, покраска, пол, плитка)">
						<img src="/wp-content/uploads/2019/09/Kosmeticheskij-remont.jpg">
						Косметический ремонт (обои, покраска, пол, плитка)
					</label>
					</div>
						
					<div>	
					<label for="type-repair_2_input">
						<input id="type-repair_2_input" type="checkbox" name="type-repair[]" value="Капитальный ремонт (стяжка пола, штукатурка стен, потолок)">
						<img src="/wp-content/uploads/2019/09/Kapitalnyj-remont.jpg">
						Капитальный ремонт (стяжка пола, штукатурка стен, потолок)
					</label>
					</div>
					
					<div>
					<label for="type-repair_3_input">
						<input id="type-repair_3_input" type="checkbox" name="type-repair[]" value="С нуля и под «ключ»">
						<img src="/wp-content/uploads/2019/09/S-nulya-i-pod-klyuch-.jpg">
						С нуля и под «ключ»
					</label>
					</div>
					
					<div>
					<label for="type-repair_4_input">
						<input id="type-repair_4_input" type="checkbox" name="type-repair[]" value="Ремонт по дизайн-проекту">
						<img src="/wp-content/uploads/2019/09/Remont-po-dizajn-proektu.jpg">
						Ремонт по дизайн-проекту
					</label>
					</div>	
					
				</div>
									
				<div class="quiz_buttons">		
					<p><a class="btn back_btn" href="javascript:history.back()">Назад</a></p>			
					<p><a id="to_step4" class="btn">Далее</a></p>
				</div>
								
			</div>
			
			<div id="step4" class="step">
								
				<h2>Есть ли у вас дизайн-проект?</h2>
									
				<div id="design-project" class="step-quest">
										
					<div>										
					<label for="design-project_1_input">
						<input id="design-project_1_input" type="radio" name="design-project" value="Да">					
						Да
					</label>
					</div>
					
					<div>
					<label for="design-project_2_input">
						<input id="design-project_2_input" type="radio" name="design-project" value="Нет">
						Нет
					</label>
					</div>
					
					<div>
					<label for="design-project_3_input">
						<input id="design-project_3_input" type="radio" name="design-project" value="Дизайн-проект не нужен">
						Дизайн-проект не нужен
					</label>
					</div>					
										
				</div>
									
				<div class="quiz_buttons">		
					<p><a class="btn back_btn" href="javascript:history.back()">Назад</a></p>			
					<p><a id="to_step5" class="btn">Далее</a></p>
				</div>
								
			</div>
			
			<div id="step5" class="step">
								
				<h2>Нужна ли вам помощь в закупке материалов?</h2>
				
				<small>выберите один или несколько вариантов</small>
									
				<div id="purchase" class="step-quest">
				
					<div>										
					<label for="purchase_1_input">
						<input id="purchase_1_input" type="checkbox" name="purchase[]" value="Да нужна помощь в закупке черновых материалов">
						Да нужна помощь в закупке черновых материалов
					</label>
					</div>
					
					<div>										
					<label for="purchase_2_input">
						<input id="purchase_2_input" type="checkbox" name="purchase[]" value="Нужна помощь с чистовыми материалами">
						Нужна помощь с чистовыми материалами
					</label>
					</div>
					
					<div>
					<label for="purchase_3_input">
						<input id="purchase_3_input" type="checkbox" name="purchase[]" value="Нужны только ремонтные работы">
						Нужны только ремонтные работы
					</label>
					</div>					
										
				</div>
									
				<div class="quiz_buttons">		
					<p><a class="btn back_btn" href="javascript:history.back()">Назад</a></p>			
					<p><a id="to_step6" class="btn">Далее</a></p>
				</div>
								
			</div>
			
			<div id="step6" class="step">
								
				<h2>Когда вы планируете начать ремонт?</h2>
									
				<div id="repair-date" class="step-quest">
										
					<div>										
					<label for="repair-date_1_input">
						<input id="repair-date_1_input" type="radio" name="repair-date" value="В этом месяце">
						В этом месяце
					</label>
					</div>
					
					<div>					
					<label for="repair-date_2_input">
						<input id="repair-date_2_input" type="radio" name="repair-date" value="Через месяц">
						Через месяц
					</label>
					</div>
					
					<div>
					<label for="repair-date_3_input">
						<input id="repair-date_3_input" type="radio" name="repair-date" value="В этом году">
						В этом году
					</label>
					</div>
					
					<div>
					<label for="repair-date_4_input">
						<input id="repair-date_4_input" type="radio" name="repair-date" value="Не знаю, пока только прицениваюсь">
						Не знаю, пока только прицениваюсь
					</label>
					</div>					
										
				</div>
									
				<div class="quiz_buttons">		
					<p><a class="btn back_btn" href="javascript:history.back()">Назад</a></p>			
					<p><a id="to_step7" class="btn">Далее</a></p>
				</div>
								
			</div>
			
			<div id="step7" class="step">
								
				<h2>В какой бюджет вы хотите уложиться вместе с материалами?</h2>
									
				<div id="repair-price" class="step-quest">
	
					<div>	
					<label for="repair-price_1_input">
						<input id="repair-price_1_input" type="radio" name="repair-price" value="300 - 500 тыс. руб.">
						300 - 500 тыс. руб.
					</label>
					</div>
					
					<div>										
					<label for="repair-price_2_input">
						<input id="repair-price_2_input" type="radio" name="repair-price" value="500 тыс. - 1 млн. руб.">
						500 тыс. - 1 млн. руб.
					</label>
					</div>
					
					<div>
					<label for="repair-price_3_input">
						<input id="repair-price_3_input" type="radio" name="repair-price" value="1,0 - 2,0 млн. руб.">
						1,0 - 2,0 млн. руб.
					</label>
					</div>
					
					<div>				
					<label for="repair-price_4_input">
						<input id="repair-price_4_input" type="radio" name="repair-price" value="от 2,0 млн руб.">
						от 2,0 млн руб.
					</label>		
					</div>
					
					<div>				
					<label for="repair-price_5_input" id="up-layer">
						<input id="repair-price_5_input" type="radio" name="repair-price" value="Другое">
						<input type="text" autocomplete="on" placeholder="Другое..." name="price_input" id="price_input">
					</label>	
					</div>
										
				</div>
									
				<div class="quiz_buttons">		
					<p><a class="btn back_btn" href="javascript:history.back()">Назад</a></p>			
					<p><a id="to_step8" class="btn">Далее</a></p>
				</div>
								
			</div>
			
			<div id="curr_step" class="center">Шаг 1 из 8</div>
		
		</div>

		<div id="last_step" class="step">
		
			<h2>Оставьте свои данные<br>и мы предоставим расчёт полной стоимости проекта</h2>
			
			<div id="contact_fields" class="step-quest">
				<div><input id="name_input" type="text" name="name_input" placeholder="Ваше имя"></div>
				<div><input id="phone_input" type="text" name="phone" placeholder="Телефон в формате +7 999 888 7766"></div>
				<div><input id="email_input" type="text" name="email_input" placeholder="E-mail"></div>
			</div>
							
			<p><a id="to_submit" class="btn">Узнать стоимость</a></p>
			
			<div id="acceptance-line">
				<input id="acceptance" type="checkbox" name="acceptance" value="" checked>
				<label for="acceptance">C <a href="/privacy-policy/" target="_blank">политикой конфиденциальности</a> ознакомлен</label>
			</div>
							
		</div>
				
	</form>
	
	<div id="progress_bar"><div id="progress_in"></div></div>

</div>

Div с id progress_bar — это полоса заполненности квиза, чтобы пользователю было визуально понятно сколько ему еще осталось.

CSS

#quiz {min-height: 50vh; display: flex; flex-wrap: wrap; align-items: center;}

#quiz_form {width: 100%;}

#step0, #step1, #step2, #step3, #step4, #step5, #step6, #step7, #step8, #step9, #step10, #other_steps, #last_step {display: none;}
#step0 {display: block; text-align: center;}

#step1 h2, #step3 h2, #last_step h2 {margin-bottom: 50px !important;}

#other_steps {text-align: center;}

.step > small {text-align: center; margin-bottom: 30px; display: block;}

.quiz_buttons {display: flex; justify-content: center;}

#quiz .btn {
    cursor: pointer;
    background: #54a8fb;
    padding: 7px 30px;
    display: inline-block;
    border-radius: 3px;
    font-size: 1rem;
    color: #fff;
    border: 1px solid #fff;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
    text-decoration: none;
	margin: 0 15px;
}
#quiz .btn:hover {background: #4195e8;}

#quiz .btn.back_btn {background: #ccc;}
#quiz .btn.back_btn:hover {background: #aaa;}

.step-quest {display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; justify-content: center;}

.step-quest > * {width: 50%; padding: 0 15px; margin-bottom: 30px;}

.step-quest > * label {display: block; border: 2px solid #eee; padding: 15px 30px; border-radius: 5px; height: 100%;}

.step-quest > * label.checked {border: 2px solid #54a8fb; box-shadow: 1px 1px 12px #ccc;}

.step-quest > * label input {margin-right: 15px; display: none;}

.step-quest > * label input#price_input {display: block; width: 100%; border-radius: 3px; pointer-events: none; font-size: 1.2rem; text-align: center;}

.step-quest > * img {margin-bottom: 15px;}


.step-quest > div > input {padding: 15px 30px; width: 100%; border: 1px solid #eee; border-radius: 5px; font-size: 1.3rem; text-align: center;}

#type-home > *, #type-repair > * {width: 25%; text-align: center;}

#last_step {text-align: center;}

#contact_fields {justify-content: center; margin-bottom: 15px;}
#contact_fields > * {width: 51%; margin-bottom: 15px;}

#acceptance-line {margin-bottom: 30px;}


#progress_bar {height: 5px; width: 100%; background: rgba(84, 168, 251, 0.2);}
#progress_in {width: 0%; height: 100%; background: #54a8fb; transition: all 0.3s ease; -o-transition: all 0.3s; -webkit-transition: all 0.3s ease 0s;}

#curr_step {margin-bottom: 15px;}



@media screen and (max-device-width: 1024px) { 
	#quiz h2 {margin-bottom: 50px !important;}
	.step-quest {margin-bottom: 15px;}
	#type-home > *, #type-repair > * {width: 50%; text-align: left; margin-bottom: 15px;}
	.step-quest > * {margin-bottom: 15px;}
	.step-quest > * label {display: flex; align-items: center; padding: 15px; justify-content: center;}
	.step-quest > * img {width: 30%; margin-bottom: 0; margin-right: 20px;}
	#contact_fields > * {width: 70%;}
	.step-quest > div > input {padding: 10px 30px; font-size: 1.1rem;}
}


@media screen and (max-device-width: 800px) { 
	#quiz {padding: 0 15px;}
	#quiz h2 {font-size: 1.8rem;}
	.step-quest > * img {display: none;}
	.step-quest > * label {text-align: center; padding: 10px 15px;}
	#contact_fields > * {width: 90%;}
	.step > small {margin-bottom: 15px;}
}

@media screen and (max-device-width: 480px) { 
	#quiz h2 {margin-bottom: 40px !important;}
	.step-quest > *, #type-home > *, #type-repair > * {width: 90%;}
}

@media screen and (max-device-width: 380px) { 
	#quiz h2 {font-size: 1.6rem;}
	.step-quest > *, #type-home > *, #type-repair > *, #contact_fields > * {width: 100%;}
	.quiz_buttons {justify-content: space-between;}
	.quiz_buttons p {width: 45%; margin-bottom: 20px;}
	#quiz .btn {width: 100%; margin: 0;}
	#step1 .quiz_buttons {justify-content: center;}
}

Одной из особенностей данного квиза является то, что мы скраваем стандартные элементы управления radip и checkbox, и вместо этого выделяем весь пункт (изображение или текст), но тут конечно участвует и jQuery.

Скрипты (в данном компоненте это основное):

var steps = [false, false, false, false, false, false, false, false, false];
var curr_step = 0;

var int_val = 0; //для проверки площади


// возможность возвращаться к предыдущему вопросу
function set_history(index) {
	if (!(window.history && history.pushState))	{
		return false;
	}
	if (steps[index] == false) {
		history.pushState({'step_x': index}, null, window.location.href);
		steps[index] = true;
	}
}


// переходы по шагам
function to_step(index, need_push) {
	curr_step = index;
	for (var i = 0; i < steps.length; i++) {
		if (!$("#step" + i).is(':hidden')) {
			$("#step" + i).hide();
		}
	};
	$("#step" + index).show();

	$("#progress_in").css({width: (100 * index / steps.length) + "%"});
	$("#curr_step").text("Шаг " + index + " из " + (steps.length - 1));
	
	// Разделение на #step0, #other_steps и #last_step
	if (index + 1 == steps.length) { // если шаг равен общему количеству шагов
		if (!$("#other_steps").is(':hidden')) {
			$("#other_steps").hide();
			$("#last_step").show();
		}
	} else if (index > 0) { // если шаг больше ноля
		if ($("#other_steps").is(':hidden')) { $("#other_steps").show(); }
		if (!$("#last_step").is(':hidden')) { $("#last_step").hide(); }
	} else if (!$("#other_steps").is(':hidden')) { // если шаг равен нолю
		$("#other_steps").hide();
	} 

	if (need_push) {
		if (index == 2) { $("#area_input").focus();	}	// Фокусировка на поле площадь
		//if (index == 8) { $("#phone_input").focus();}	// Фокусировка на поле телефон
		set_history(index);
	}
}


// Проверка заполненности радиокнопки или чекбокса
function check_radio_selected(elem_id, error_message) {
	obj = $('input[name="' + elem_id + '"]:checked');
	if (!(obj.length && obj.val()))	{
		alert(error_message);
		return false;
	}
	return true;
}


// Проверка площади
function check_area() {
	obj = $('#area_input');
	if (obj.length && obj.val() && $.isNumeric(obj.val())) {
		int_val = parseInt(obj.val());
		if (int_val < 1) {
			alert("Укажите корректную площадь помещения");
			return false;
		}
	} else if (obj.length && obj.val() == "") {
		alert("Укажите площадь помещения");
		return false;
	} else {
		alert("Укажите корректную площадь помещения");
		return false;
	}
	return true;
}


// Проверка E-mail
function validateEmail($email) {
	var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
	return emailReg.test( $email );
}


// Проверки полей по шагам и уведомления при незаполненных полях
(function($) {
	
	$(document).ready(function() { to_step(0, true); }); // задаем первоначальный индекс
	
	$("#to_step1").click(function(event) {
		event.preventDefault();
		to_step(1, true);
	});

	$("#to_step2").click(function(event) {
		event.preventDefault();
		if (check_radio_selected("type-home", "Укажите тип помещения")) {
			to_step(2, true);
		}
	});

	$("#to_step3").click(function(event) {
		event.preventDefault();
		if (check_area()) {
			to_step(3, true);
		}
	});

	$("#to_step4").click(function(event) {
		event.preventDefault();
		
		var checked = $("#type-repair input:checked").length > 0;
		if (!checked){
			alert("Укажите какой ремонт необходим");
			return false;
		} else {
			to_step(4, true);
		}
		
		/*if (check_radio_selected("type-repair", "Укажите какой ремонт необходим"))	{
			to_step(4, true);
		}*/
	});

	$("#to_step5").click(function(event) {
		event.preventDefault();
		if (check_radio_selected("design-project", "Укажите есть ли у вас дизайн-проект")) {
			to_step(5, true);
		}
	});

	$("#to_step6").click(function(event) {
		event.preventDefault();
		
		var checked = $("#purchase input:checked").length > 0;
		if (!checked){
			alert("Укажите нужна ли вам помощь в закупке материалов");
			return false;
		} else {
			to_step(6, true);
		}
		
	});

	$("#to_step7").click(function(event) {
		event.preventDefault();
		if (check_radio_selected("repair-date", "Укажите когда вы планируете начать ремонт")) {
			to_step(7, true);
		}
	});

	$("#to_step8").click(function(event) {
		event.preventDefault();
		if (check_radio_selected("repair-price", "Укажите в какой бюджет вы хотите уложиться")) {
			
			if ($('#repair-price_5_input').is(':checked')) {
				if (($('#price_input').val().length > 0)) {
					to_step(8, true);
				} else {
					alert('Укажите свой бюджет в который вы хотите уложится');
					return false;
				}
			} else {
				to_step(8, true);
			}
		}
	});


	// Отправка формы (нажатием на финальную кнопку)
	$("#to_submit").click(function(event) {
		event.preventDefault();
		$("#quiz_form").submit();
	});
	
	// Проверка телефона и ПК при отправке формы
	$('#quiz_form').submit(function () {
		
		var name = $.trim($(this).find('input[name="name_input"]').val());
		var phone = $.trim($(this).find('input[name="phone"]').val());
		var email = $.trim($(this).find('input[name="email_input"]').val());
		
		if (name  === '') {
			alert('Заполните поле с именем');
			return false;
		}

		if (phone  === '') {
			alert('Заполните поле с номером телефона');
			return false;
		} else if (phone.length < 8) {
			alert('Слишком короткий номер');
			return false;
		} else if (!((phone.lastIndexOf("+7", 0) === 0) || (phone.lastIndexOf("8", 0) === 0))) {
			alert('Введите корректный номер в формате +79998887766 или 89998887766');
			return false;
		}
		
		
		if(email  === '' || !validateEmail(email)) { 
			alert('Введите корректный E-mail');
			return false;
		}
		
		if (!$('input:checkbox[name="acceptance"]').is(':checked')) {
			alert('Вы должны ознакомиться с политикой конфиденциальности');
			return false;
		}
		
	});


	// для возврата к предыдущему вопросу
	window.addEventListener("popstate", function(e) {
		var step = 0;
        if (e.state) {
			step = e.state.step_x;
        }
        to_step(step);
    });

})(jQuery);



$(document).ready(function() {
	
	jQuery('body').on('change', '#quiz_form', function() {
		
		// Обводка для label input[type=radio]
		$('input[type=radio]').each(function(){
			if ($(this).is(':checked')) {       
				$(this).parent('label').addClass('checked');
			} else {
				$(this).parent('label').removeClass('checked');
			}   
		});
		
		// Обводка для label input[type=checkbox]
		$('input[type=checkbox]').each(function(){
			if ($(this).is(':checked')) {       
				$(this).parent('label').addClass('checked');
			} else {
				$(this).parent('label').removeClass('checked');
			}   
		});
		
	});
	
	// Поле ввода внутри label для input[type=radio]
	$("#up-layer").click(function() { $("#price_input").focus(); });
	
});

И последнее — шаблон благодарности, после прохождения квиза, он же отправляет результаты на почту.

<?php /*Template Name: Благодарность*/ ?>

<?php get_header(); ?>

<?php 
if (!isset ($_POST['uri'])) {
    echo 'Нет данных для обработки. Попробуйте <a href="/">Перейти на главную</a>';
    exit();
}

$uri = isset($_POST['uri']) ? $_POST['uri'] : "";

$type_home = isset($_POST['type-home']) ? $_POST['type-home'] : "";
$area = isset($_POST['area']) ? $_POST['area'] : "";

$type_repair = isset($_POST['type-repair']) ? $_POST['type-repair'] : "";
$type_repair_line = implode(', ', $type_repair);
$design_project = isset($_POST['design-project']) ? $_POST['design-project'] : "";
$purchase = isset($_POST['purchase']) ? $_POST['purchase'] : "";
$purchase_line = implode(', ', $purchase);

$repair_date = isset($_POST['repair-date']) ? $_POST['repair-date'] : "";
$repair_price = isset($_POST['repair-price']) ? $_POST['repair-price'] : "";
$price_input = isset($_POST['price_input']) ? $_POST['price_input'] : "";

$name = isset($_POST['name_input']) ? $_POST['name_input'] : "";
$phone = isset($_POST['phone']) ? $_POST['phone'] : "";
$email_client = isset($_POST['email_input']) ? $_POST['email_input'] : "";

// Отправка письма
 
$address = "info@site.ru";

$mes = "Имя: $name\n
Телефон: $phone\n
E-mail: $email_client\n

	Тип помещения: $type_home\n
	Площадь: $area\n
	
	Вариант(ы) ремонта: $type_repair_line\n
	Дизайн-проект (есть?): $design_project\n
	Помощь в закупке материалов: $purchase_line\n
	
	Планируемая дата ремонта: $repair_date\n
	Планируемая сумма ремонта: $repair_price\n
	Своя сумма на ремонт: $price_input";
	
$sub = "Рассчет стоимости ремонта";

$email = "no-reply@site.ru";

$send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = utf-8\r\nFrom:".$email);
?>

<main role="main">
  
	<section id="main-content"><div class="wrapper box">

		<?php //get_sidebar(); ?>

		<div id="content" class="block-12">  

			<?php if (have_posts()) : ?>	
			<?php while (have_posts()) : the_post(); ?>  

				<div id="post-content" class="area">
					<?php echo do_shortcode( '' ); ?>
					<h1 id="title"><?php the_title(); ?></h1>
					<?php the_content(); ?>
				</div>

			<?php endwhile; ?>
			<?php endif; ?> 

		</div>  

	</div></section>

</main>

<?php get_footer(); ?>

В данной форме присутствуют поля checkbox, их результаты POST приходят в виде массива, и нужно перед передачей их преобразовывать в строку:

$purchase = isset($_POST['purchase']) ? $_POST['purchase'] : "";
$purchase_line = implode(', ', $purchase);

Скидка за заполнение квиза

В квиз-формах присутствую различные мотивирующие техники. Например можно добавлять по 1% или 1000 руб. за прохождение каждого шага. Либо можно дать первоначальную сумму, и по мере прохождения квиза, сумма уменьшается с каждой секундой.

<span id="discount_total_count">30 000 руб.</span>
<input type="hidden" name="findiscount" id="findiscount" value=""/>

Функция уменьшения скидки

function set_timer() {
	timerId = setInterval(function() {
		if (discount_value > 0)
		{
			discount_value = discount_value - 25;
			$("#discount_total_count").text("" + discount_value.toLocaleString('ru') + " руб.");
		}
		else {
			clearInterval(timerId);
		}
	}, 1000);
}

На последнем шаге останавливает уменьшение скидки, получаем значение и передаем его скрытым полем:

$('#to_step8').on('click', function(){
	clearInterval(timerId);
	//$("#final_discount").text(discount_value.toLocaleString('ru'));
	var finaldiscount = $("#final_discount").text();
	$("#findiscount").val(finaldiscount);
});

Поделится информацией с друзьями

  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Квиз-форма
Акции Woocommerce
Рекомендации для васАкции WoocommerceOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.