Использование нескольких кнопок с одним Popup и Contact Form 7 в WordPress

На сайтах WordPress часто используются плагины Popup Maker и Contact Form 7 для создания интерактивных форм и всплывающих окон. Распространённая задача — настроить несколько кнопок на странице (например, для разных услуг), которые открывают одно всплывающее окно с одной формой Contact Form 7, при этом форма должна знать, какая кнопка была нажата, и отправлять эту информацию в письме. Такой подход упрощает пользовательский опыт и уменьшает количество кода, улучшая производительность сайта. В этой статье мы разберём, как настроить несколько кнопок для открытия одного попапа с формой Contact Form 7, передавая данные о нажатой кнопке в письмо.

Почему использовать один попап и форму?

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

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

Предварительные требования

Перед началом убедитесь, что у вас есть:

• Сайт на WordPress с установленными и активированными плагинами Popup Maker и Contact Form 7.
• Страница с кнопками (например, для услуг “Услуга 1”, “Услуга 2”).
• Базовые знания WordPress, HTML и JavaScript.

Пошаговая реализация

Шаг 1: Создание попапа в Popup Maker

1. В админ-панели WordPress перейдите в Popup Maker → Все попапы.
2. Создайте новый попап или отредактируйте существующий.
3. Добавьте уникальный CSS-класс для попапа (например, service-popup) в разделе “Popup Settings” → “Display” → “Popup CSS Classes”.
4. В содержимом попапа вставьте шорткод формы Contact Form 7, например:

[contact-form-7 id="123" title="Форма заказа"]

5. Сохраните попап и запомните его ID (например, 123).

Шаг 2: Настройка формы Contact Form 7

1. Перейдите в Contact Form 7 → Формы и создайте или отредактируйте форму.
2. Добавьте скрытое поле для хранения информации о выбранной услуге:

[hidden service-type]

3. Настройте письмо, чтобы оно включало значение скрытого поля. В разделе “Письмо” добавьте:

Выбранная услуга: [service-type]

4. Пример структуры формы:

<label> Ваше имя
    [text* your-name]
</label>

<label> Ваш email
    [email* your-email]
</label>

[hidden service-type]

[submit "Отправить"]

5. Сохраните форму и запомните её ID.

Шаг 3: Настройка кнопок

На странице с кнопками добавьте каждой кнопке CSS-класс попапа и атрибут data-service для указания услуги. Пример:

<a href="#" class="popmake-service-popup" data-service="Услуга 1">Услуга 1</a>
<a href="#" class="popmake-service-popup" data-service="Услуга 2">Услуга 2</a>
<a href="#" class="popmake-service-popup" data-service="Услуга 3">Услуга 3</a>

– Класс popmake-service-popup связывает кнопки с попапом.
– Атрибут data-service указывает название услуги.

Шаг 4: Добавление JavaScript для передачи данных

Используйте JavaScript, чтобы захватить значение data-service и заполнить им скрытое поле формы. Добавьте следующий код в файл functions.php вашей темы или через плагин для вставки кода (например, Code Snippets):

jQuery(document).ready(function($) {
    $('.popmake-service-popup').on('click', function(e) {
        e.preventDefault();
        var service = $(this).data('service');
        $('#popmake-123 input[name="service-type"]').val(service);
        PUM.open(123); // Замените 123 на ID вашего попапа
    });
});

– Замените 123 на ID вашего попапа.
– Этот скрипт устанавливает значение поля service-type на основе атрибута data-service нажатой кнопки и открывает попап.

Шаг 5: Тестирование

1. Откройте страницу с кнопками.
2. Нажмите на кнопку (например, “Услуга 1”). Должно открыться всплывающее окно с формой.
3. Отправьте форму и проверьте полученное письмо. В нём должно быть указано, например: Выбранная услуга: Услуга 1.
4. Протестируйте другие кнопки, чтобы убедиться, что название услуги передаётся корректно.

Советы по устранению неполадок

Если попап или форма не работают:

• Проверьте ошибки в консоли: Откройте инструменты разработчика в браузере (F12) и проверьте наличие ошибок JavaScript.
• Проверьте ID: Убедитесь, что ID попапа и формы совпадают с указанными в коде.
• Проверьте классы: Убедитесь, что кнопки имеют правильный класс (popmake-service-popup).
• Отладка скрытого поля: Временно уберите [hidden] из поля service-type, чтобы проверить, заполняется ли оно.

Дополнительные улучшения

– Динамический заголовок попапа: Отобразите название услуги в заголовке попапа, добавив:

<h2>Заказ: <span id="service-title"></span></h2>

И обновите JavaScript:

$('#service-title').text(service);

– Условная загрузка: Для оптимизации производительности загружайте скрипты Popup Maker и Contact Form 7 только на нужной странице:

add_action('wp_enqueue_scripts', 'conditional_popup_scripts', 100);
function conditional_popup_scripts() {
    if (!is_page('services')) { // Замените на slug вашей страницы
        wp_dequeue_script('popup-maker-site');
        wp_dequeue_style('popup-maker-site');
        wp_dequeue_script('contact-form-7');
        wp_dequeue_style('contact-form-7');
    }
}

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

if (service) {
    $('#popmake-123 input[name="service-type"]').val(service);
} else {
    $('#popmake-123 input[name="service-type"]').val('Не выбрано');
}

Заключение

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