Зачем добавлять поле изображения в Gravity Forms
Gravity Forms — мощный конструктор форм для WordPress, но стандартный набор полей не всегда покрывает все задачи. Например, иногда нужно дать пользователю возможность не просто загрузить файл, а именно изображение, и сразу видеть его предпросмотр. Это важно для заявок с фото, портфолио, отзывов с изображениями и т.д.
В этой статье мы рассмотрим, как добавить в форму Gravity Forms поле для загрузки изображения с автоматической валидацией формата и отображением превью. Кроме того, покажем, как обработать полученный файл с помощью собственных функций WordPress.
Создание кастомного поля изображения для Gravity Forms
Gravity Forms позволяет создавать собственные поля через API и фильтры. Самый простой способ — использовать поле типа "File Upload" и добавить к нему дополнительные проверки и визуализацию.
Для начала добавим в вашу тему или плагин следующий код, который расширит поле загрузки файла, чтобы принимать только изображения и выводить предпросмотр после выбора файла.
add_filter('gform_field_validation', 'wphow_gform_field_validation_image', 10, 4); function wphow_gform_field_validation_image($result, $value, $form, $field) { if ($field->type == 'fileupload' && $field->id == 5) { // замените 5 на ID вашего поля if ($_FILES['input_' . $field->id]['name']) { $filetype = wp_check_filetype($_FILES['input_' . $field->id]['name']); $allowed = array('jpg', 'jpeg', 'png', 'gif'); if (!in_array(strtolower($filetype['ext']), $allowed)) { $result['is_valid'] = false; $result['message'] = 'Пожалуйста, загрузите изображение в формате JPG, PNG или GIF.'; } } } return $result; }Этот фильтр проверяет, что загружаемый файл — именно изображение в допустимых форматах, и выводит ошибку, если это не так.
Добавление предпросмотра загруженного изображения
Чтобы пользователь видел, что он загружает, можно добавить JavaScript для отображения превью выбранного файла прямо в форме. Добавьте следующий скрипт в футер сайта или в отдельный JS-файл, подключенный на странице с формой:
document.addEventListener('DOMContentLoaded', function() { const fileInput = document.querySelector('input#gform_1 input[type=file]'); // замените gform_1 на ID вашей формы if (!fileInput) return; fileInput.addEventListener('change', function(event) { const file = event.target.files[0]; if (file && file.type.startsWith('image/')) { const reader = new FileReader(); reader.onload = function(e) { let preview = document.getElementById('wphow-image-preview'); if (!preview) { preview = document.createElement('img'); preview.id = 'wphow-image-preview'; event.target.parentNode.appendChild(preview); preview.style.maxWidth = '200px'; preview.style.marginTop = '10px'; } preview.src = e.target.result; }; reader.readAsDataURL(file); } }); });Этот код прослушивает поле загрузки и показывает выбранное изображение прямо под полем, что значительно улучшает UX.
Обработка и сохранение изображения после отправки формы
После загрузки файла важно правильно его обработать. Gravity Forms сохраняет файл, но вы можете дополнительно получить к нему доступ и, например, создать миниатюры или сохранить путь в мета-поле записи.
Пример хука для получения URL загруженного изображения после успешной отправки формы:
add_action('gform_after_submission_1', 'wphow_save_uploaded_image_url', 10, 2); // замените 1 на ID вашей формы function wphow_save_uploaded_image_url($entry, $form) { $file_url = rgar($entry, '5'); // замените 5 на ID поля файла if ($file_url) { // Здесь можно сохранить URL в мета-поле пользователя или поста // update_post_meta($post_id, '_wphow_image', $file_url); error_log('Загруженное изображение: ' . $file_url); } }Этот код записывает в лог URL загруженного изображения для дальнейшей обработки.
Лучшие плагины для расширения возможностей загрузки изображений в Gravity Forms
Если вы хотите готовое расширение, обратите внимание на следующие плагины:
- Gravity Forms Image Preview — добавляет предпросмотр изображений в стандартное поле загрузки.
- Clearfy Pro — оптимизирует работу WordPress и может помочь с безопасностью загрузок.
Использование проверенных плагинов экономит время и уменьшает вероятность ошибок.
Советы по безопасности и производительности при работе с загрузкой изображений
Обязательно проверяйте тип и размер загружаемых файлов, чтобы избежать загрузки вредоносного кода. Ограничивайте максимальный размер файла в настройках Gravity Forms и PHP (upload_max_filesize, post_max_size).
Для повышения производительности можно использовать автоматическую оптимизацию изображений с помощью плагинов типа WP Rocket или внешних сервисов.
Также рекомендуется хранить изображения в отдельном CDN для быстрого отдачи пользователям.