Создание динамических форм обратной связи в WordPress с примерами кода

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

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

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

Например, если пользователь выбирает «Техническая поддержка», можно автоматически показать дополнительные поля для описания проблемы, а при выборе «Обратная связь по продукту» — поля для оценки качества.

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

Использование плагина Contact Form 7 с расширениями для динамики

Один из популярных плагинов для создания форм — Contact Form 7. Он бесплатен, гибок и расширяется с помощью дополнений.

Для динамических форм рекомендую использовать плагин Contact Form 7 Dynamic Text Extension. Он позволяет добавлять поля с динамическим содержимым, например, подставлять данные из URL, сессии или пользовательских переменных.

Пример: форма с динамическим подставлением темы обращения из URL

Для подстановки темы обращения из параметра URL можно использовать следующий шорткод в форме CF7:

[dynamictext subject "CF7_get key=subject" readonly]

Если пользователь перейдет по ссылке https://site.ru/contact?subject=Техническая поддержка, то поле «Тема» в форме автоматически заполнится значением «Техническая поддержка».

Создание кастомных динамических форм с помощью кода PremiumWP

Если нужно реализовать более сложную логику, можно написать собственный код, используя хуки WordPress и AJAX. Рассмотрим пример создания формы с динамической подгрузкой полей в зависимости от выбора пользователя.

1. HTML-разметка формы

Создаем форму с выпадающим списком и контейнером для дополнительных полей:

<form id="premiumwp_dynamic_form" method="post">
  <label for="inquiry_type">Тип обращения:</label>
  <select id="inquiry_type" name="inquiry_type">
    <option value="">Выберите тип</option>
    <option value="support">Техническая поддержка</option>
    <option value="feedback">Обратная связь</option>
    <option value="sales">Вопрос по продажам</option>
  </select>

  <div id="additional_fields"></div>

  <input type="submit" value="Отправить" />
</form>

2. JavaScript для динамической подгрузки полей

Подключаем скрипт, который при изменении селекта отправляет AJAX-запрос для получения необходимых полей:

jQuery(document).ready(function($) {
  $('#inquiry_type').on('change', function() {
    var inquiryType = $(this).val();
    $.ajax({
      url: premiumwp_ajax_object.ajax_url,
      type: 'POST',
      data: {
        action: 'premiumwp_load_fields',
        inquiry_type: inquiryType
      },
      success: function(response) {
        $('#additional_fields').html(response);
      }
    });
  });
});

3. PHP-обработчик AJAX запроса

Добавляем в functions.php следующий код для обработки AJAX и возврата нужных полей:

add_action('wp_ajax_premiumwp_load_fields', 'premiumwp_load_fields_callback');
add_action('wp_ajax_nopriv_premiumwp_load_fields', 'premiumwp_load_fields_callback');

function premiumwp_load_fields_callback() {
  $type = sanitize_text_field($_POST['inquiry_type']);
  if ($type === 'support') {
    echo '<label for="problem_description">Опишите проблему:</label>';
    echo '<textarea id="problem_description" name="problem_description" required></textarea>';
  } elseif ($type === 'feedback') {
    echo '<label for="feedback_rating">Оцените наш сервис (1-5):</label>';
    echo '<input type="number" id="feedback_rating" name="feedback_rating" min="1" max="5" required />';
  } elseif ($type === 'sales') {
    echo '<label for="product_interest">Интересующий продукт:</label>';
    echo '<input type="text" id="product_interest" name="product_interest" required />';
  } else {
    echo '';
  }
  wp_die();
}

Валидация и обработка данных формы

После отправки формы важно валидировать данные на сервере и обработать их, например, отправить письмо или сохранить в базу данных. Для этого можно использовать хук admin_post_nopriv_premiumwp_form_submit и admin_post_premiumwp_form_submit для авторизованных и гостей соответственно.

Пример обработчика формы:

add_action('admin_post_nopriv_premiumwp_form_submit', 'premiumwp_handle_form_submit');
add_action('admin_post_premiumwp_form_submit', 'premiumwp_handle_form_submit');

function premiumwp_handle_form_submit() {
  if (!isset($_POST['inquiry_type'])) {
    wp_redirect(wp_get_referer());
    exit;
  }

  $type = sanitize_text_field($_POST['inquiry_type']);
  // Проверяем дополнительные поля в зависимости от типа
  switch($type) {
    case 'support':
      $desc = sanitize_textarea_field($_POST['problem_description']);
      break;
    case 'feedback':
      $rating = intval($_POST['feedback_rating']);
      break;
    case 'sales':
      $product = sanitize_text_field($_POST['product_interest']);
      break;
  }

  // Пример отправки письма
  $to = get_option('admin_email');
  $subject = 'Новое обращение: ' . $type;
  $message = "Тип обращения: $type\n";
  if (isset($desc)) $message .= "Описание проблемы: $desc\n";
  if (isset($rating)) $message .= "Оценка: $rating\n";
  if (isset($product)) $message .= "Интересующий продукт: $product\n";

  wp_mail($to, $subject, $message);

  wp_redirect(home_url('/thank-you'));
  exit;
}

Интеграция с плагином PremiumWP My Popup для вывода формы

Для удобного показа динамической формы можно использовать плагин My Popup от WPSHOP. Он позволяет выводить форму в всплывающем окне по клику или по времени, а также настраивать таргетинг.

Таким образом, вы сможете собрать обратную связь максимально эффективно и не навредить удобству пользователей.

Выводы и рекомендации по созданию динамических форм

Динамические формы обратной связи в WordPress позволяют сделать взаимодействие с пользователем гибким и удобным. Используйте готовые расширения для Contact Form 7, если нужна легкая реализация, или пишите собственный код с использованием AJAX, если необходимо нестандартное поведение.

Обязательно валидируйте данные на сервере, обеспечивайте безопасность и удобство. Используйте всплывающие окна или виджеты для показа форм — это увеличит конверсию.

Если хотите упростить создание и управление всплывающими формами, обратите внимание на плагин My Popup от WPSHOP.