Adjuntar Archivos a un Formulario con Contact Form 7 en WordPress

por

Suscríbete a mi canal:  

En ocasiones queremos crear un formulario en el que el visitante de nuestra web pueda añadir un archivo adjunto. Gracias al plugin Contact Form 7 esta tarea es sencilla. Es sencilla pero tenemos que tener en cuenta un par de detalles que te pueden volver loco si no las tienes en cuenta.

Una vez instalado y activado el plugin nos aparecerá en el menú lateral de la zona de administración de wordpress el item «Contacto», tal como se ve en la siguiente pantalla:

menu-contact-form-7

Si hacemos click en Añadir nuevo podemos crear un nuevo formulario y en el crearemos nuestro campo para que el visitante pueda adjuntar un archivo, ahora veremos como:

formulario-contact-form-7

En el menú de la derecha hacemos click en «Generar etiqueta» y dentro del menú que se despliega hacemos click en «Subida de archivos».

En este momento veremos la siguiente pantalla:

subida-ficheros-contact-for

En esta pantalla tenemos que comprar el siguiente código de la derecha a la izquierda: [file file-803]. Esto hará que aparezca el campo para adjuntar el fichero pero hay otro paso muy importante para que cuando el usuario envíe el formulario nos llegue el fichero adjunto. y es copiar [file-803] en la siguiente lugar:

adjuntar-fichero-contact-fo

Este es uno de los pasos que yo no hacía y me volvía loco porque no me llegaba el fichero adjunto.

Si queremos añadir el formulario a una página, tenemos que copiar el código que nos da en un post o página:

codigo-formulario

Ahora creo una página y pego ese código y el resultado es el siguiente:

resultado-contact-form-7

Otro tema a tener en cuenta es que el plugin contact form 7 por defecto está limitado a ficheros de 1mega. Si lo queremos subir tenemos que indicarlo en el campo correspondiente:

limitar-tamano-ficheros-for

Como veos en la imagen anterior he puesto «5000000» en el campo «Limite de tamaño de archivo(bytes)». Lo que estoy haciendo es limitando a 5Megas el tamaño del fichero adjunto. Al hacerlo aparece el código que tengo que usar:

[file file-647 limit:5000000]

Espero que os haya sido útil 😉

38 comentarios en «Adjuntar Archivos a un Formulario con Contact Form 7 en WordPress»

  1. Hola! He leído tu artículo pero sigo teniendo problemas y no he encontrado en ningún sitio, a ver si tú sabes la solución.

    A mí modo de ver hago todo lo que tengo que hacer pero cuando recibo el email en vez de haber un archivo adjunto me lo envía como texto plano y claro, se ve un conjunto de caracteres extraños. ¿Sabes por qué puede pasar?

    Muchas gracias.

    • Hola, muchas gracias por tu comentario 😉
      Yo lo he probado en varias webs y me funciona en todas. El problema que yo tenía es el que comento en el artículo de rellenar el campo de fichero adjunto.
      Si me pasas la dirección le puedo echar un ojo.
      Un saludo
      Óscar

      • Hola otra vez. Gracias por responder tan rápido.

        La web es yawork.es, y tengo la impresión de que es un fallo extraño porque ni en inglés ni en español he encontrado a nadie que le haya pasado (o no he sabido buscar).

        De nuevo gracias.

  3. Muchas gracias, me ha venido de maravilla. Aprovecho para una consulta. Quiero que el campo del email tenga que meterse por duplicado para evitar equivocaciones, ¿sabes si es posible con este plugin?

    Saludos

    • Hola Pau, cuando estás generando una etiqueta para añadir el archivo adjunto puedes poner los archivos permitidos en el campo «Formato de archivo válido (opcional)»
      Las extensiones que viene por defecto son «jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, and wmv. »
      Espero que te sirva 😉
      Óscar

  7. Hola, Oscar.

    He creado un formulario de contacto al que le he añadido la subida de ficheros y funciona perfectamente.

    Lo que quiero intentar ahora es cambiarle el estilo al botón «Seleccionar archivo». Quiero colocarlo a la derecha de la caja y que su color se ajuste al del tema.

    Agradecería mucho cualquier ayuda.

    Gracias y abrazo

  8. Buenos dias Oscar un gusto saludarlo vi su video de Contact Form 7 y aclaro muchas dudas en el manejo de este plugin pero tengo una consulta mi pagina es una pagina para músicos y bueno me gustaría saber como hacer que el plugin pueda adjuntar archivos .zip para que los artistas puedan enviar toda su información, y dos si no se pudiera como se puede hacer para que el usuario pueda enviar diferentes archivos adjuntos en un solo mail saludos

    • Hola Omar,
      Gracias por tu comentario 😉
      En este tutorial precisamente digo como añadir ficheros.
      Respecto a añadir varios podrías hacerlo añadiendo varios campos de subir archivos.
      Un saludo
      ÓScar

  10. Hola! Gracias por tu tutorial!

    He seguido todos los pasos, pero no encontrado una solución para recibir los archivos adjuntos dentro del correo electrónico, por lo que he investigado al parecer se guardan dentro del servidor, pero 1, no encuentro la ruta de donde se están guardando los archivos y 2. me gustaría que los archivos llegaran directamente adjuntos al email.

    te agradecería mucho si sabes la solución a este problema. Saludos! 🙂

    • Hola Andrea,
      Si sigues todos los pasos y tu servidor lo permite te envía los ficheros adjuntos al email, yo lo tengo funcionando de esa manera. En alguna ocasión he visto que algún compañero no le funcionaba por limitaciones del servidor.
      Saludos
      Óscar

  11. Hola Óscar, excelente artículo!

    Me gustaría saber si es posible utilizar el plug in solo para Word Press. Me gustaría crear una encuesta en Google Forms y al final incluir un segemento para que los encuestados suban un archivo.

    Sirve esta herramienta para Google Forms?

    Conoces alguna otra?

    Gracias!
    Maia

  15. Muchísimas gracias. Me estaba volviendo loco con los archivos adjuntos que no me llegaban y es que no había visto que había que rellenar el campo de archivos en el apartado de correo.
    Ahora me va genial y es gracias a tí
    Salu2.

Deja un comentario