/ Scripts & jquery / Квиз-форма

Квиз-форма

HIT

05.10.2019

8256

16

Создадим квиз-форму без использования какого-либо плагина на чистом 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;}
}

Одной из особенностей данного квиза является то, что мы скрываем стандартные элементы управления radio и 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( '[site-breadcrumbs]' ); ?>
					<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);

Также в шаблоне благодарности можно добавить автоматический возврат (редирект) на главную страницу:

$(document).ready(function(){  
    if(location.href.match(/thank-you/)) {
		setTimeout('location.replace("/")', 10000);
    }				   
});

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

В квиз-формах присутствую различные мотивирующие техники. Например можно добавлять по 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);
});

Поделиться в соц. сетях:

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

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

16 комментариев

  1. Луис

    Спасибо за интересную статью, но как это собрать в рабочую страничку?

    1. Alexandr

      Верстка с формой это и есть сама страница. Скрипт и стили прописывайте куда удобно, чтобы они подключались. И последнее необходимо создать шаблон страницы с обработчиком и отправкой результатов. Шаблон вешаем на страницу с url /thank-you/ (например).

  2. Иван

    Спасибо за Квиз! Подскажите как настроить thank-you.php после ответов на вопросы, не находит этот фаил. Или надо создать thank-you в другом формате?

  3. Иван

    Я на html все поставил работает, но когда дело доходит до отправки всего что заполнено в квизе,  переходит на страницу /thank-you/Файл не найден  сам фаил создал php и залил туда все что было сказано в статье выше сам код php. Не работает, что не так я сделал?

    1. Alexandr

      thank-you.php — этот файл нужно сделать шаблоном страницы (/*Template Name: Страница благодарности*/) и назначить его странице с url /thank-you/.

  4. Иван

    СПАСИБО-Все отлично Работает. Но только на  WorldPress  как отдельный шаблон thank -you page. У меня сам квиз на самописном Html стоит а ответ направляет на WorldPress Неплохо было бы сделать это через обычный отправщик на send-mail.php для html но как это сделать? Если подскажите буду благодарен и стану вас рекомендовать друзьям! Заранее спасибо.

    1. Alexandr

      Так и пропишите в action формы (form action=) путь к своему файлу-обработчику и форма после отправки будет перекидывать на него.

  5. wip

    так это PHP для вордпресса 

  6. Костя

    Написано на на чистом html, css, jQuery и php. В реальности всё работает, до отправки формы, — далее сыплются ошибки переменных. Нужно пилить форму отправки, чтобы на чистом html, css, jQuery и php )))

  7. Никита

    Большое спасибо за классный пример. Но что-то кнопка назад не корректно работает,  либо возвращает меня к последнему шагу ( заполнения формы ), либо на самое начало ( пройти тест ), либо как и должно на шаг назад, но если сделать несколько раз вперед — назад, то снова сбивается и куда-то в непонятную сторону переводит. Это только у меня так или что-то не так ? Спасибо еще раз

    1. Alexandr

      Да, тоже замечал что бывает работает нестабильно. Но не заморачивался, считая что данная функция не является такой уж важной.

  8. Никита

    А можешь хотя бы примерно написать, куда смотреть и в чем может быть проблема? Может я бы смог исправить, твой квиз просто впечатляет спасибо за проделанную работу и то, что делишься своими решениями, но очень нужна рабочая кнопка назад, пользователи часто хотят, что то поменять и вернуться, и ты бы очень помоч, если бы хотя бы подсказал, в чем может быть дело. СпасибоP.s пришлось писать новый коментЮ почему то кнопка ответить на свое сообщение не нажимается.

    1. Alexandr

      Вот кусок скрипта отвечающий за возврат:
      // возможность возвращаться к предыдущему вопросу
      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;
      }
      }

      По поводу кнопки ответа на комментарий — надо доработать. Энтропия)..

  9. Станислав

    Не работает, сделал чистый html файл загрузил туда скирипты и стили  все равно не работает.
    Разместите пожалуйста отдельным рабочим файлом чтобы было понятно где косяк.

  10. Roman

    Извините, можно все таки сделать набор файлов, которые останется только положить на сервер?

  11. Дмитрий

    А есть ссылка на демо?

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