Contact Form 7: создание динамических калькуляторов с помощью JavaScript

Contact Form 7 – один из самых популярных плагинов для создания форм в WordPress. Часто возникает задача сделать форму не просто для сбора данных, а с возможностью динамического расчёта стоимости или других параметров прямо на стороне клиента. В этой статье рассмотрим, как добавить в Contact Form 7 функционал калькулятора с динамическим обновлением значений с помощью JavaScript.

Почему стоит использовать динамические калькуляторы в Contact Form 7

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

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

Создаем форму с полями для калькулятора в Contact Form 7

Для начала создадим простую форму в CF7 с несколькими полями, которые будут участвовать в расчетах. Например, калькулятор стоимости печати:

• Количество копий (числовое поле)
• Тип бумаги (выпадающий список с разной стоимостью)
• Дополнительные услуги (флажки)
• Итоговая сумма (поле только для вывода результата)

Пример формы (код для Contact Form 7):

[number quantity id:cf7calc-quantity min:1 value:1]
[select paper id:cf7calc-paper "Обычная|1" "Матовая|1.5" "Глянцевая|2"]
[checkbox extras use_label_element "Ламинация (+50)" "Двойная печать (+100)"]
<p>Итого: <span id="cf7calc-total">0</span> руб.</p>
[submit "Отправить"]

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

Добавляем JavaScript для динамического расчета

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

document.addEventListener('DOMContentLoaded', function() {
    const quantityField = document.getElementById('cf7calc-quantity');
    const paperField = document.getElementById('cf7calc-paper');
    const extrasFields = document.querySelectorAll('input[name="extras[]"]');
    const totalDisplay = document.getElementById('cf7calc-total');

    function contactform7ruCalculate() {
        let quantity = parseInt(quantityField.value) || 0;
        let paperPrice = parseFloat(paperField.options[paperField.selectedIndex].value) || 0;
        let extrasPrice = 0;

        extrasFields.forEach(function(checkbox) {
            if (checkbox.checked) {
                if (checkbox.value === 'Ламинация (+50)') extrasPrice += 50;
                if (checkbox.value === 'Двойная печать (+100)') extrasPrice += 100;
            }
        });

        let total = quantity * paperPrice * 100 + extrasPrice; // умножаем на 100, чтобы получить сумму в рублях
        totalDisplay.textContent = total.toFixed(0);
    }

    quantityField.addEventListener('input', contactform7ruCalculate);
    paperField.addEventListener('change', contactform7ruCalculate);
    extrasFields.forEach(function(checkbox) {
        checkbox.addEventListener('change', contactform7ruCalculate);
    });

    contactform7ruCalculate(); // начальный расчет
});

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

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

Чтобы итоговая сумма попала в письмо, отправляемое через Contact Form 7, нужно добавить скрытое поле, которое будет обновляться из JavaScript. В форму добавьте:

[hidden total id:cf7calc-total-hidden]

И в скрипте обновляйте это поле при каждом расчёте:

document.getElementById('cf7calc-total-hidden').value = total.toFixed(0);

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

Расширение функционала: подключение к сторонним сервисам и плагины

Если вам нужно более сложное решение, можно использовать плагины для Contact Form 7 с поддержкой калькуляторов, например, Clearfy Pro, который расширяет возможности CF7, включая продвинутую валидацию и интеграции.

Также можно отправлять данные в CRM или Google Sheets с помощью webhook или через REST API, как показано в других наших статьях. Комбинирование динамических калькуляторов и автоматической обработки данных открывает широкие возможности для онлайн-бизнеса.

Советы по отладке и оптимизации

Для корректной работы калькулятора:

• Убедитесь, что у вас правильно подключен JavaScript и нет конфликтов с другими скриптами.
• Проверяйте, что все идентификаторы полей совпадают и используются именно те, что в форме.
• Тестируйте работу на мобильных устройствах и разных браузерах.
• Для сложных вычислений можно использовать JSON для хранения цен и параметров, чтобы легко добавлять новые опции.

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