Contact Form 7 — один из самых популярных плагинов для создания форм обратной связи на WordPress. Однако стандартный набор полей не всегда покрывает все потребности бизнеса, особенно когда нужна динамическая калькуляция в форме, например, подсчет стоимости услуг или товаров. В этой статье мы подробно разберем, как добавить в Contact Form 7 уникальные поля с функцией калькулятора без привлечения сложных внешних плагинов.
Почему стандартный Contact Form 7 не подходит для калькуляций
Contact Form 7 поставляется с базовым набором полей: текст, email, checkbox, radio, select и несколько других. Но нет встроенных возможностей для динамических вычислений или изменения значений в зависимости от выбора пользователя. Это осложняет создание форм с расчетом стоимости заказа, скидок или других параметров.
Для решения этой задачи можно использовать дополнительные плагины, но они часто тяжеловесны или сложны в настройке. Мы же рассмотрим, как сделать кастомное решение с помощью JavaScript и расширенных возможностей Contact Form 7.
Основы добавления уникальных полей в Contact Form 7
Contact Form 7 позволяет создавать свои поля с помощью шорткодов. Например, чтобы добавить текстовое поле, используется [text your-field]. Для калькулятора нам понадобятся числовые поля и поле для вывода результата.
Пример базовой формы с двумя числовыми полями и полем для результата:
[number number-1 min:0 step:1]
[number number-2 min:0 step:1]
[text total readonly]Здесь мы используем атрибут readonly для поля total, чтобы пользователь не мог изменить итоговое значение вручную.
Добавление кастомного JavaScript для расчета
Чтобы значения автоматически пересчитывались при изменении чисел, добавим JavaScript. В WordPress это лучше делать через подключение скрипта или вставку кода в footer. Но для простоты можно вставить скрипт прямо в страницу с формой через HTML-блок или в шаблон.
Пример простого кода, который суммирует два числа и выводит результат:
document.addEventListener('DOMContentLoaded', function() {
const number1 = document.querySelector('input[name="number-1"]');
const number2 = document.querySelector('input[name="number-2"]');
const total = document.querySelector('input[name="total"]');
function contactform7Calculate() {
const val1 = parseFloat(number1.value) || 0;
const val2 = parseFloat(number2.value) || 0;
total.value = val1 + val2;
}
number1.addEventListener('input', contactform7Calculate);
number2.addEventListener('input', contactform7Calculate);
contactform7Calculate(); // инициализация
});Этот скрипт отслеживает изменения в двух полях и обновляет поле total, автоматически суммируя значения.
Расширение калькулятора: умножение и скидки
Чтобы сделать калькулятор более функциональным, можно добавить поле для выбора скидки и изменить формулу:
[number number-1 min:0 step:1]
[number number-2 min:0 step:1]
[select discount "0" "5" "10" "15"]
[text total readonly]Изменим скрипт, чтобы учитывать скидку в процентах:
document.addEventListener('DOMContentLoaded', function() {
const number1 = document.querySelector('input[name="number-1"]');
const number2 = document.querySelector('input[name="number-2"]');
const discount = document.querySelector('select[name="discount"]');
const total = document.querySelector('input[name="total"]');
function contactform7Calculate() {
const val1 = parseFloat(number1.value) || 0;
const val2 = parseFloat(number2.value) || 0;
const disc = parseFloat(discount.value) || 0;
let sum = val1 + val2;
let discounted = sum - (sum * disc / 100);
total.value = discounted.toFixed(2);
}
number1.addEventListener('input', contactform7Calculate);
number2.addEventListener('input', contactform7Calculate);
discount.addEventListener('change', contactform7Calculate);
contactform7Calculate();
});Использование плагинов для расширения возможностей Contact Form 7
Если вы не хотите писать код вручную, можно использовать специализированные плагины, которые добавляют функциональность калькулятора в Contact Form 7. Рассмотрим два популярных:
- Contact Form 7 Calculator — плагин, который позволяет создавать формулы прямо в настройках формы. Удобен для простых расчетов без программирования.
- Calculated Fields Form — плагин с собственным визуальным конструктором форм с вычислениями, который можно интегрировать с Contact Form 7 через хуки и фильтры.
Оба решения имеют свои плюсы и минусы, но при небольших задачах проще использовать встроенный JavaScript, как описано выше.
Обработка результатов калькулятора в письме Contact Form 7
Важно не только показать расчет пользователю, но и передать итог в письме, которое приходит на почту администратора. Для этого в настройках формы добавьте поле [total] в шаблон письма.
Пример шаблона письма:
Стоимость заказа: [total]Если поле total заполнено корректно, вы увидите итоговую сумму в получаемом письме.
Советы по безопасности и производительности
Поскольку мы используем JavaScript на стороне клиента, важно помнить, что пользователь может изменить значения вручную через консоль браузера. Поэтому проверяйте все данные на сервере, если от них зависит стоимость заказа или платежи.
Для серверной проверки можно использовать фильтр Contact Form 7 wpcf7_validate и собственную функцию, например contactform7_validate_total, которая проверит правильность вычислений.
add_filter('wpcf7_validate_text*', 'contactform7_validate_total', 20, 2);
function contactform7_validate_total($result, $tag) {
$name = $tag->name;
if ($name == 'total') {
$submitted = isset($_POST[$name]) ? floatval($_POST[$name]) : 0;
// здесь логика проверки суммы
// например, пересчитать сумму из других полей и сравнить
$number1 = isset($_POST['number-1']) ? floatval($_POST['number-1']) : 0;
$number2 = isset($_POST['number-2']) ? floatval($_POST['number-2']) : 0;
$discount = isset($_POST['discount']) ? floatval($_POST['discount']) : 0;
$expected = ($number1 + $number2) * (1 - $discount / 100);
if (abs($submitted - $expected) > 0.01) {
$result->invalidate($tag, 'Некорректная сумма');
}
}
return $result;
}Этот код поможет защититься от подделок данных и обеспечить корректность итоговой суммы.
Заключение
Добавление уникальных полей с калькулятором в Contact Form 7 — задача вполне решаемая даже без сложных плагинов. Используя стандартные поля, простой JavaScript и серверную валидацию, вы получите надежную и гибкую форму для подсчета стоимости прямо на сайте.
Такой подход отлично подходит для сайтов с заказами, бронированиями и другими сценариями, где важна динамическая калькуляция пользовательских данных.