Como activar a carga de ficheiros de arrastrar e soltar en WordPress

Premer un botón, navegar por cartafoles, seleccionar ficheiros: o proceso de carga tradicional funciona, pero é complicado. Arrastrar e soltar é o que os usuarios esperan en 2024. Queren coller ficheiros do seu escritorio e soltalos directamente no teu formulario.

Nesta guía, aprenderás a activar a carga de ficheiros de arrastrar e soltar nos teus formularios de WordPress para unha experiencia de usuario moderna e intuitiva.

Por que é importante arrastrar e soltar

Cargas máis rápidas

• Sen navegación polos diálogos de ficheiros
• Seleccionar e soltar nun só movemento
• Cargar varios ficheiros ao instante

Mellor experiencia de usuario

• Intuitivo: os usuarios entenden a función de arrastrar e soltar
• Parece moderno e pulido
• Reduce a fricción na finalización do formulario

Taxas de finalización máis altas

• Unhas subidas máis sinxelas significan menos formularios abandonados
• É máis probable que os usuarios adxunten ficheiros cando é sinxelo
• A aparencia profesional xera confianza

Móbil agradable

• Regresa sen problemas ao selector de ficheiros estándar en móbiles
• Os dispositivos táctiles obteñen a selección de ficheiros nativa
• Sen funcionalidade rota

Como funciona Arrastrar e Soltar

A experiencia do usuario

1. O usuario ve unha zona de colocación no teu formulario
2. Arrastran ficheiros desde o escritorio/cartafol
3. A zona de colocación destaca cando os ficheiros se pasan por riba dela
4. Os ficheiros son eliminados e comeza a carga
5. A vista previa/confirmación mostra o éxito da carga

Retroalimentación visual

Un bo método de arrastrar e soltar proporciona pistas visuais:

• Estado predeterminado: Limpar a zona de lanzamento con instrucións
• Arrastrar por riba: Zonas destacadas, o bordo cambia de cor
• Soltar: Os ficheiros aparecen na área de vista previa
• Cargando: Indicador de progreso
• Completo: Confirmación de éxito

Deseño da zona de lanzamento

Elementos típicos da zona de lanzamento:

┌──────────────────────────────────────┐ │ │ │ 📁 Arrastra os ficheiros aquí ou │ │ Fai clic para navegar │ │ │ │ Aceptados: PDF, JPG, PNG │ │ Tamaño máximo: 10 MB │ │ │ └───────────────────────────────────────┘

Configuración das subidas de arrastrar e soltar

Aquí tes como activar a función de arrastrar e soltar con Creador automático de formularios:

Paso 1: Instalar o creador de formularios automático

1. Ir a Complementos → Engadir novo
2. Buscar "A.F.B."(a abreviatura de Auto Form Builder)"
3. Buscar "AFB – Creador automático de formularios – Creador de formularios de arrastrar e soltar"
4. prema Instalar agora, Entón Activar

Paso 2: Engadir un campo de subida de ficheiros

1. Crea ou edita o teu formulario
2. arrastra o Cargar un ficheiro campo no teu formulario
3. Fai clic para abrir a configuración do campo

Paso 3: Arrastrar e soltar está integrado

Boa noticia: O campo de carga de ficheiros do Creador de formularios automático inclúe a función de arrastrar e soltar por defecto. Non se precisa configuración especial.

A zona de subida automaticamente:

• Acepta ficheiros arrastrados
• Destacados ao arrastrar por riba
• Mostra as vistas previas dos ficheiros despois de soltalos
• Regresa á opción de navegar con clic en móbiles

Paso 4: Personaliza o campo de carga

Configura os axustes do campo de carga:

Tipos de ficheiro permitidos

• Selecciona as categorías de ficheiros que aceptas
• Imaxes, documentos, follas de cálculo, etc.

Tamaño máximo do ficheiro

• Definir o límite de tamaño por ficheiro
• Evita as subidas de tamaño excesivo

Múltiples Arquivos

• Activar a opción de aceptar varios ficheiros soltados
• Definir límites mínimos/máximos

Etiquetas personalizadas

• Etiqueta do campo: "Cargar documentos"
• Texto de axuda: "Arrastra os ficheiros aquí ou fai clic para navegar"

Paso 5: Define a zona de colocación (opcional)

Usa o estilo do formulario para personalizar a aparencia:

• Estilo e cor do bordo
• Cor de fondo
• Icona ou ilustración
• Estados activos/desprazados ao rato

Boas prácticas na zona de lanzamento

1. Facelo visible

A zona de lanzamento debería ser obvia:

• Bordo claro (os bordos discontinuos son tradicionais)
• Tamaño suficiente (non pequeno)
• Icona que indica a subida de ficheiros (carpeta, nube, frecha)

2. Inclúe instrucións claras

Indica aos usuarios o que deben facer:

• "Arrastrar ficheiros aquí"
• "ou fai clic para navegar"
• Mostrar os tipos de ficheiro aceptados

3. Proporcionar retroalimentación visual

Os usuarios precisan saber que o sistema responde:

• Cambio de cor ao pasar o cursor
• Resaltado do bordo ao arrastrar por riba
• Mensaxe "Liberar para subir"

4. Mostrar o progreso da subida

Para ficheiros máis grandes:

• Barra de progreso durante a carga
• Porcentaxe completada
• Nome do ficheiro que se está a cargar

5. Confirmar o éxito

Despois de que se complete a carga:

• Mostrar nome/miniatura do ficheiro
• Marca de verificación ou indicador de éxito
• Opción para eliminar e tentar de novo

6. Manexa os erros con gracia

Cando algo sae mal:

• Limpar a mensaxe de erro ("Ficheiro demasiado grande")
• Resaltar o ficheiro problemático
• Permitir reintento

Arrastrar e soltar vs. Premer para navegar

Mellor enfoque: Admite ambos. Arrastra e solta para usuarios avanzados, fai clic para buscar todos os demais.

Patróns comúns da zona de lanzamento

Patrón 1: Zona de lanzamento completa

Área ampla e destacada dedicada ao descarte de ficheiros:

┌─────────────────────────────────────────┐ │ │ │ ☁️ Cargar ficheiros │ │ │ │ Arrastra e solta ficheiros aquí ou │ │ Fai clic para navegar │ │ │ │ PDF, DOC, JPG, PNG (máx. 10 MB) │ │ │ └───────────────────────────────────────────┘

Mellor para: Formularios onde a subida de ficheiros é a acción principal.

Patrón 2: Zona de lanzamento compacta

Zona máis pequena xunto a outros campos:

Adxuntos ┌──────────────────────────┐ │ 📎 Soltar ficheiros ou explorar │ └──────────────────────────┘

Mellor para: Subida de ficheiros como un dos moitos campos de formulario.

Patrón 3: En liña co botón

Zona de lanzamento combinada co botón tradicional:

┌────────────────────────────────────────┐ │ Soltar ficheiros aquí [Escoller ficheiros] │ └────────────────────────────────────────┘

Mellor para: Enfoque híbrido, opción de reserva clara.

Patrón 4: Zona de previsualización da imaxe

Zona de solte con vistas previas en miniatura:

┌────────────────────────────────────────┐ │ [imx1] [imx2] [imx3] [+] │ │ │ │ Solta máis imaxes aquí │ └────────────────────────────────────────┘

Mellor para: Galerías de imaxes, subidas de fotos.

Consideracións sobre móbiles

Os dispositivos táctiles non arrastran

Os usuarios de móbiles non poden arrastrar e soltar ficheiros. O teu formulario debe funcionar correctamente:

• Toca a zona de soltar e abre o selector de ficheiros
• Selección nativa de fotos/ficheiros
• Opción de cámara para facer fotos novas

Etiquetas adaptadas para móbiles

Axusta as mensaxes para móbiles:

• Escritorio: "Arrastra os ficheiros aquí ou fai clic para navegar"
• Móbil: "Toca para seleccionar ficheiros" (ou só mostrar ambos)

Proba en dispositivos reais

Antes do lanzamento:

• Proba en iPhone e Android
• Verificar que a selección de ficheiros funciona
• Comproba o acceso á cámara se é o caso
• Asegurar que a carga se complete correctamente

Mellorando a zona de lanzamento

Animación ao arrastrar por riba

As animacións sutís melloran a experiencia de usuario:

• Pulso ou brillo de fronteira
• Esvaecemento da cor de fondo
• Rebote ou escala da icona

Manteña a sutilidade: non o distraia da acción.

Iconas de tipo de ficheiro

Mostrar iconas relevantes:

• 📄 para documentos
• 🖼️ para imaxes
• 📊 para follas de cálculo
• 🎥 para vídeos

Progreso da subida

Para obter mellores comentarios durante a carga:

• Barra de progreso por ficheiro
• Progreso xeral para varios ficheiros
• Opción de cancelación para subidas longas

Vistas previas en miniatura

Para a subida de imaxes:

• Mostrar a miniatura despois de soltala
• Fai clic para ver a tamaño completo
• Botón X para eliminar

Resolución de problemas de arrastrar e soltar

Os ficheiros non se perderán

Comprobar:

• JavaScript está activado no navegador
• Sen erros de JavaScript que bloqueen a funcionalidade
• O tipo de ficheiro está permitido
• O navegador admite arrastrar e soltar (os navegadores modernos si)

A zona de saída non destaca

Causas posibles:

• O CSS non carga correctamente
• Erro de JavaScript
• Conflito de complementos

Cargan ficheiros pero non se mostran

Comprobar:

• Función de vista previa activada
• Tipo de ficheiro compatible para a vista previa
• Carga realmente completada

A alternativa móbil non funciona

Verificar:

• O controlador de clics/toques está activo
• Existe unha entrada de ficheiro oculta
• Permisos do navegador móbil para o acceso a ficheiros

Cargas lentas

Causas:

• Arquivos de gran tamaño
• Conexión a internet lenta
• Limitacións do servidor

Solucións:

• Engadir indicadores de progreso
• Establecer límites de tamaño de ficheiro razoables
• Considere as subidas fragmentadas para ficheiros moi grandes

Soporte para navegador

A carga de ficheiros de arrastrar e soltar é compatible con todos os navegadores modernos:

Se precisas compatibilidade con navegadores moi antigos, asegúrate de que funcione a opción alternativa de navegación por clic.

Consideracións de accesibilidade

Soporte de teclado

Non todo o mundo usa un rato:

• A zona de colocación debería ser enfocable (tabindex)
• Intro/Espazo debería activar o diálogo de ficheiro
• Os estados de foco deberían ser visibles

Lectores de pantalla

• Etiquetas claras para a área de carga
• Anunciar o progreso da subida
• Confirmar as cargas correctas

Non confíes só no arrastre

Ofrece sempre unha alternativa de clic. Arrastrar e soltar é unha mellora, non a única opción.

Casos de uso para arrastrar e soltar

Envío de documentos

Os usuarios arrastran contratos, informes ou aplicacións directamente desde as súas carpetas.

Galerías de imaxes

Solta varias fotos á vez para participar en concursos ou enviar portafolios.

Tickets de Soporte

Arrastra capturas de pantalla ou rexistros de erros directamente ao formulario de ticket.

Solicitudes de emprego

Solta o currículo, a carta de presentación e as mostras de portafolio nunha soa acción.

Portais de clientes

Os clientes arrastran ficheiros de proxectos, recursos ou documentos de comentarios.

Preguntas máis frecuentes

Funciona a función de arrastrar e soltar en todos os navegadores?

Si, todos os navegadores modernos o admiten. Os navegadores moi antigos (IE10 e anteriores) poden precisar a opción alternativa de clic.

Que ocorre nos dispositivos móbiles?

Os dispositivos móbiles non poden arrastrar ficheiros, polo que ao tocar na zona de soltar ábrese o selector de ficheiros nativo. A experiencia segue sendo boa.

Os usuarios aínda poden premer para navegar?

Si, ao premer na zona de colocación ábrese o diálogo de ficheiros. Ambos os métodos funcionan.

Funciona con varios ficheiros?

Absolutamente. Os usuarios poden arrastrar varios ficheiros á vez se o teu campo permite varias subidas.

É necesaria unha configuración especial?

Co Creador de formularios automático, a función de arrastrar e soltar está integrada no campo de carga de ficheiros. Non se require ningunha configuración especial.

Resumo

Activación da subida de ficheiros mediante arrastrar e soltar:

1. Engadir un campo de carga de ficheiros – Arrastrar e soltar está integrado
2. Configurar a configuración do ficheiro – Tipos, tamaños, límites
3. Asegurar unha zona de descarga despexada – Visible, con instrucións
4. Proporcionar retroalimentación visual – Resaltar ao arrastrar, mostrar o progreso
5. Apoiar a opción de facer clics alternativos – Non todo o mundo arrastra
6. Proba en móbil – Verificar que funciona a función de tocar para navegar
7. Ten en conta a accesibilidade – Compatibilidade con teclado e lector de pantalla

Conclusión

Arrastrar e soltar ficheiros xa non é algo que sexa estupendo, senón algo que se espera. Os usuarios están afeitos a arrastrar ficheiros ao correo electrónico, ao almacenamento na nube e ás aplicacións de mensaxería. Os teus formularios deberían ofrecer a mesma experiencia.

Creador automático de formularios Inclúe a funcionalidade de arrastrar e soltar integrada en cada campo de carga de ficheiros. Non se precisa configuración: só tes que engadir o campo e os usuarios poden arrastrar ficheiros directamente ao teu formulario.

Listo para a subida de ficheiros moderna? Descargar o creador automático de formularios e ofrécelles aos teus usuarios a experiencia de arrastrar e soltar que esperan.