/ Wordpress / Опросы на сайте без плагина

Опросы на сайте без плагина

HIT

12.12.2019

1381

Создадим функционал сбора информации (опросов) от посетителей без использования плагинов, дорабатывая нужные аспекты так как нам нужно.

Как создать функционал опросов с помощью плагинов описано здесь.

Создадим форму опроса для клиентов, например отеля. Технически выглядит это в виде планшета (на подставке) на ресепшн. И при выписке гостям предлагают таким образом выразить свое мнение.

Шаблон опроса

<div class="quest-block">

	<h1 id="title">Рекомендовали бы Вы наш отель своим знакомым или коллегам?</h1>
	
	<div class="answers">
		<div><div class="yes" value="yes">Да <i class="fas fa-thumbs-up"></i></div></div>
		<div><div class="no" value="no">Нет <i class="fas fa-thumbs-down"></i></div></div>
	</div>
	
</div>

Сам шаблон опроса должен быть минималистичным, с крупными текстом и кнопками.

Скрипт отправки

$(".answers > div > div").on("click", function (event) {
	event.preventDefault();
	var BtnValue = $(this).attr( 'value' );
	
	$.ajax({
		url: "/wp-admin/admin-ajax.php",
		method: 'post',
		data: {
			action: 'ajax_order',
			BtnValue: BtnValue
		},
		success: function (response) {
			$('.quest-block').html(response);
			setTimeout(function () {  location.reload();  }, 3000);
		}
	});
});

После нажатия на один из вариантов вместо формы появляется текст благодарности и через 3 секунды страница обновляется до первоначального состояния.

Если нужно не перезагрузить страницу, а сделать редирект на другую, используем функцию: window.location.href = «https://site.ru/»;

Обработчик формы и запись значений в базу

function ajax_form(){
	
	$page_number = 1091;
	
	if($_POST['BtnValue'] == 'yes') {
		
		$count_key = 'visit_again_yes';
		$count = get_post_meta($page_number, $count_key, true);
		if($count==''){
			add_post_meta($page_number, $count_key, '1');
		}else{
			$count++;
			update_post_meta($page_number, $count_key, $count);
		}
		
	} else {
		
		$count_key = 'visit_again_no';
		$count = get_post_meta($page_number, $count_key, true);
		if($count==''){
			add_post_meta($page_number, $count_key, '1');
		}else{
			$count++;
			update_post_meta($page_number, $count_key, $count);
		}
		
	}
	
	$response = '<p>Спасибо за ваше мнение, Ваш отзыв очень важен для нас!<br> Будем рады снова видеть Вас в отелях сети Undersun!</p>';

    if ( defined( 'DOING_AJAX' ) && DOING_AJAX ){
        echo $response;
        wp_die();
    }
}

add_action('wp_ajax_nopriv_ajax_order', 'ajax_form' );
add_action('wp_ajax_ajax_order', 'ajax_form' );

Метаполя привязываем к какой-либо конкретной странице, чтобы легко их находить. Для каждого значения нужно заводить отдельное метаполе.

Страница результатов в админке

Создадим в админке страницу в которой можно посмотреть результаты опроса, а также кнопку (и функцию) очистки значений.

add_action('admin_menu', function(){
	add_menu_page( 'Опросы', 'Опросы', 'manage_options', 'site-options', 'add_my_setting', '', 30 ); 
} );

// функция отвечает за вывод страницы настроек
function add_my_setting(){
	?>
	<div class="wrap">
		<h2><?php echo get_admin_page_title(); ?></h2>
		
		<h3>Рекомендовали бы Вы наш отель своим знакомым или коллегам?</h3>

		<?php 
		$page_number = 1091;
		$visit_again_yes = get_post_meta($page_number, 'visit_again_yes', true);
		$visit_again_no = get_post_meta($page_number, 'visit_again_no', true);
		
		echo 'Ответов Да: <strong>';
		if (!empty ($visit_again_yes)) { echo $visit_again_yes; } else { echo '0'; }
		echo '</strong><br>';
		
		echo 'Ответов Нет: <strong>';
		if (!empty ($visit_again_no)) { echo $visit_again_no; } else { echo '0'; }
		echo '</strong><br>';
		?>
		
		<input type="submit" class="delete_button" name="delete_visit_again" value="Очистить значения" />
		<p class="quest-block"></p>

	</div>
	
	<script>
	jQuery(".delete_button").on("click", function (event) {
		event.preventDefault();
		
		jQuery.ajax({
			url: "/wp-admin/admin-ajax.php",
			method: 'post',
			data: {
				action: 'ajax_clear',
			},
			success: function (response) {
				jQuery('.quest-block').html(response);
				setTimeout(function () {  location.reload();  }, 1000);
			}
		});
	});
	</script>
	
	<?php
}

function clear_form(){
	
	$page_number = 1091;
	
	delete_post_meta($page_number, 'visit_again_yes');
	delete_post_meta($page_number, 'visit_again_no');
	
	$response = 'Данные очищены';

    if ( defined( 'DOING_AJAX' ) && DOING_AJAX ){
        echo $response;
        wp_die();
    }
}

add_action('wp_ajax_ajax_clear', 'clear_form' );

Метод конечно не универсальный, при изменений структуры ответов нужно будет дорабатывать скрипт и обработчик. Но при этом ничего лишнего — только необходимы функционал с минимальным использованием ресурсов.

Написать функцию ежемесячной отправки (на e-mail) значений с последующим обнулением результатов.

Несколько вопросов по порядку

Немного меняем верстку

<div class="quest-block">

	<div class="quest" id="quest-1">
	
		<h1 id="title">Рекомендовали бы Вы наш отель своим знакомым или коллегам?</h1>
		
		<div class="answers" id="visit_again">
			<div><div class="yes" value="yes">Да</div></div>
			<div><div class="no" value="no">Нет</div></div>
		</div>
		
	</div>
	
	<div class="quest" id="quest-2" style="display: none;">
	
		<h1 id="title">Понравилась ли Вам работа персонала?</h1>
		
		<div class="answers" id="personal">
			<div><div class="yes" value="yes">Да</div></div>
			<div><div class="no" value="no">Нет</div></div>
		</div>
		
	</div>
	
	<div class="final-quest" id="quest-3" style="display: none;">
	
		<h1 id="title">Понравился ли Вам завтрак в отеле?</h1>
		
		<div class="answers" id="breakfest">
			<div><div class="yes" value="yes">Да</div></div>
			<div><div class="no" value="no">Нет</div></div>
		</div>
		
	</div>		
	
</div>

Меняем скрипты (добавился скрипт переключения вопросов и отметки выбранного ответа):

// Скрытие текущего вопроса и показ следующего, отметить выбор
jQuery('.answers > div > div').on('click', function () {
	jQuery(this).addClass('selected');
	jQuery(this).parents('.quest').hide();
	
	jQuery(this).parents('.quest').next().show();
});


// Отправка формы (нажатием на финальную кнопку)
$(".final-quest .answers > div > div").click(function(event) {
	event.preventDefault();
	var visit_again = $('#visit_again .selected').attr( 'value' );
	var personal = $('#personal .selected').attr( 'value' );
	var breakfest = $('#breakfest .selected').attr( 'value' );
	
	$.ajax({
		url: "/wp-admin/admin-ajax.php",
		method: 'post',
		data: {
			action: 'ajax_order',
			visit_again: visit_again,
			personal: personal,
			breakfest: breakfest			
		},
		success: function (response) {
			$('.quest-block').html(response);
			setTimeout(function () {  location.reload();  }, 3000);
		}
	});
});

В функциональной части просто добавляем новые мета-поля.

Индекс NPS

Данный опрос позволяет получить индекс клиентской лояльности (NPS). Верстка данного вопроса (внедряется в структуру и стили описанные выше):

<div class="answers" id="nps">
	<div><div class="nps_one" value="nps_one">1</div></div>
	<div><div class="nps_two" value="nps_two">2</div></div>
	<div><div class="nps_three" value="nps_three">3</div></div>
	<div><div class="nps_four" value="nps_four">4</div></div>
	<div><div class="nps_five" value="nps_five">5</div></div>
	<div><div class="nps_six" value="nps_six">6</div></div>
	<div><div class="nps_seven" value="nps_seven">7</div></div>
	<div><div class="nps_eight" value="nps_eight">8</div></div>
	<div><div class="nps_nine" value="nps_nine">9</div></div>
	<div><div class="nps_ten" value="nps_ten">10</div></div>			
</div>

Стили пунктов:

#nps.answers > div {width: 10%; padding: 0 7px;}	
#nps.answers > div > div {width: 60px; padding: 7px 0; font-size: 2.4rem; border-radius: 100px;}
	
.answers > div > .nps_one {background: #F44336;}
.answers > div > .nps_two {background: #ff6b1d;}
.answers > div > .nps_three {background: #ff8928;}
.answers > div > .nps_four {background: #ffa500;}
.answers > div > .nps_five {background: #f7c600;}
.answers > div > .nps_six {background: #a5d323;}
.answers > div > .nps_seven {background: #72de1b;}
.answers > div > .nps_seight {background: #5ccf3a;}
.answers > div > .nps_nine {background: #45c14c;}

Функция получения значения поля nps

$nps_count_key = $_POST['nps'];
$nps_count = get_post_meta($page_number, $nps_count_key, true);
if($nps_count=='') { 
	add_post_meta($page_number, $nps_count_key, '1'); 
} else { 
	$nps_count++; 
	update_post_meta($page_number, $nps_count_key, $nps_count); 
}
Индекс NPS рассчитывается по формуле:
NPS = % положительных значений от общего числа (9,10) — % отрицательных значений от общего числа (1,2,3,4,5,6). 7 и 8 считаются нейтральными, но по сути они участвуют в расчетах.

Вывод результатов:

<h3>Рекомендовали бы Вы наш отель своим знакомым или коллегам?</h3>

<?php $page_number = 1091; ?>

<?php
// критики
$nps_one = get_post_meta($page_number, 'nps_one', true);
$nps_two = get_post_meta($page_number, 'nps_two', true);
$nps_three = get_post_meta($page_number, 'nps_three', true);
$nps_four = get_post_meta($page_number, 'nps_four', true);
$nps_five = get_post_meta($page_number, 'nps_five', true);
$nps_six = get_post_meta($page_number, 'nps_six', true);

// нейтралы
$nps_seven = get_post_meta($page_number, 'nps_seven', true);
$nps_eight = get_post_meta($page_number, 'nps_eight', true);	

// промоутеры
$nps_nine = get_post_meta($page_number, 'nps_nine', true);
$nps_ten = get_post_meta($page_number, 'nps_ten', true);


$total_people = $nps_one + $nps_two + $nps_three + $nps_four + $nps_five + $nps_six + $nps_seven + $nps_eight + $nps_nine + $nps_ten;
$critics = $nps_one + $nps_two + $nps_three + $nps_four + $nps_five + $nps_six;
$promoters = $nps_nine + $nps_ten;

$critics_percent = 100 * $critics / $total_people;
$promoters_percent = 100 * $promoters / $total_people;

$critics_percent_round = round($critics_percent, 2);
$promoters_percent_round = round($promoters_percent, 2);

$nps = $promoters_percent_round - $critics_percent_round;

echo 'Общее количество людей: <strong>'.$total_people.'</strong><br>';
echo 'Количество критиков: <strong>'.$critics.'</strong><br>';
echo 'Количество промоутеров: <strong>'.$promoters.'</strong><br>';
echo '<br>';

echo 'Процент критиков от общего числа: <strong>'.$critics_percent_round.' %</strong><br>';
echo 'Процент промоутеров от общего числа: <strong>'.$promoters_percent_round.' %</strong><br>';
echo '<br>';	

echo 'Индекс NPS: <strong>'.$nps.'</strong>';	
?>

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

  • Похожие записи
  • Комментарии
  • Вложения
Json Начало

Json Начало

JSON (JavaScript Object Notation) — это текстовый протокол обмена данными, чем-то похожий на более привычный XML, но данные записываются в нем более компактно. Изначально он был разработан для нужд JavaScript Читать далее »

Юр. или физ. лицо при оформлении

Юр. или физ. лицо при оформлении

Расширим функционал Woocommerce выбором при оформлении заказа: юр. или физ. лицо. Естественно данный выбор будет влиять на множество аспектов самого процесса заказа и прочих функций WC. Создание переключателя и полей Читать далее »

/
Технология Ajax

Технология Ajax

AJAX — это технология, позволяющая обмениваться данными между браузером и сервером без перезагрузок страницы, что бывает весьма удобно, иногда необходимо. Простой запрос и обновление контента Создаем файл time.php с содержимым Читать далее »

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

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

Опросы на сайте без плагина Опросы на сайте без плагина
Datetimepicker
Рекомендации для васDatetimepickerOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.