Создадим квиз-форму без использования какого-либо плагина на чистом 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);
});
Спасибо за интересную статью, но как это собрать в рабочую страничку?
Верстка с формой это и есть сама страница. Скрипт и стили прописывайте куда удобно, чтобы они подключались. И последнее необходимо создать шаблон страницы с обработчиком и отправкой результатов. Шаблон вешаем на страницу с url /thank-you/ (например).
Спасибо за Квиз! Подскажите как настроить thank-you.php после ответов на вопросы, не находит этот фаил. Или надо создать thank-you в другом формате?
Я на html все поставил работает, но когда дело доходит до отправки всего что заполнено в квизе, переходит на страницу /thank-you/Файл не найден сам фаил создал php и залил туда все что было сказано в статье выше сам код php. Не работает, что не так я сделал?
thank-you.php — этот файл нужно сделать шаблоном страницы (/*Template Name: Страница благодарности*/) и назначить его странице с url /thank-you/.
СПАСИБО-Все отлично Работает. Но только на WorldPress как отдельный шаблон thank -you page. У меня сам квиз на самописном Html стоит а ответ направляет на WorldPress Неплохо было бы сделать это через обычный отправщик на send-mail.php для html но как это сделать? Если подскажите буду благодарен и стану вас рекомендовать друзьям! Заранее спасибо.
Так и пропишите в action формы (form action=) путь к своему файлу-обработчику и форма после отправки будет перекидывать на него.
так это PHP для вордпресса
Написано на на чистом html, css, jQuery и php. В реальности всё работает, до отправки формы, — далее сыплются ошибки переменных. Нужно пилить форму отправки, чтобы на чистом html, css, jQuery и php )))
Большое спасибо за классный пример. Но что-то кнопка назад не корректно работает, либо возвращает меня к последнему шагу ( заполнения формы ), либо на самое начало ( пройти тест ), либо как и должно на шаг назад, но если сделать несколько раз вперед — назад, то снова сбивается и куда-то в непонятную сторону переводит. Это только у меня так или что-то не так ? Спасибо еще раз
Да, тоже замечал что бывает работает нестабильно. Но не заморачивался, считая что данная функция не является такой уж важной.
А можешь хотя бы примерно написать, куда смотреть и в чем может быть проблема? Может я бы смог исправить, твой квиз просто впечатляет спасибо за проделанную работу и то, что делишься своими решениями, но очень нужна рабочая кнопка назад, пользователи часто хотят, что то поменять и вернуться, и ты бы очень помоч, если бы хотя бы подсказал, в чем может быть дело. СпасибоP.s пришлось писать новый коментЮ почему то кнопка ответить на свое сообщение не нажимается.
Вот кусок скрипта отвечающий за возврат:
// возможность возвращаться к предыдущему вопросу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;
}
}
По поводу кнопки ответа на комментарий — надо доработать. Энтропия)..
Не работает, сделал чистый html файл загрузил туда скирипты и стили все равно не работает.
Разместите пожалуйста отдельным рабочим файлом чтобы было понятно где косяк.
Извините, можно все таки сделать набор файлов, которые останется только положить на сервер?
А есть ссылка на демо?