Как сделать всплывающее окно по клику на кнопку в WordPress

Автор: Михаил Карпов | Опубликовано: 07.10.2026

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

На практике это удобно для заявок, подписки, записи на консультацию, показа условий акции, короткого уведомления или открытия формы заказа. В WordPress это можно сделать несколькими способами: через плагин попапов, через форму с модальным окном в конструкторе, либо вручную через HTML, CSS и немного JavaScript. Выбор зависит от того, нужен ли вам быстрый запуск без кода или точная интеграция с темой и формой.

Когда попап по клику действительно уместен

Клик-триггер хорош там, где пользователь сначала читает страницу, а потом сам выбирает, что открыть. Это особенно полезно, если предложение связано с конкретным действием на странице: «получить прайс», «оставить заявку», «узнать условия», «посмотреть размер скидки», «задать вопрос».

Такой формат обычно лучше подходит, чем всплывающее окно по таймеру, когда:

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

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

Самый простой способ: плагин попапов с открытием по кнопке

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

Например, My Popup от WPShop подходит для сценариев, где нужен именно попап как отдельный элемент: форма заявки, короткое предложение, промо-окно или сообщение с кнопкой действия. Такой подход удобен, если вы не хотите собирать модальное окно вручную и вам важны базовые настройки показа, внешнего вида и триггера.

Типовой порядок действий выглядит так:

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

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

Как сделать открытие по клику через HTML и JavaScript

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

Суть простая: на странице есть кнопка, а рядом — скрытый блок с окном. По клику вы показываете этот блок через JavaScript. Ниже пример минимальной реализации без сторонних библиотек.

Сначала добавьте разметку в шаблон страницы или в HTML-блок, если ваша тема и редактор это позволяют:

<button type="button" class="popup-open">Открыть форму</button>

Само окно можно оформить так:

<div class="popup-overlay" id="lead-popup" aria-hidden="true">
  <div class="popup-window" role="dialog" aria-modal="true" aria-labelledby="lead-popup-title">
    <button type="button" class="popup-close" aria-label="Закрыть окно">×</button>
    <h2 id="lead-popup-title">Оставьте заявку</h2>
    <p>Мы свяжемся с вами в рабочее время.</p>
    <form>
      <!-- ваша форма -->
    </form>
  </div>
</div>

Затем добавьте стили, чтобы окно было скрыто по умолчанию и появлялось поверх страницы:

.popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  padding: 20px;
}

.popup-overlay.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-window {
  position: relative;
  background: #fff;
  max-width: 520px;
  width: 100%;
  border-radius: 12px;
  padding: 24px;
}

.popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
}

И подключите простой скрипт:

document.addEventListener('DOMContentLoaded', function () {
  const openButton = document.querySelector('.popup-open');
  const popup = document.getElementById('lead-popup');
  const closeButton = popup ? popup.querySelector('.popup-close') : null;

  function openPopup() {
    popup.classList.add('is-open');
    popup.setAttribute('aria-hidden', 'false');
  }

  function closePopup() {
    popup.classList.remove('is-open');
    popup.setAttribute('aria-hidden', 'true');
  }

  if (openButton && popup) {
    openButton.addEventListener('click', openPopup);
  }

  if (closeButton) {
    closeButton.addEventListener('click', closePopup);
  }

  if (popup) {
    popup.addEventListener('click', function (event) {
      if (event.target === popup) {
        closePopup();
      }
    });
  }
});

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

Как привязать кнопку к нужному действию пользователя

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

Хорошие формулировки зависят от цели:

для заявки — «Оставить заявку», «Получить консультацию»;
для подписки — «Подписаться на рассылку», «Получать новости»;
для акции — «Посмотреть условия акции», «Узнать скидку»;
для контакта — «Задать вопрос», «Связаться с менеджером»;
для прайса — «Запросить прайс», «Получить стоимость».

Если кнопка стоит в карточке товара, в блоке с услугой или в конце статьи, попап должен продолжать этот контекст. Не стоит вешать один и тот же общий текст на все кнопки сайта. Для посетителя это выглядит как одинаковая ловушка, а не как полезный сценарий.

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

Что учесть на мобильных устройствах

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

Для мобильной версии обычно стоит проверить несколько вещей:

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

Если окно содержит только короткое сообщение или один CTA, мобильный сценарий обычно работает лучше, чем длинная форма. Для сложных форм на смартфоне иногда разумнее открыть не полноценный попап, а компактный блок с коротким предложением и кнопкой перехода на отдельную страницу.

Как не испортить UX и не потерять конверсию

Главная ошибка с попапами — показывать их слишком агрессивно. Для сценария по клику это особенно обидно: вы уже получили добровольное действие пользователя, но можете испортить впечатление неудобным окном.

Следите за несколькими вещами:

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

Частота показа зависит от задачи. Для заявки на консультацию логично дать окно по клику каждый раз, когда человек нажимает на соответствующую кнопку. Для промоакции или одноразового предложения лучше ограничить повторный показ, чтобы не раздражать посетителя. Если плагин умеет хранить состояние показа, используйте это осознанно: не всем посетителям нужен одинаковый сценарий.

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

Как проверить, что всё работает правильно

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

Минимальная проверка выглядит так:

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

Если используете плагин, проверьте ещё совместимость с кэшем и минификацией скриптов. Иногда попап визуально работает, но кнопка не открывает окно после оптимизации JS. В таком случае нужно исключить скрипт плагина из объединения или отложенной загрузки, если это поддерживает ваш инструмент оптимизации.

Какой способ выбрать для WordPress-сайта

Сценарий	Что выбрать	Когда подходит
Быстро запустить форму или акцию без кода	Плагин попапов	Если нужен понятный интерфейс и настройка из админки
Нужен полный контроль над версткой и поведением	HTML, CSS и JavaScript	Если есть разработчик или кастомная тема
Окно должно открываться из кнопки в статье, карточке товара или лендинге	Клик-триггер в плагине или вручную	Если важно не мешать просмотру страницы

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

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