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

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

12.12.2019

260

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

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

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

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

<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>';	
?>

Тэги:

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

  • Похожие записи
  • Комментарии
  • Вложения
Технология Ajax

Технология Ajax

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

Открывать запись во всплывающем окне

Открывать запись во всплывающем окне

Задача: открывать запись во всплывающем окне используя загрузку «налету» (ajax). При этом работает сколько угодно раз, т.е. при нажатии на каждую ссылку — загружается соответствующая запись по ID из ссылки. Читать далее »

Фильтр Ajax

Фильтр Ajax

Очередная попытка сделать фильтр wordpress, в этот раз применяя технологию ajax. По сути программирование фильтра — это изобретение велосипеда, но есть 2 момента: во-первых в процессе я начинаю лучше понимать Читать далее »

/

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

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

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