Как создать popup с динамическими формами в WordPress

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

Зачем нужны динамические формы в popup

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

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

Реализовать динамические формы можно с помощью AJAX-запросов и JavaScript, что мы и рассмотрим далее.

Выбор плагина для popup с динамическими формами

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

My Popup

Плагин My Popup отлично подходит для создания простых и сложных popup с формами. Он позволяет вставлять шорткоды форм, поддерживает AJAX и кастомный JavaScript.

Contact Form 7 + плагин для popup

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

Пример создания popup с динамической формой и AJAX

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

1. HTML и шорткод для popup

Создайте простой popup с контейнером для формы:

<div id="wppopup-dynamic-form" style="display:none;">
  <form id="wppopup-form">
    <label for="category">Выберите категорию:</label>
    <select name="category" id="category">
      <option value="support">Техподдержка</option>
      <option value="sales">Продажи</option>
      <option value="other">Другое</option>
    </select>
    <div id="dynamic-fields"></div>
    <button type="submit">Отправить</button>
  </form>
</div>

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

Используем jQuery для отслеживания изменения категории и подгрузки соответствующих полей через AJAX:

jQuery(document).ready(function($) {
  function wppopup_load_fields(category) {
    $.ajax({
      url: wppopup_ajax_object.ajax_url,
      type: 'POST',
      data: {
        action: 'wppopup_load_dynamic_fields',
        category: category
      },
      success: function(response) {
        $('#dynamic-fields').html(response);
      }
    });
  }

  $('#category').on('change', function() {
    var category = $(this).val();
    wppopup_load_fields(category);
  });

  // Инициализируем поля при загрузке popup
  wppopup_load_fields($('#category').val());
});

3. PHP функция для обработки AJAX

Добавьте следующий код в functions.php вашей темы или в плагин:

add_action('wp_ajax_wppopup_load_dynamic_fields', 'wppopup_load_dynamic_fields_callback');
add_action('wp_ajax_nopriv_wppopup_load_dynamic_fields', 'wppopup_load_dynamic_fields_callback');

function wppopup_load_dynamic_fields_callback() {
  $category = sanitize_text_field($_POST['category']);
  if ($category === 'support') {
    echo '<label for="issue">Опишите проблему:</label><textarea name="issue" id="issue" required></textarea>';
  } elseif ($category === 'sales') {
    echo '<label for="product">Выберите продукт:</label><select name="product" id="product" required><option value="product1">Продукт 1</option><option value="product2">Продукт 2</option></select>';
  } else {
    echo '<label for="message">Сообщение:</label><textarea name="message" id="message" required></textarea>';
  }
  wp_die();
}

4. Подключение скрипта и локализация AJAX URL

Регистрация и подключение скрипта с передачей AJAX URL:

function wppopup_enqueue_scripts() {
  wp_enqueue_script('wppopup-dynamic-form', get_template_directory_uri() . '/js/wppopup-dynamic-form.js', array('jquery'), null, true);
  wp_localize_script('wppopup-dynamic-form', 'wppopup_ajax_object', array(
    'ajax_url' => admin_url('admin-ajax.php')
  ));
}
add_action('wp_enqueue_scripts', 'wppopup_enqueue_scripts');

Советы по улучшению и интеграции

Для повышения эффективности такого popup:

• Добавьте валидацию формы на клиенте и сервере, чтобы избежать ошибок;
• Используйте nonce для безопасности AJAX-запросов;
• Интегрируйте popup с сервисами email-маркетинга через API или плагины;
• Добавьте условное отображение popup с помощью плагина My Popup для удобного управления;
• Используйте cookie или localStorage, чтобы ограничить показ popup одним пользователям.

Пример расширения: интеграция с плагином WPRemark

Если вы используете WPRemark, можно добавить возможность автоматически отправлять данные из popup в систему отзывов или комментариев, расширяя функциональность формы.

Заключение

Создание popup с динамическими формами в WordPress — эффективный способ улучшить взаимодействие с пользователями и повысить конверсию. Используя AJAX и простые средства WordPress, можно реализовать гибкие формы, подстраивающиеся под нужды посетителей сайта. Рекомендуем использовать готовые плагины, такие как My Popup, и расширять их функционал с помощью кастомного кода для решения конкретных задач.