Загрузка файлов в форме Tilda: выбор и перетаскивание

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

Мод «Drag&drop загрузка файлов» меняет оформление штатной загрузки Tilda. Сам файл по-прежнему обрабатывает подключённый сервис. Поэтому сначала настройте передачу вложения, а потом внешний вид.

Добавьте в форму штатное поле «Файл» и настройте сервис загрузки. Укажите имя поля, обязательность и получателя заявки. Ограничения по типу, размеру и количеству файлов задаются в Tilda и подключённом сервисе.

Сначала отправьте небольшой тестовый файл через обычное поле. Если вложение не доходит уже на этом этапе, новая область перетаскивания проблему не решит. Этот вариант мода работает со штатным виджетом Tilda, а не с произвольным полем или Uploadcare.

Для короткой формы подойдёт строка, для заявки с несколькими вложениями — заметная плитка или горизонтальная область. Напишите, что вы ожидаете: «Прикрепите план помещения» понятнее, чем просто «Загрузка».

Рядом укажите допустимые файлы обычными словами. Не перечисляйте ограничения, которые не совпадают с реальной настройкой. Если разрешён один документ, текст «Добавьте фотографии и документы» может ввести человека в заблуждение.

1. Подготовьте работающее штатное поле загрузки.
2. В конструкторе выберите ID нужного блока либо общий класс нескольких блоков.
3. Настройте компоновку, текст, иконку и вид при перетаскивании.
4. Решите, нужны ли миниатюры изображений и сведения о файлах.
5. Скопируйте код в T123 после формы и опубликуйте страницу.

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

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

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

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

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

Возьмите небольшой безвредный тестовый документ. Выберите его, дождитесь окончания загрузки и отправьте заявку. Найдите вложение у получателя и проверьте, что оно открывается.

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

Эту проверку стоит повторить после изменения сервиса загрузки или ограничений файлов.

Читайте также: Как сохранить заполненную форму в Tilda после обновления · Прогресс заполнения формы в Tilda: сколько осталось.