Permitir a los usuarios subir múltiples archivos en Contact Form 7

Cómo subir múltiples archivos en Contact Form 7 con Drag and Drop Multiple File Upload

Si estás usando Contact Form 7 en WordPress es posible que, por tu tipo de negocio, puedas necesitar permitir que los usuarios puedan subir múltiples archivos con arrastrar y soltar desde un formulario. Ya sea para enviar documentos, imágenes, presupuestos, planos o cualquier otro tipo de archivo.

El problema es que, por defecto, Contact Form 7 se queda bastante corto en este aspecto. Sí, permite subir archivos, pero de forma muy básica. Un archivo por campo, sin sistema de arrastrar y soltar y con una experiencia poco intuitiva para el usuario final. Y cuando alguien necesita enviar varios archivos, la cosa se complica.

Por suerte, como todo en WordPress, y más en Contact form 7 tiene solución y además muy sencilla, ya que lo vamos a hacer con un ligero plugin que permite de forma muy fácil e intuitiva subir múltiples archivos en Contact Form 7.

Las limitaciones de Contact Form 7 al subir archivos

Contact Form 7 es uno de los plugins para crear formularios más usados de WordPress, y no es para menos, ya que si bien puede tener algunas limitaciones como en el caso de la subida de archivos, también es un plugin muy ligero, fiable y sobre todo versátil.

Esto hace que si necesitas que un usuario envíe varios documentos a la vez en Contact form 7 cuentes con plugins y funciones muy sencillas que nos permite desde enviar correos a varios destinatarios, hasta redirigirlos a una página de gracias y mil cosas más. En este post puedes ver muchos más trucos con contact form 7 que debes conocer

Por lo que, al igual que tiene limitaciones, una de las cosas buenísimas de Contact form 7 es que admite plugins como Drag and Drop Multiple File Upload que nos permite subir múltiples archivos en Contact Form 7 con drag and drop, que es justo lo que buscamos resolver.

Subir múltiples archivos en Contact Form 7 con Drag and Drop Multiple File Upload

Para permitir subir múltiples archivos en Contact Form 7 con arrastrar y soltar, la solución más práctica es usar un plugin específico que amplíe esta funcionalidad sin romper nada ni complicar la configuración, y Drag and Drop Multiple File Upload es justo ese plugin.

Este tipo de plugin añade un nuevo campo al formulario que permite al usuario arrastrar varios archivos directamente desde su ordenador o seleccionarlos todos de una sola vez. El resultado es un formulario mucho más cómodo, moderno y funcional.

Desde el punto de vista del usuario, la diferencia es enorme. Desde el punto de vista técnico, la integración es limpia y funciona perfectamente con Contact Form 7.

Configurar Drag and Drop Multiple File Upload para subir múltiples archivos en Contact Form 7

Para permitir subir múltiples archivos en Contact Form 7 con arrastrar y soltar, el plugin que usamos habitualmente es Drag and Drop Multiple File Upload for Contact Form 7. Es plugin ligero, bien mantenido y muy enfocada a cubrir justo esta carencia del plugin base. Añade un campo específico de subida múltiple con drag & drop, funciona mediante Ajax y permite limitar número de archivos, peso máximo y tipos permitidos, algo fundamental tanto por usabilidad como por seguridad.

La experiencia de usuario mejora muchísimo frente al sistema nativo de Contact Form 7. El visitante puede arrastrar varios archivos de una sola vez, ver qué está subiendo, eliminar alguno si se equivoca y enviar el formulario sin complicaciones. Para formularios de presupuestos, documentación, imágenes o currículums, encaja perfectamente y cumple sin añadir complejidad innecesaria a WordPress.

Cómo instalar y usar el plugin Drag and Drop Multiple File Upload

Configurar el plugin Drag and Drop Multiple File Upload es sumamente sencillo, simplemente tendrás que ir a tu repositorio de WordPress y buscarlo, una vez seleccionado e instalado dale a activar. Si por algún motivo prefieres tenerlo siempre a mano también puedes descargarlo desde este enlace.

Ahora, bien desde el panel de plugins instalados o desde el submenú de contacto en la parte izquierda de WordPress podrás acceder a su configuración. Desde esta sección puedes definir aspectos clave como el número máximo de archivos, el tamaño permitido y las extensiones aceptadas.

Después, solo hay que ajustar el envío del correo en Contact Form 7 para decidir si los archivos llegan como adjuntos o como enlaces. En pocos minutos puedes tener un formulario completamente funcional para subir múltiples archivos en Contact Form 7 con arrastrar y soltar, sin tocar código y sin complicarte más de lo necesario.

Cómo funciona la subida múltiple de archivos en la práctica

Una vez instalado el plugin Drag and Drop Multiple File Upload, al acceder a tus formularios de contact Form 7, verás que ahora se ha añadido un nuevo tipo de campo que puedes añadir a cualquier formulario. Este campo permite definir aspectos clave como el número máximo de archivos, el tamaño permitido o los formatos aceptados de manera individual.

Para añadir los tipos de archivos permitidos deberás ponerlo con este formato: filetypes:jpeg|png|jpg|pdf|, esto lo que les está diciendo al formulario es que admita tipos de archivos JPG, PNG, Jpeg y PDF, aunque también podrías añadir gif, Docx o cualquier otro que puedas necesitar.

Una vez añadido y configurado ahora, el usuario verá una zona clara donde subir múltiples archivos en Contact Form 7, de una sola vez, e incluso eliminarlos si se equivoca antes de enviar el formulario, algo especialmente útil en formularios de contacto con formularios de presupuesto, solicitudes de empleo o cualquier caso en el que se necesite adjuntar documentación.

Recibir los archivos correctamente en el correo

Uno de los puntos importantes cuando se trabaja con subir múltiples archivos en Contact Form 7 es asegurarse de que los archivos llegan correctamente al correo. En la configuración del formulario puedes decidir si los archivos se envían como adjuntos o si se envían como enlaces de descarga.

En la mayoría de casos, enviar demasiados archivos como adjuntos puede provocar problemas con el servidor de correo o con el tamaño máximo permitido. Por eso, en proyectos más serios, suele ser buena idea enviar enlaces en lugar de adjuntos directos.

Esto se configura fácilmente desde la pestaña de correo de Contact Form 7, para ello tendrás que añadir el nombre del campo que hayas creado, tal como se muestra en la imagen que tienes aquí debajo, es decir, entre corchetes. Una vez tengas todo guardado realiza una prueba para ver si llegan correctamente los documentos adjuntos.

Aspectos a tener en cuenta al subir múltiples archivos en WordPress

Aunque la subida múltiple de archivos con arrastrar y soltar funciona muy bien, hay varios puntos que conviene tener en cuenta para evitar problemas. El primero es el límite de tamaño que permite el servidor. Aunque el formulario acepte archivos grandes, si el hosting no lo permite, la subida fallará.

Otro punto importante es la seguridad. Siempre es recomendable limitar los tipos de archivo permitidos y evitar formatos que puedan suponer un riesgo. De esta forma proteges tu web y evitas sustos innecesarios.

También es fundamental probar el formulario desde distintos dispositivos. Un buen sistema de subida múltiple de archivos en Contact Form 7 debe funcionar igual de bien en ordenador que en móvil o tablet.

Subir múltiples archivos en Contact Form 7, Una mejora sencilla que aporta mucho valor

No todos los formularios necesitan esta funcionalidad, pero cuando la necesitas, se nota. Si tu web recibe solicitudes con varios documentos, imágenes o archivos técnicos, permitir subir múltiples archivos con arrastrar y soltar en Contact Form 7 marca una diferencia clara frente a formularios más básicos.

Además, este tipo de mejoras transmite una imagen más profesional y cuidada, algo que siempre suma cuando un usuario está valorando contactar contigo y como has visto añadir esta funcionalidad es sencillo y muy recomendable en muchos proyectos.

Con una configuración adecuada, puedes ofrecer formularios mucho más completos sin renunciar a la ligereza y fiabilidad de Contact Form 7. Si estás trabajando con WordPress y necesitas subir múltiples archivos en Contact Form 7 con arrastrar y soltar, esta solución encaja perfectamente y evita complicaciones innecesarias.

Y si no tienes claro cómo configurarlo o quieres que el formulario quede bien integrado en el diseño de tu web, en Javier Callejo lo hacemos a menudo en proyectos reales, por lo que solo tienes que ponerte en contacto con nosotros.