En ocasiones necesitamos poner a disposición de nuestros usuarios un modo de enviar o adjuntar archivos por medio de un formulario. Vamos a ver cómo podemos conseguir esto con uno de los plugins gratuitos para formularios más utilizados en WordPress: Contact Form 7.
Vamos a ver también cómo hacer que estos archivos lleguen como adjuntos en el correo de notificación o bien que nos lleguen enlazados, dónde quedan almacenados y qué aspectos debemos tener en cuenta a la hora de incluir un campo de subida de archivos en Contact Form 7.
Campo de subida de archivos en Contact Form 7
Contact Form 7 incluye, de forma nativa (es decir, sin necesidad de add-ons adicionales), un campo para subida de archivos, por lo que no necesitas hacer nada concreto para disponer de esta funcionalidad en tus formularios: simplemente añadir el campo.
Añadir un campo de archivo a los formularios
Añadir el campo necesario para que un usuario pueda subir archivos es muy fácil, y se puede hacer mediante los botones que Contact Form 7 facilita para la creación del formulario como usando directamente el shortcode correspondiente.
Subirlo mediante shortcode no es mucho más complicado que usar el botón: basta insertar en la plantilla del formulario el shortcode [file] con el identificador de archivo y las opciones que se le quieran insertar:
Estas opciones pueden ser:
- filetypes, para limitar los tipos de archivo permitidos, separados por una barra vertical
- limit, para establecer un tamaño máximo de archivo en bytes (pueden usarse los sufijos kb y mb para establecerlo en kilobytes o en megabytes
Como siempre, se verá más claro con un ejemplo:
[file curriculum filetype:pdf|doc|docx|odt limit:2mb]
Este shortcode, incluido en la plantilla de formulario, insertaría un campo de subida de archivos cuyo identificador (ya veremos para qué sirve esto a la hora de adjuntarlo o enlazarlo a los emails de notificación) será curriculum y que admitirá archivos PDF, DOC, DOCX y ODT con un tamaño máximo de dos megabytes. Fácil, ¿no?
Lo único que debes tener en cuenta, a la hora de limitar los archivos (por tamaño y/o por extensión) es que Contact Form 7 no informa al usuario de estas limitaciones, así que tendrás que hacerlo tú. Por seguir con nuestro ejemplo, podrías hacer:
O, mejor aún:
[file curriculum filetype:pdf|doc|docx|odt limit:2mb]
Tipos de archivo permitidos: PDF, DOC, DOCX, ODT
Tamaño máximo de archivo: 2MB
Dónde se guardan los archivos subidos con Contact Form 7
Si tienes alojada la web en un hosting con limitación de espacio y no por número de archivos (es decir, el 99% de las empresas de hosting) comprenderás la importancia de establecer una limitación en los tamaños de archivo que permitas subir a tus usuarios.
Los archivos quedan guardados temporalmente en el directorio wp-content/uploads/wpcf7_uploads (a no ser que hayas cambiado la localización del directorio de medios por defecto). Es, como digo, sólo temporal: el tiempo justo para adjuntarlos al correo electrónico de notificación; después son eliminados.
Cambiar la ruta por defecto
Puedes personalizar este ajuste y establecer como almacén temporal de los archivos cualquier directorio que quieras (dentro de la instalación de WordPress) editando el archivo wp-config.php (recuerda siempre hacer una copia de seguridad antes) y estableciendo la siguiente constante:
define( 'WPCF7_UPLOADS_TMP_DIR', '/ruta/al/directorio' );
¿Estás construyendo tu tienda online o eres implementador WordPress?
¿Necesitas plugins de calidad y con soporte para implementar funcionalidades concretas?
Consigue todos los plugins a la venta en la sección de plugins de esta web y todos los que siga añadiendo. Acceso a los 96 plugins (y subiendo) con soporte directo del desarrollador, actualizaciones y uso ilimitado: úsalos en tantas webs como lo necesites.
Archivos adjuntos en Contact Form 7
¡Bien! Ya hemos conseguido que nuestros usuarios puedan subir archivos a nuestro formulario creado con Contact Form 7. Ahora sólo queda poder recuperar esos archivos para cada formulario; porque no olvides que quedan guardados en nuestro servidor, todos juntos y bien mezcladitos.
Esto lo podemos hacer de dos formas: adjuntando el archivo subido a la notificación de formulario enviado que Contact Form 7 nos envía, o bien añadiendo a ese correo electrónico de notificación un enlace para descargar dicho archivo.
Tú eliges la forma que te resulte más cómoda, pero ten esto en cuenta: si adjuntas los archivos a la notificación, ten en cuenta que pueden saturar tu buzón de correo electrónico, además de obligarte a descargar los archivos si usas un gestor de correo electrónico y no un servicio de webmail. Algo desde luego muy importante si consultas el correo desde el móvil (te puedes «ventilar» la cuota de datos y el espacio del móvil en unos pocos correos).
Adjuntar los archivos subidos a la notificación
Adjuntar al email de notificación el archivo que el usuario haya subido a nuestro formulario es muy fácil, y desde luego muy cómodo, ya que junto con la notificación recibiremos el archivo, listo para guardar donde lo necesitemos.
Para ello vamos a utilizar el apartado Archivos adjuntos del la pestaña Correo electrónico de la configuración del formulario. En él escribiremos, entre corchetes, el identificador que le hayamos puesto al archivo.
Siguiendo con el ejemplo anterior, si el campo que hemos creado para que el usuario suba su archivo es:
[file curriculum filetype:pdf|doc|docx|odt limit:2mb]
en el apartado Archivos adjuntos tendremos que escribir:
[curriculum]
Y ya está: Contact Form 7 se ocupará de adjuntar a la notificación el archivo que el usuario haya adjuntado a ese campo. Por supuesto, si tenemos varios campos de subida de archivos en un mismo formulario podemos adjuntar tantos como queramos, pondiendo en este apartado todos los identificadores.
Enlazar los archivos subidos en la notificación
Sin embargo, como decía más arriba, esto puede saturar tu buzón de email o tu dispositivo (sobre todo si usas un móvil para descargar el correo o si los archivos que suben los usuarios son grandes).
La alternativa es añadir a la notificación un enlace de descarga en lugar de adjuntar el archivo en sí, muy útil especialmente si no necesitas descargar todos los archivos, sino sólo los que te interesan: de esta forma tendrás el enlace en cada notificación y tendrás controlado qué archivo es de cada formulario, y si necesitas descargarlo sólo tienes que hacer un click.
Esto es sencillísimo: basta con que añadas, en el lugar que prefieras del Cuerpo del mensaje, la línea (siguiendo con el mismo identificador de archivo del ejemplo anterior):
https://tuweb.com/wp-content/uploads/wpcf7_uploads/[curriculum]
Simplemente recuerda cambiar la ruta si has configurado un directorio diferente para que se almacenen los archivos de Contact Form 7, según explicaba más arriba.
Adjuntar archivos estáticos a los correos de Contact Form 7
Por último, y por completar el tema, queda decir que Contact Form 7 también permite adjuntar archivos estáticos a los correos electrónicos de notificación, es decir, adjuntar un documento (siempre el mismo, o los mismos, aquí no vale aplicar condicionantes) que ya tengas subido a tu servidor.
Esto es útil si quieres hacer llegar siempre un archivo a los usuarios que envían un formulario, por ejemplo un documento con las condiciones de privacidad, de uso, un ebook gratuito, etcétera. Bastaría para eso activar la notificación al usuario (el Correo electrónico 2) e indicar, en el cuadro de Archivos adjuntos la ruta a dicho archivo.
Dos cosas a tener en cuenta:
- La ruta ha de ser relativa al directorio wp-content
- Por razones de seguridad no se pueden adjuntar archivos que estén fuera de uploads
Lo más cómodo es subir el archivo a la biblioteca de medios, y después añadirlo en Archivos adjuntos de esta forma:
uploads/2019/01/archivo.pdf
Gracias Enrique, tu post me ha sido de gran ayuda… un abrazo.
Gracias por tu comentario, Jose. Me alegra que te haya sido útil 🙂
Un saludo
Excelente articulo!!
Tengo una pregunta, dices que los archivos se adjuntan temporalmente y luego son eliminados del servidor, pero si elijo la opción de enviar solo el enlace del archivo eso quiere decir que después de unos días el enlace quedará inservible?
Hola 7looz
Eso es en caso de que el archivo se adjunte a la notificación, ya que en este caso no tiene sentido dejarlo almacenado en el servidor.
Un saludo.
Excelente articulo muy bien explicado.
Me ha servido mucho.
Agradezco mucho tu aportación, me fue de mucha utilidad.
¡Hola Enrique!
Gracias por el artículo, es muy útil. Una consulta ¿Es posible cambiar el diseño y texto del botón de subida de archivos? ¡Gracias!
Hola Gonzalo
Sí, puedes cambiar el estilo mediante CSS. En cambio al texto, puedes cambiarlo según explico aquí.
Un saludo
Hola tengo una duda, cuando pruebo subir un doc llega al correo pero no puedo descargarlo, por qué sucede eso?
Hola Enrique, la configuración de limitaciones de tipos de archivo y peso que indicas me funcionan, pero necesito que el CF7 rebaje las dimensiones y peso de los archivos que los usuarios intentan subir. He ensayado varios plugin de optimización de imágenes y funcionan muy bien (como el «Imsanity» por ejemplo), pero no he logrado que trabaje en conjunto con el CF7 así que la contact form marca error cuando la imagen excede las limitaciones que he colocado. Y el único que encontré para CF7, que es el «Images Optimize and Upload CF7» me marca error. ¿Sabes de algún plugin o técnica que haga esta función?
Hola Juan Andres
No, lo lamento, no conozco ningún otro plugin para esa función.
Un saludo
Tengo una duda, cuando adjunto archivos en el formulario y estos se colocan en el contact form de wordpress en los registros se crea un vinculo al archivo pero este antepone unos caracteres, en mi caso me aparece así: 1613160424-c8f1c62a92a8bb44b1cac1c54ced35be lo cual no me lleva a ningún enlace, hice pruebas de subir archivos pdf de nombre doc01, el cual se graba en el servidor con el nombre 1613160424-doc01.pdf me podras comentar donde se configura o como corregir los enlaces
Hola Buenas tardes,
Tengo una duda, estoy creando un formulario, el cual tiene la opción de adjuntar un archivo. El tema es que aunque dejo la etiqueta archivo como «no requerido», al momento de enviar el formulario igual me solicita adjuntar el archivo.
Por qué puede pasar esto?
Gracias.
Cuando adjunto la url en una etiqueta en ligar de mostrarme la imagen me dice «TEMPORARY IMAGE» por qué puede ser?