Как добавить поля калькулятора в WPForms с применением кода

WPForms — один из самых популярных плагинов для создания форм в WordPress. Однако по умолчанию функционал калькулятора в нем ограничен, и для реализации сложных расчетов часто требуется добавлять кастомный код. В этой статье мы разберем, как добавить поля калькулятора в WPForms с помощью PHP и JavaScript, чтобы расширить возможности ваших форм и сделать их по-настоящему интерактивными.

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

Функционал калькулятора полезен для создания форм, где нужно автоматически считать итоговые суммы, стоимость услуг, количество товаров и другие параметры. Это удобно для:

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

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

Создание полей калькулятора в WPForms: базовый подход

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

1. Создайте форму с тремя полями:

• Числовое поле «Число 1»;
• Числовое поле «Число 2»;
• Поле «Итог» (можно использовать поле «Текст» с атрибутом readonly).

2. Чтобы автоматически считать сумму при вводе, добавим JS-код. В functions.php вашей темы или в отдельном плагине добавьте следующий код:

function wpform_ru_enqueue_calculator_script() {
    if (is_page() || is_singular()) {
        wp_enqueue_script('wpform-ru-calculator', get_stylesheet_directory_uri() . '/js/wpform-ru-calculator.js', array('jquery'), '1.0', true);
    }
}
add_action('wp_enqueue_scripts', 'wpform_ru_enqueue_calculator_script');

3. Создайте файл wpform-ru-calculator.js в папке js вашей темы и добавьте туда:

jQuery(document).ready(function($) {
    // Замените #wpforms-123-field_1 и #wpforms-123-field_2 на реальные ID полей
    $('#wpforms-123-field_1, #wpforms-123-field_2').on('input', function() {
        var val1 = parseFloat($('#wpforms-123-field_1').val()) || 0;
        var val2 = parseFloat($('#wpforms-123-field_2').val()) || 0;
        var sum = val1 + val2;
        $('#wpforms-123-field_3').val(sum.toFixed(2));
    });
});

Обратите внимание, что ID полей можно узнать в HTML-коде формы. Обычно они имеют вид wpforms-{id формы}-field_{id поля}.

Расширение функционала: использование хука для серверных вычислений

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

Пример функции, которая суммирует два поля и записывает результат в метаполе формы:

function wpform_ru_process_calculator_fields($fields, $entry, $form_data) {
    $val1 = isset($fields[1]) ? floatval($fields[1]['value']) : 0;
    $val2 = isset($fields[2]) ? floatval($fields[2]['value']) : 0;
    $sum = $val1 + $val2;
    // Добавим итог в метаполе под ключом 'calc_result'
    update_post_meta($entry['id'], 'calc_result', $sum);
}
add_action('wpforms_process', 'wpform_ru_process_calculator_fields', 10, 3);

Здесь предполагается, что поля с ID 1 и 2 — числовые, а результат сохраняется для дальнейшей обработки.

Пример сложного калькулятора с условиями

Допустим, у вас форма для расчета стоимости услуг с выбором опций и количеством. Можно сделать так:

• Поле выбора типа услуги (с ценами);
• Поле ввода количества;
• Итоговое поле с подсчетом стоимости.

JS-скрипт будет примерно таким:

jQuery(document).ready(function($) {
    var prices = {
        'service1': 100,
        'service2': 200,
        'service3': 300
    };
    function calculateTotal() {
        var service = $('#wpforms-123-field_1').val();
        var quantity = parseInt($('#wpforms-123-field_2').val()) || 0;
        var price = prices[service] || 0;
        var total = price * quantity;
        $('#wpforms-123-field_3').val(total.toFixed(2));
    }
    $('#wpforms-123-field_1, #wpforms-123-field_2').on('change input', calculateTotal);
    calculateTotal();
});

Это позволит динамически менять итоговую стоимость в зависимости от выбора пользователя.

Плагины для расширения возможностей калькулятора в WPForms

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

• Clearfy Pro — оптимизация и расширение WPForms, включая кастомные поля;
• WPForms Addons — набор дополнений с новыми типами полей;
• Использование платной версии WPForms, где доступен функционал расчётов.

Советы по отладке и производительности

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

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

Также можно логировать результаты в базе данных для последующего анализа с помощью хуков WPForms.

Заключение

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

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