Как добавить подписку на рассылку в popup WordPress с примерами плагинов и кода

Автор: Сергей Панин | Опубликовано: 23.12.2025

В современном маркетинге email-рассылка остается одним из самых эффективных способов удержания и вовлечения пользователей. На сайте WordPress часто для сбора подписчиков используют popup-окна, которые появляются в нужный момент и предлагают подписаться на рассылку. В этой статье подробно разберем, как добавить подписку на рассылку в popup WordPress, используя как готовые плагины, так и собственные решения с кодом.

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

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

Popup Maker

Один из самых мощных и гибких плагинов для создания popup в WordPress. Позволяет создавать любые окна, включая формы подписки. Поддерживает интеграцию с MailChimp, Constant Contact и другими сервисами.

Установка и активация через админку WordPress.
Создание нового popup с настройкой условий показа.
Вставка формы подписки в содержимое popup через шорткод или HTML.

MailOptin

Специализированный плагин для сбора email через popup, слайдеры и виджеты. Есть интеграция с популярными почтовыми сервисами и удобный визуальный редактор.

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

Если вы хотите полностью контролировать процесс и минимизировать использование плагинов, можно сделать popup с подпиской самостоятельно. Покажу пример простого popup с HTML, CSS и AJAX для отправки email на сервер.

HTML и CSS для popup

<!-- Кнопка для открытия popup -->
<button id="wppopup-open">Подписаться на рассылку</button>

<!-- Popup окно -->
<div id="wppopup" class="wppopup-hidden">
  <div class="wppopup-content">
    <span id="wppopup-close">&times;</span>
    <h2>Подпишитесь на нашу рассылку</h2>
    <form id="wppopup-form">
      <input type="email" name="email" placeholder="Ваш email" required />
      <button type="submit">Подписаться</button>
    </form>
    <div id="wppopup-message"></div>
  </div>
</div>

<style>
#wppopup {position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center;}
.wppopup-hidden {display: none;}
.wppopup-content {background: #fff; padding: 20px; border-radius: 5px; width: 300px; position: relative;}
#wppopup-close {position: absolute; top: 10px; right: 15px; cursor: pointer; font-size: 24px;}
</style>

JavaScript для управления popup и отправки формы

document.getElementById('wppopup-open').addEventListener('click', function() {
  document.getElementById('wppopup').classList.remove('wppopup-hidden');
});

document.getElementById('wppopup-close').addEventListener('click', function() {
  document.getElementById('wppopup').classList.add('wppopup-hidden');
});

// AJAX отправка формы
const form = document.getElementById('wppopup-form');
form.addEventListener('submit', function(e) {
  e.preventDefault();
  const email = form.email.value;
  const message = document.getElementById('wppopup-message');
  message.textContent = '';

  fetch(wppopup_ajax_object.ajax_url, {
    method: 'POST',
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    body: new URLSearchParams({
      action: 'wppopup_subscribe',
      email: email
    })
  })
  .then(response => response.json())
  .then(data => {
    if(data.success) {
      message.style.color = 'green';
      message.textContent = 'Спасибо за подписку!';
      form.reset();
    } else {
      message.style.color = 'red';
      message.textContent = data.data || 'Ошибка при подписке';
    }
  })
  .catch(() => {
    message.style.color = 'red';
    message.textContent = 'Ошибка соединения';
  });
});

PHP обработчик подписки в WordPress

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

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

add_action('wp_ajax_wppopup_subscribe', 'wppopup_handle_subscribe');
add_action('wp_ajax_nopriv_wppopup_subscribe', 'wppopup_handle_subscribe');
function wppopup_handle_subscribe() {
  $email = isset($_POST['email']) ? sanitize_email($_POST['email']) : '';
  if(!is_email($email)) {
    wp_send_json_error('Неверный email');
  }

  // Пример: запись email в опцию или таблицу
  $subscribers = get_option('wppopup_subscribers', []);
  if(in_array($email, $subscribers)) {
    wp_send_json_error('Вы уже подписаны');
  }
  $subscribers[] = $email;
  update_option('wppopup_subscribers', $subscribers);

  // Или можно добавить интеграцию с сервисом рассылки здесь

  wp_send_json_success();
}

Интеграция popup с сервисами рассылки

Чтобы собранные адреса автоматически попадали в ваш почтовый сервис, можно использовать API популярных сервисов. Рассмотрим пример интеграции с MailChimp через их API.

Подключение MailChimp API

Для работы с MailChimp необходимо получить API ключ и ID списка. В PHP коде обработчика добавьте отправку email в MailChimp.

function wppopup_add_to_mailchimp($email) {
  $apiKey = 'ваш_api_ключ';
  $listId = 'ваш_id_списка';
  $dataCenter = substr($apiKey,strpos($apiKey,'-')+1);
  $url = 'https://' . $dataCenter . '.api.mailchimp.com/3.0/lists/' . $listId . '/members/';

  $json = json_encode([
    'email_address' => $email,
    'status' => 'subscribed'
  ]);

  $ch = curl_init($url);
  curl_setopt($ch, CURLOPT_USERPWD, 'user:' . $apiKey);
  curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  curl_setopt($ch, CURLOPT_TIMEOUT, 10);
  curl_setopt($ch, CURLOPT_POST, true);
  curl_setopt($ch, CURLOPT_POSTFIELDS, $json);

  $result = curl_exec($ch);
  $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
  curl_close($ch);

  return $httpCode == 200 || $httpCode == 204;
}

В обработчике подписки вызовите wppopup_add_to_mailchimp($email) и при успешном ответе возвращайте успех AJAX вызова.

Советы по оптимизации popup с подпиской

Чтобы popup не раздражал пользователей и работал эффективно, учитывайте следующие рекомендации:

Показывайте окно не сразу, а через 10-20 секунд или при намерении уйти (exit intent).
Добавляйте возможность легко закрыть popup — крестик и клик вне окна.
Не показывайте popup повторно пользователям, которые уже подписались (используйте cookie или localStorage).
Оптимизируйте дизайн под мобильные устройства — popup должен корректно отображаться и быть удобным.
Тестируйте разные тексты и призывы к действию для повышения конверсии.

Если хотите готовое решение с расширенными функциями, обратите внимание на плагин My Popup от WPSHOP. Он позволяет создавать красивые popup с интеграцией в email-сервисы и гибкой настройкой условий показа.