Как создать функционал обратной связи с оценкой в WordPress

Обратная связь — один из ключевых элементов взаимодействия с пользователями на сайте. Особенно ценно, когда помимо обычного сообщения посетитель может оставить оценку или рейтинг, что помогает лучше понять качество продукта или услуги. В этой статье мы подробно разберём, как реализовать функционал обратной связи с оценкой в WordPress: от простого контактного формата до расширенного решения с сохранением данных и уведомлениями.

Почему важно добавить оценку в форму обратной связи

Добавление поля оценки в форму обратной связи позволяет получить не только текстовый отзыв, но и количественную характеристику впечатлений пользователя. Это помогает:

• Анализировать качество сервиса или контента.
• Отслеживать динамику изменения мнений клиентов.
• Повысить вовлечённость за счёт упрощённого способа оставить отзыв.

Кроме того, оценочные данные можно использовать для построения графиков и отчётов, улучшая управление сайтом.

Выбор подхода: плагин или кастомная реализация

Для реализации обратной связи с оценкой в WordPress есть два основных пути:

Использование готовых плагинов

Существует множество плагинов, которые добавляют формы с рейтингом. Например, популярный WPRemark позволяет легко создавать формы обратной связи с рейтингом и отзывами. Его преимущества:

• Простая настройка через админку.
• Встроенный функционал уведомлений и аналитики.
• Интеграция с WPExpertReview для расширенных отчётов.

Однако, если нужны уникальные функции или глубокая интеграция, стоит рассмотреть кастомную реализацию.

Кастомная реализация с помощью кода

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

Создание кастомной формы обратной связи с оценкой

Для начала добавим шорткод, который выведет форму на страницу или в записи. В functions.php вашей темы добавьте следующий код:

function wpvip_feedback_form() {
  if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['wpvip_feedback_nonce']) && wp_verify_nonce($_POST['wpvip_feedback_nonce'], 'wpvip_feedback_form')) {
    $name = sanitize_text_field($_POST['wpvip_name']);
    $email = sanitize_email($_POST['wpvip_email']);
    $message = sanitize_textarea_field($_POST['wpvip_message']);
    $rating = intval($_POST['wpvip_rating']);

    if ($name && $email && $message && $rating >=1 && $rating <=5) {
      global $wpdb;
      $table = $wpdb->prefix . 'wpvip_feedback';
      $wpdb->insert($table, [
        'name' => $name,
        'email' => $email,
        'message' => $message,
        'rating' => $rating,
        'date' => current_time('mysql')
      ]);

      // Отправляем уведомление админу
      wp_mail(get_option('admin_email'), 'Новая обратная связь с оценкой', "Имя: $name\nEmail: $email\nОценка: $rating\nСообщение: $message");

      return '<p>Спасибо за ваш отзыв и оценку!</p>';
    } else {
      return '<p>Пожалуйста, заполните все поля корректно.</p>' . wpvip_render_form($name, $email, $message, $rating);
    }
  }
  return wpvip_render_form();
}

function wpvip_render_form($name = '', $email = '', $message = '', $rating = 0) {
  ob_start();
  ?>
  <form method="post">
    <?php wp_nonce_field('wpvip_feedback_form', 'wpvip_feedback_nonce'); ?>
    <p><label>Имя:<br><input type="text" name="wpvip_name" value="<?php echo esc_attr($name); ?>" required></label></p>
    <p><label>Email:<br><input type="email" name="wpvip_email" value="<?php echo esc_attr($email); ?>" required></label></p>
    <p><label>Сообщение:<br><textarea name="wpvip_message" required><?php echo esc_textarea($message); ?></textarea></label></p>
    <p><label>Оценка:<br>
      <select name="wpvip_rating" required>
        <option value="">Выберите</option>
        <?php for ($i=1; $i <= 5; $i++): ?>
          <option value="<?php echo $i; ?>" <?php selected($rating, $i); ?>><?php echo $i; ?></option>
        <?php endfor; ?>
      </select>
    </label></p>
    <p><button type="submit">Отправить</button></p>
  </form>
  <?php
  return ob_get_clean();
}

add_shortcode('wpvip_feedback', 'wpvip_feedback_form');

Этот код создаёт шорткод [wpvip_feedback], который можно вставить в любую страницу. Форма проверяет данные, сохраняет их в отдельную таблицу и отправляет уведомление администратору.

Создание таблицы для хранения отзывов и оценок

Для сохранения данных нужно создать новую таблицу в базе. Лучше сделать это при активации темы или плагина. Пример функции для создания таблицы:

function wpvip_create_feedback_table() {
  global $wpdb;
  $table_name = $wpdb->prefix . 'wpvip_feedback';
  $charset_collate = $wpdb->get_charset_collate();
  
  $sql = "CREATE TABLE IF NOT EXISTS $table_name (
    id mediumint(9) NOT NULL AUTO_INCREMENT,
    name tinytext NOT NULL,
    email varchar(100) NOT NULL,
    message text NOT NULL,
    rating tinyint NOT NULL,
    date datetime DEFAULT CURRENT_TIMESTAMP NOT NULL,
    PRIMARY KEY  (id)
  ) $charset_collate;";

  require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
  dbDelta($sql);
}

register_activation_hook(__FILE__, 'wpvip_create_feedback_table');

Если добавляете в тему, вызовите эту функцию один раз вручную или через admin_init.

Улучшение функционала: AJAX отправка и вывод отзывов

Реализация AJAX отправки формы

Чтобы улучшить UX, можно отправлять форму без перезагрузки страницы. Для этого добавим AJAX обработчик и JavaScript:

function wpvip_enqueue_scripts() {
  wp_enqueue_script('wpvip-feedback', get_template_directory_uri() . '/js/wpvip-feedback.js', ['jquery'], null, true);
  wp_localize_script('wpvip-feedback', 'wpvip_ajax', [
    'ajax_url' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('wpvip_feedback_nonce')
  ]);
}
add_action('wp_enqueue_scripts', 'wpvip_enqueue_scripts');

function wpvip_handle_ajax_feedback() {
  check_ajax_referer('wpvip_feedback_nonce', 'nonce');

  $name = sanitize_text_field($_POST['name']);
  $email = sanitize_email($_POST['email']);
  $message = sanitize_textarea_field($_POST['message']);
  $rating = intval($_POST['rating']);

  if (!$name || !$email || !$message || $rating < 1 || $rating > 5) {
    wp_send_json_error('Заполните все поля корректно');
  }

  global $wpdb;
  $table = $wpdb->prefix . 'wpvip_feedback';
  $inserted = $wpdb->insert($table, [
    'name' => $name,
    'email' => $email,
    'message' => $message,
    'rating' => $rating,
    'date' => current_time('mysql')
  ]);

  if ($inserted) {
    wp_mail(get_option('admin_email'), 'Новая обратная связь с оценкой', "Имя: $name\nEmail: $email\nОценка: $rating\nСообщение: $message");
    wp_send_json_success('Спасибо за отзыв!');
  } else {
    wp_send_json_error('Ошибка при сохранении');
  }
}
add_action('wp_ajax_nopriv_wpvip_feedback', 'wpvip_handle_ajax_feedback');
add_action('wp_ajax_wpvip_feedback', 'wpvip_handle_ajax_feedback');

JavaScript-файл wpvip-feedback.js:

jQuery(document).ready(function($) {
  $('form.wpvip-feedback-form').on('submit', function(e) {
    e.preventDefault();
    let data = {
      action: 'wpvip_feedback',
      nonce: wpvip_ajax.nonce,
      name: $(this).find('input[name="wpvip_name"]').val(),
      email: $(this).find('input[name="wpvip_email"]').val(),
      message: $(this).find('textarea[name="wpvip_message"]').val(),
      rating: $(this).find('select[name="wpvip_rating"]').val()
    };
    $.post(wpvip_ajax.ajax_url, data, function(response) {
      if (response.success) {
        alert(response.data);
        $('form.wpvip-feedback-form')[0].reset();
      } else {
        alert('Ошибка: ' + response.data);
      }
    });
  });
});

И измените функцию wpvip_render_form, добавив класс форме:

<form method="post" class="wpvip-feedback-form">

Вывод списка отзывов с оценками

Для отображения отзывов с оценками создадим шорткод:

function wpvip_display_feedbacks() {
  global $wpdb;
  $table = $wpdb->prefix . 'wpvip_feedback';
  $feedbacks = $wpdb->get_results("SELECT * FROM $table ORDER BY date DESC LIMIT 10");

  if (!$feedbacks) {
    return '<p>Пока отзывов нет.</p>';
  }

  $output = '<div class="wpvip-feedback-list">';
  foreach ($feedbacks as $fb) {
    $stars = str_repeat('★', $fb->rating) . str_repeat('☆', 5 - $fb->rating);
    $output .= "<div class=\"feedback-item\"><strong>" . esc_html($fb->name) . "</strong> <span>($stars)</span><br>" . esc_html($fb->message) . "<br><em>" . esc_html($fb->date) . "</em></div>";
  }
  $output .= '</div>';
  return $output;
}
add_shortcode('wpvip_feedbacks_list', 'wpvip_display_feedbacks');

Теперь вы можете вставить [wpvip_feedbacks_list] на любую страницу для отображения последних отзывов с оценками.

Заключение

Функционал обратной связи с оценкой в WordPress — мощный инструмент для сбора обратной информации и анализа пользовательского опыта. Вы можете начать с простого решения на кастомном коде, а затем расширить его с помощью AJAX, уведомлений и аналитики. Если хотите сэкономить время и получить готовое решение с широким функционалом, рекомендуем обратить внимание на WPRemark — плагин обратной связи с рейтингом и отзывами, который отлично интегрируется с экосистемой WPSHOP.