Contact Form 7: автоматическая замена значения поля формы по условию

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

В стандартном функционале Contact Form 7 нет возможности менять содержимое поля формы на лету в зависимости от выбора пользователя или других условий. Например, требуется автоматически подставлять стоимость услуги в скрытое поле в зависимости от выбранной опции или менять текст в поле «Комментарий» при выборе определённого чекбокса.

Диагностика проблемы

Если попытаться изменить значение полей формы с помощью стандартных настроек CF7, это не сработает, так как форма рендерится сервером, а пользовательский ввод не обновляет значения уже отрендеренных полей. JavaScript, встроенный в контактную форму, не меняет значения полей, которые идут в отправку, без дополнительного кода.

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

Пошаговое решение: замена значения поля с помощью JavaScript и фильтра Contact Form 7

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

В форме CF7 добавьте нужные поля с атрибутами id или class для удобной селекции из JS. Например:

[select service "Услуга 1" "Услуга 2" id:service-select]
[hidden price id:price-field default:""]
[text comment id:comment-field]

2. Добавление JavaScript для отслеживания выбора и замены значения

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

document.addEventListener('DOMContentLoaded', function() {
  const serviceSelect = document.getElementById('service-select');
  const priceField = document.getElementById('price-field');
  const commentField = document.getElementById('comment-field');

  serviceSelect.addEventListener('change', function() {
    let price = '';
    let comment = '';
    switch (serviceSelect.value) {
      case 'Услуга 1':
        price = '1000';
        comment = 'Вы выбрали Услугу 1';
        break;
      case 'Услуга 2':
        price = '2000';
        comment = 'Вы выбрали Услугу 2';
        break;
      default:
        price = '';
        comment = '';
    }
    priceField.value = price;
    commentField.value = comment;
  });
});

3. Использование фильтра wpcf7_posted_data для дополнительной серверной проверки

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

add_filter('wpcf7_posted_data', function ($posted_data) {
  if (!empty($posted_data['service'])) {
    switch ($posted_data['service']) {
      case 'Услуга 1':
        $posted_data['price'] = '1000';
        $posted_data['comment'] = 'Вы выбрали Услугу 1';
        break;
      case 'Услуга 2':
        $posted_data['price'] = '2000';
        $posted_data['comment'] = 'Вы выбрали Услугу 2';
        break;
    }
  }
  return $posted_data;
});

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

• Откройте страницу с формой и выберите разные услуги в селекте.
• Проверьте, что скрытое поле price меняет значение динамически без перезагрузки.
• Проверьте, что поле comment обновляется текстом, соответствующим выбранной услуге.
• Отправьте форму и убедитесь, что в письме и в данных отправки корректно передаются обновлённые значения.

Частые ошибки и как их исправить

• Значения не меняются на фронте: Проверьте, что JS корректно подключен и срабатывает. Используйте инструменты разработчика в браузере для отладки.
• Поля не передаются в письме: Убедитесь, что в настройках письма CF7 используются правильные теги, например [price] и [comment].
• Данные не обновляются на сервере: Добавьте фильтр wpcf7_posted_data для гарантированной корректировки данных на сервере.
• Кэширование мешает обновлению: Очистите кэш сайта и браузера, отключите кэширование форм, если оно активно.

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

• Не доверяйте только JS для важных данных — всегда проверяйте и корректируйте данные на сервере через фильтры CF7.
• Минимизируйте объем кода JS, чтобы не замедлять загрузку страницы.
• Используйте id и class для селекторов в JS, чтобы избежать конфликта с другими скриптами.
• Если форма большая и сложная, рассмотрите разделение логики на отдельные модули JS для удобства поддержки.

Сравнение вариантов реализации динамических значений в Contact Form 7