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

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

12.12.2019

246

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

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

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

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

<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). Находим все теги записей входящих в категорию Данный код можно вставить в боковую колонку в виде виджета. <?php Читать далее »

/ /
Загрузка JavaScript динамически

Загрузка JavaScript динамически

Иногда требуется подгрузить скрипт на лету, в этом поможет технология Ajax. Обычный скрипт JavaScript динамически Создаем файл скрипта script-dinamic.js с содержимым // случайное число от 1 до 100 var rnd Читать далее »

Подгрузка постов «налету» II: Кнопка

Подгрузка постов «налету» II: Кнопка

Данный вариант подгрузки постов «налету» является альтернативой подгрузке постов при скроллинге. Только в данном методе посты будут подгружаться по нажатию на кнопку. Также учтены некоторые особенности шаблона данного сайта высота Читать далее »

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

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

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