WPForms: создание динамических расчетных полей в формах WordPress

В этом материале подробно разберем, как в плагине WPForms для WordPress организовать динамические расчетные поля. Это нужно, когда, например, в форме есть несколько полей с числами, а итоговое значение нужно вычислить автоматически и отобразить пользователю без перезагрузки страницы. Такой функционал востребован для калькуляторов, форм заказа с подсчетом стоимости и других интерактивных сценариев.

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

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

Автоматически рассчитывать сумму, стоимость или другие показатели на основе введенных данных.
Улучшить UX — пользователи сразу видят итог без отправки формы.
Снизить ошибки при ручном вводе итогов.

Для реализации понадобится базовое знание JavaScript и понимание структуры WPForms.

Как добавить расчетное поле в WPForms: базовый пример

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

1. Создание полей в форме

В админке WordPress создайте новую форму WPForms и добавьте два поля типа "Число" (например, field_1 и field_2). Добавьте еще одно поле "HTML" — туда выведем результат.

2. JavaScript для динамического подсчета

Добавим скрипт, который слушает изменения в числовых полях и обновляет результат. Вставьте следующий код в файл темы functions.php или в отдельный JS-файл, подключенный на странице с формой:

function wpformsdynamic_enqueue_scripts() {
    if (!is_page('contact')) return; // Замените 'contact' на slug вашей страницы с формой
    wp_enqueue_script('wpforms-calc', get_stylesheet_directory_uri() . '/js/wpforms-calc.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'wpformsdynamic_enqueue_scripts');

В файле wpforms-calc.js разместите:

jQuery(document).ready(function($) {
    function wpformsdynamic_calc() {
        var val1 = parseFloat($('#wpforms-123-field_1').val()) || 0;
        var val2 = parseFloat($('#wpforms-123-field_2').val()) || 0;
        var sum = val1 + val2;
        $('#wpforms-123-html_3').html('Сумма: ' + sum.toFixed(2));
    }
    $('#wpforms-123-field_1, #wpforms-123-field_2').on('input', wpformsdynamic_calc);
    wpformsdynamic_calc();
});

Обратите внимание, что 123 — это ID вашей формы, а field_1, field_2, html_3 — ID полей. Их можно посмотреть в разметке страницы через инспектор браузера.

Расширение: расчет стоимости с учетом скидок и условий

Рассмотрим более сложный пример, когда расчет зависит от выбранного варианта и количества.

1. Добавляем поля выбора и количества

В форме добавьте поле "Выбор" с вариантами товара, каждое со своей ценой, и поле "Число" для количества.

2. Подключаем JavaScript с логикой

jQuery(document).ready(function($) {
    var prices = {
        'option1': 100,
        'option2': 150,
        'option3': 200
    };
    function wpformsdynamic_calc_price() {
        var option = $('#wpforms-123-field_option').val();
        var qty = parseInt($('#wpforms-123-field_qty').val()) || 0;
        var price = prices[option] || 0;
        var total = price * qty;
        $('#wpforms-123-html_total').html('Итого: ' + total + ' руб.');
    }
    $('#wpforms-123-field_option, #wpforms-123-field_qty').on('change input', wpformsdynamic_calc_price);
    wpformsdynamic_calc_price();
});

Такой подход позволяет создавать калькуляторы с динамическими ценами и количеством.

Обработка расчетных данных на сервере: безопасность и валидация

Важно помнить, что данные, вычисленные на клиенте, нельзя доверять на 100%. Нужно дублировать расчет на сервере при получении формы, чтобы избежать подделок.

Для этого используйте хук wpforms_process_complete или wpforms_process_before_save для проверки и перерасчета суммы.

function wpformsdynamic_validate_data($fields, $entry, $form_data) {
    $val1 = isset($fields[1]['value']) ? floatval($fields[1]['value']) : 0;
    $val2 = isset($fields[2]['value']) ? floatval($fields[2]['value']) : 0;
    $expected_sum = $val1 + $val2;
    $submitted_sum = isset($fields[3]['value']) ? floatval($fields[3]['value']) : 0;
    if (abs($expected_sum - $submitted_sum) > 0.01) {
        wpforms()->process->errors[$form_data['id']][3] = 'Некорректная сумма, попробуйте еще раз';
    }
}
add_action('wpforms_process_validate', 'wpformsdynamic_validate_data', 10, 3);

Замените индексы полей и логику под свою форму.

Плагины для расширения функционала расчетов в WPForms

Если не хочется писать код, можно использовать сторонние расширения:

WPForms Calculator — плагин для создания форм с расчетами без программирования.
Clearfy Pro — оптимизация и расширение WPForms, в том числе улучшенная работа с AJAX и вычислениями.

Они позволяют быстро добавить калькулятор и убедиться в корректной работе.

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

Для стабильной работы динамических расчетов учитывайте:

Правильно определяйте ID форм и полей — меняются при редактировании.
Используйте консоль браузера для отладки JS-ошибок.
Обрабатывайте граничные случаи и пустые значения.
Дублируйте расчеты на сервере для безопасности.
Оптимизируйте скрипты, чтобы не нагружать страницу.

Так вы получите надежный и удобный инструмент для пользователей.

Итог

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