В процессе работы с Contact Form 7 часто возникает задача — автоматически менять значение одного поля формы в зависимости от выбора пользователя в другом поле. Классический пример: если пользователь выбирает определённый пункт в выпадающем списке, нужно подставить связанное значение в текстовое поле или скрытый input. Это полезно для сокращения времени заполнения формы и повышения удобства.
Почему стандартных возможностей Contact Form 7 недостаточно для динамического изменения полей
Contact Form 7 по умолчанию не умеет менять значения полей на лету, кроме как через JavaScript. Плагин предоставляет базовые теги и немного хука для валидации и отправки, но динамика — это уже дело фронтенда. Для решения задачи понадобится написать кастомный JS-код, который будет слушать события изменения полей и менять значения других полей.
Также можно использовать готовые плагины, которые расширяют функционал CF7, но часто они либо избыточны, либо не покрывают конкретные кейсы. Поэтому чаще всего приходится писать своё решение вручную.
Ниже мы рассмотрим пример, как сделать автоматическую замену значения поля "text" в зависимости от выбора в "select" с помощью JavaScript и как это интегрировать в Contact Form 7.
Пример задачи: меняем поле "Тема обращения" в зависимости от выбора категории
Допустим, у нас есть форма с полями:
- Категория (select) — варианты: Техническая поддержка, Продажи, Консультация
- Тема обращения (text) — заполняется автоматически в зависимости от выбранной категории
Пример HTML формы Contact Form 7:
[select category "Техническая поддержка" "Продажи" "Консультация"]
[text subject]Наша задача — при выборе категории автоматически подставлять в поле "subject" текст, например:
- Техническая поддержка → "Вопрос по техническому обслуживанию"
- Продажи → "Запрос коммерческого предложения"
- Консультация → "Требуется консультация специалиста"
Реализация через JavaScript
Для начала добавим в шаблон формы атрибуты id для удобства выбора полей в JS:
[select category id:cf7-category "Техническая поддержка" "Продажи" "Консультация"]
[text subject id:cf7-subject]Далее добавим скрипт, который будет слушать изменение поля category и менять subject:
document.addEventListener('DOMContentLoaded', function() {
const category = document.getElementById('cf7-category');
const subject = document.getElementById('cf7-subject');
if (!category || !subject) return;
category.addEventListener('change', function() {
let value = category.value;
let subjectValue = '';
switch(value) {
case 'Техническая поддержка':
subjectValue = 'Вопрос по техническому обслуживанию';
break;
case 'Продажи':
subjectValue = 'Запрос коммерческого предложения';
break;
case 'Консультация':
subjectValue = 'Требуется консультация специалиста';
break;
default:
subjectValue = '';
}
subject.value = subjectValue;
});
});Этот код нужно добавить на страницу с формой. Оптимально через добавление файла JS в тему или через плагин Custom JS, или с помощью wp_enqueue_script. Если форма выводится с помощью шорткода, можно вставить <script> прямо в контент с помощью плагина или в footer.
Расширение функционала: автоматическое заполнение скрытых полей и передача данных
Иногда нужно не просто менять видимое текстовое поле, а подставлять данные в скрытые поля, которые потом отправляются в письме или в базу. Пример:
[select category id:cf7-category "Техническая поддержка" "Продажи" "Консультация"]
[hidden department id:cf7-department]В JS можно добавить обновление скрытого поля:
category.addEventListener('change', function() {
let value = category.value;
let departmentValue = '';
switch(value) {
case 'Техническая поддержка':
departmentValue = 'support';
break;
case 'Продажи':
departmentValue = 'sales';
break;
case 'Консультация':
departmentValue = 'consult';
break;
default:
departmentValue = '';
}
subject.value = subjectValue;
const department = document.getElementById('cf7-department');
if (department) {
department.value = departmentValue;
}
});Теперь при отправке формы в письме можно использовать тег [department] для передачи кода отдела.
Использование хуков Contact Form 7 для серверной валидации и подстраховки
Иногда важно не только менять поля на клиенте, но и подстраховаться на сервере, чтобы избежать подделки данных. Для этого можно использовать хук wpcf7_validate и фильтры для валидации.
Пример PHP-функции, которая проверит корректность значения поля subject в зависимости от category:
add_filter('wpcf7_validate_text*', 'contactform7ru_validate_subject', 20, 2);
function contactform7ru_validate_subject($result, $tag) {
$name = $tag->name;
if ($name == 'subject') {
$submission = WPCF7_Submission::get_instance();
if ($submission) {
$data = $submission->get_posted_data();
$category = isset($data['category']) ? $data['category'] : '';
$subject = isset($data['subject']) ? $data['subject'] : '';
$valid_subjects = [
'Техническая поддержка' => 'Вопрос по техническому обслуживанию',
'Продажи' => 'Запрос коммерческого предложения',
'Консультация' => 'Требуется консультация специалиста'
];
if (!isset($valid_subjects[$category]) || $valid_subjects[$category] !== $subject) {
$result->invalidate($tag, 'Некорректное значение темы обращения для выбранной категории.');
}
}
}
return $result;
}Этот код нужно добавить в functions.php вашей темы или в плагин для кастомных функций. Он гарантирует, что отправленные данные соответствуют логике замены.
Полезные плагины для расширения Contact Form 7
Если хочется не писать код, можно обратить внимание на плагины, которые расширяют возможности Contact Form 7:
- Contact Form 7 – Dynamic Text Extension — позволяет создавать динамические поля с подстановкой значений из URL, куки, пользователя и т.д.
- WPGPT — плагин с ИИ-интеграцией для генерации контента, может помочь в создании более сложных форм и подсказок для пользователей.
Однако для конкретной задачи автоматической замены значений в форме проще и эффективнее использовать кастомные скрипты, как показано выше.
Итоги и рекомендации по внедрению
Автоматическая замена значений полей в Contact Form 7 — частая и полезная задача. Лучший подход — это использовать JavaScript для динамического обновления полей на клиенте и дополнительно подключить серверную валидацию через фильтры CF7, чтобы исключить подделки.
При написании JS-кода следите за уникальностью id полей и корректным подключением скриптов, чтобы избежать конфликтов. Если у вас сложная логика, разбивайте код на функции и документируйте изменения.
Так вы сделаете формы удобнее для пользователей и надежнее для обработки данных.