Contact Form 7: как добавить поле для загрузки файлов в форму WordPress

Contact Form 7 — один из самых популярных плагинов для создания форм обратной связи на WordPress. В этой статье подробно рассмотрим, как добавить поле для загрузки файлов (file upload) в форму Contact Form 7, настроить его, а также обеспечить безопасность и корректную работу загруженных файлов.

Почему важно правильно настроить поле загрузки файлов в Contact Form 7

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

В Contact Form 7 стандартный тег для загрузки файлов — file. Но его нужно корректно настроить и дополнить правилами валидации и обработкой на сервере.

Как добавить поле загрузки файла в форму Contact Form 7

Чтобы добавить поле загрузки, в редакторе формы используйте следующий тег:

[file your-file limit:2mb filetypes:jpg|png|pdf]

Здесь:

• your-file — имя поля;
• limit:2mb — ограничение размера файла (в данном случае 2 мегабайта);
• filetypes:jpg|png|pdf — разрешённые расширения файлов.

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

Пример полной формы с полем загрузки

[text* your-name placeholder "Ваше имя"]
[email* your-email placeholder "Ваш email"]
[file your-file limit:2mb filetypes:jpg|png|pdf]
[submit "Отправить"]

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

Файл: [your-file]

Обработка и безопасность при загрузке файлов

Contact Form 7 автоматически сохраняет загруженный файл во временную папку и прикрепляет к письму. Однако важно контролировать следующие моменты:

• Ограничение форматов файлов. Указывайте только безопасные и необходимые расширения через параметр filetypes.
• Размер загружаемых файлов. Ограничивайте размер через параметр limit и настройки PHP (upload_max_filesize, post_max_size).
• Проверка на вирусы. Для максимальной безопасности рекомендуем использовать серверные антивирусные сканеры, например, интеграцию с ClamAV.
• Удаление временных файлов. Contact Form 7 автоматически удаляет загруженные файлы после отправки письма, что снижает риск утечки.

Кастомная валидация поля загрузки в Contact Form 7

Стандартные параметры могут не всегда покрыть все требования. Например, если нужно проверять не только расширение, но и MIME-тип или содержимое файла, можно добавить кастомную валидацию с хуками Contact Form 7.

Пример функции, которая проверяет, что загруженный файл — изображение и не превышает 1 Мб:

add_filter('wpcf7_validate_file*', 'contactform7ru_custom_file_validation', 20, 2);
function contactform7ru_custom_file_validation($result, $tag) {
    $name = $tag->name;
    $file = isset($_FILES[$name]) ? $_FILES[$name] : null;

    if ($file && $file['error'] === UPLOAD_ERR_OK) {
        $max_size = 1024 * 1024; // 1MB
        $allowed_types = ['image/jpeg', 'image/png', 'image/gif'];

        if ($file['size'] > $max_size) {
            $result->invalidate($tag, 'Файл слишком большой. Максимум 1 Мб.');
        }

        $finfo = finfo_open(FILEINFO_MIME_TYPE);
        $mime_type = finfo_file($finfo, $file['tmp_name']);
        finfo_close($finfo);

        if (!in_array($mime_type, $allowed_types)) {
            $result->invalidate($tag, 'Недопустимый тип файла. Разрешены только изображения.');
        }
    }

    return $result;
}

Эту функцию нужно добавить в файл functions.php вашей темы или в отдельный плагин.

Использование JavaScript для улучшения UX при загрузке файлов

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

Пример простого скрипта, который показывает имя выбранного файла рядом с полем:

document.addEventListener('DOMContentLoaded', function() {
  const fileInput = document.querySelector('input[type=file][name=your-file]');
  if (!fileInput) return;

  const label = document.createElement('span');
  fileInput.parentNode.insertBefore(label, fileInput.nextSibling);

  fileInput.addEventListener('change', function() {
    const fileName = fileInput.files.length ? fileInput.files[0].name : 'Файл не выбран';
    label.textContent = fileName;
  });
});

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

Альтернативные плагины для расширения возможностей загрузки файлов в WordPress

Если вам нужно более мощное управление загрузками, рассмотрите следующие плагины, которые интегрируются с Contact Form 7 или работают самостоятельно:

• Flamingo — сохраняет отправленные данные и файлы в базу данных WordPress.
• File Upload Types — расширяет список разрешённых типов файлов.
• WPForms — более продвинутый конструктор форм с расширенными полями загрузки файлов.

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