WPForms динамические поля с расчетом значений в WordPress

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

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

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

К сожалению, в базовом функционале WPForms нет встроенного калькулятора, но с помощью хуков и фильтров можно добавить эту возможность.

Создание базовой формы с полями для расчёта

Для начала создадим форму с несколькими числовыми полями. Например, пусть это будут поля «Количество товаров» и «Цена за единицу». Также добавим поле для вывода итоговой суммы — поле типа Single Line Text, которое мы сделаем только для чтения через JavaScript.

Пример структуры полей:

• Количество товаров — Number field (ID: 1)
• Цена за единицу — Number field (ID: 2)
• Итоговая сумма — Single Line Text (ID: 3, readonly)

Как сделать поле только для чтения

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

document.addEventListener('DOMContentLoaded', function() {
  const totalField = document.querySelector('input#wpforms-3-field_3');
  if(totalField) {
    totalField.readOnly = true;
  }
});

Замените wpforms-3-field_3 на ID вашего поля, который можно узнать в HTML-коде формы.

Программный расчёт итогового значения на клиенте

Для динамического расчёта суммы без перезагрузки страницы используем JavaScript, который будет реагировать на изменение значений в полях «Количество товаров» и «Цена за единицу».

document.addEventListener('DOMContentLoaded', function() {
  const qtyField = document.querySelector('input#wpforms-3-field_1');
  const priceField = document.querySelector('input#wpforms-3-field_2');
  const totalField = document.querySelector('input#wpforms-3-field_3');

  function calculateTotal() {
    const qty = parseFloat(qtyField.value) || 0;
    const price = parseFloat(priceField.value) || 0;
    const total = qty * price;
    totalField.value = total.toFixed(2);
  }

  qtyField.addEventListener('input', calculateTotal);
  priceField.addEventListener('input', calculateTotal);

  // Инициализация при загрузке
  calculateTotal();
});

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

Серверная валидация и проверка расчёта через PHP-хук WPForms

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

add_filter('wpforms_process_before_save', 'wpform_ru_validate_and_recalculate_total', 10, 3);
function wpform_ru_validate_and_recalculate_total($fields, $entry, $form_data) {
    // ID полей из формы
    $qty_field_id = 1;
    $price_field_id = 2;
    $total_field_id = 3;

    $qty = isset($fields[$qty_field_id]['value']) ? floatval($fields[$qty_field_id]['value']) : 0;
    $price = isset($fields[$price_field_id]['value']) ? floatval($fields[$price_field_id]['value']) : 0;
    $calculated_total = $qty * $price;

    $submitted_total = isset($fields[$total_field_id]['value']) ? floatval($fields[$total_field_id]['value']) : 0;

    if(abs($calculated_total - $submitted_total) > 0.01) {
        // Исправляем итоговое значение
        $fields[$total_field_id]['value'] = number_format($calculated_total, 2, '.', '');
    }

    return $fields;
}

Этот хук срабатывает до сохранения данных формы и гарантирует целостность суммы.

Использование плагинов для расширения функционала расчетов в WPForms

Если не хочется писать код, можно рассмотреть сторонние расширения. Например, WPForms Calculator — плагин, который добавляет возможность создавать расчетные поля через интерфейс. Он интегрируется с WPForms и позволяет строить формулы на базе полей формы.

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

Практические советы по работе с расчетными полями в WPForms

1. Всегда проверяйте расчет на сервере

Пользователь может изменить JavaScript или отправить неправильные данные. Серверная проверка обязательна для безопасности и корректности.

2. Используйте кастомные идентификаторы и комментарии к коду

Это облегчает поддержку и расширение решения в будущем.

3. Тестируйте форму на разных устройствах и браузерах

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

4. При необходимости сохраняйте данные расчетов отдельно

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

Заключение

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

Подробности и другие полезные расширения можно найти на wpshop.ru.