Форма загрузки файлов на сайт: как принимать документы, фото и видео

Когда клиенту нужно отправить фотографию, документ, макет или архив, обычной формы с именем и телефоном уже недостаточно. Форма загрузки файлов на сайт принимает контактные данные и вложения одной заявкой — без переписки по почте и мессенджерам.

Кому нужна форма с загрузкой файлов

Такая форма полезна практически в любой услуге, где для оценки или выполнения заказа нужны исходные материалы:

• дизайнерам и разработчикам — получить логотипы, тексты и фотографии;
• типографиям — принять макет и параметры печати;
• сервисным центрам — получить фото или видео неисправности;
• HR-специалистам — собрать резюме и портфолио;
• юристам и консультантам — принять документы к заявке;
• фотографам — получить материалы от клиента или участников.

Главное преимущество в том, что файл не теряется отдельно от контактов. Имя, комментарий, дополнительные поля и вложения относятся к одной заявке.

Три способа принимать файлы на сайте

Встроенное поле конструктора

Некоторые конструкторы позволяют добавить поле «Файл» в стандартную форму. Например, Tilda поддерживает загрузку в подключённые облачные хранилища. Способ подходит, если устраивают доступные блоки, лимиты и организация полученных материалов.

Собственная HTML-форма

Разработчик может создать поле input type="file" и серверный обработчик. Такой вариант даёт полный контроль, но требует настроить хранение, ограничения, проверку типов, защиту от вредоносных файлов и интерфейс заявок.

Готовый загрузчик LF Drive

В LF Drive форма создаётся в личном кабинете. Готовый загрузчик можно встроить на сайт, а заявки и прикреплённые файлы будут доступны владельцу формы в одном интерфейсе.

Как добавить форму LF Drive на сайт

1. Создайте форму

Откройте раздел форм в личном кабинете LF Drive и создайте новую форму. Дайте ей понятное название: например, «Материалы для расчёта» или «Резюме».

2. Добавьте нужные поля

Кроме загрузки файла можно запросить имя, телефон, email, номер заказа или комментарий. Не делайте обязательным всё подряд: чем короче форма, тем проще посетителю её отправить.

3. Скопируйте код загрузчика

Скопируйте готовый код и вставьте его в нужное место страницы. После публикации форма станет частью сайта и будет работать без отдельной разработки файлового сервера.

4. Проверьте отправку

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

Что важно проверить перед запуском

• понятно ли написано, какие материалы нужно приложить;
• видит ли посетитель допустимый размер и формат;
• не очищаются ли остальные поля после ошибки;
• удобно ли выбирать файл на iPhone и Android;
• появляется ли подтверждение после успешной отправки;
• не обрезаются ли длинные имена файлов на мобильном экране.

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

Приём файлов открывает внешним посетителям доступ к загрузке данных, поэтому нужны ограничения размера и форматов, проверка содержимого, безопасные имена и запрет выполнения загруженного кода. LF Drive принимает файлы через контролируемый загрузчик и сохраняет их в аккаунте владельца формы.

Если посетитель передаёт персональные данные, добавьте к форме ссылку на политику обработки данных и необходимое согласие.