Advertisement
  1. Code
  2. Forms

Cómo crear formularios de carga de archivos en tu sitio de WordPress

by
Read Time:6 minsLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

Los formularios son una manera sencilla de recopilar información de los visitantes de un sitio web, y las cargas de archivos permiten a los usuarios agregar información aún más útil o importante. Algunos de los datos que puedes recopilar de los formularios de carga de archivos son:

  • imágenes y videos enviados por los usuarios
  • contenido en forma de entradas de blogs
  • archivos de currículos

En este artículo, te mostraré cómo crear un formulario de carga de currículos para un sitio web de WordPress. Los usuarios podrán cargar archivos de currículo en formato PDF. Al final de este tutorial, deberíamos tener algo como esto.

sample sitesample sitesample site

También te mostraré cómo agregar estos archivos cargados a Dropbox.

Extensión de cargador de archivos con la función de arrastrar y soltar para Contact Form 7

La extensión Drop Uploader para Contact Form 7 es un poderoso complemento que te permite agregar un área de carga de cualquier formato a un formulario. También puedes agregar varias áreas de carga a un formulario. Incluso te permite copiar estos archivos cargados al servidor de tu preferencia o a Dropbox, que proporciona otra copia de seguridad para tus datos.

Otras funciones son las siguientes:

  • validación de archivos con JavaScript (front-end)
  • capacidad de restringir extensiones de archivo específicas
  • carga de archivos ilimitada, lo que garantiza que puedas cargar archivos de cualquier tamaño
  • capacidad de arrastrar y soltar o navegar durante la carga
  • personalización de estilo que incluye colores, botones de navegación e iconos
  • recepción de archivos cargados como enlaces, archivos adjuntos de correo, o ambos
  • recepción de archivos adjuntos como archivos zip
  • almacenamiento de archivos en Dropbox
  • eliminación de archivos antiguos a una hora específica

El complemento permite la traducción y es compatible con el inglés, español, francés, italiano, alemán, ruso y ucraniano.

Crea tu formulario de carga de currículos

Para comenzar a crear un formulario de carga, primero compra y descarga el complemento Drop Uploader para CF7. Puedes encontrar tus archivos instalables de WordPress en la sección de descarga de tu cuenta.

Una vez que descargues los archivos de WordPress, inicia sesión en tu sitio de WordPress e instala el complemento. Ve a Plugins > Add New (Complementos > Agregar nuevo) y carga el archivo zip de WordPress que obtuviste de CodeCanyon. Después de cargarlo, haz clic en Install Now (Instalar ahora), espera unos segundos y luego haz clic en Activate (Activar). Ahora puedes comenzar a usar el complemento.

Configuraciones

Ve a Settings > CF7 Drop Uploader Settings (Configuraciones > Configuraciones de Drop Uploader para CF7) y personaliza Drop Uploader Style (Estilo de Drop Uploader), además de otras opciones como el diseño y el almacenamiento de archivos.

style customizationstyle customizationstyle customization

Almacenamiento de archivos

file_storagefile_storagefile_storage

Drop Uploader para CF7 ofrece tres formas de almacenar archivos:

  • Adjunto: si habilitas esta opción, todos los archivos se archivarán en formato zip.
  • Enlace: esta opción te permite almacenar archivos cargados como enlaces. También te permite eliminar los archivos a una hora específica.
  • Dropbox: esta opción te permite integrar y añadir tus archivos a Dropbox. Todo lo que necesitas es el token de Dropbox, el cual puedes obtener en tu cuenta de dicho servicio. También puedes generar enlaces que se pueden compartir y vincularlos a archivos o carpetas.

Crea tu primer formulario de carga de archivos

Instala Contact Form 7 desde el directorio de complementos oficial de WordPress. Una vez hecho lo anterior, ahora puedes comenzar a crear tus formularios. Haz clic en Contact > Add New (Contact > Agregar nuevo) en el menú de tu panel de WordPress. Contact Form 7 viene preconfigurado con una plantilla lista para usarse, como se muestra a continuación.

mail settingsmail settingsmail settings

Haz clic en Drop Uploader, y deberás ver una ventana emergente como la mostrada a continuación.

drop uploader settingsdrop uploader settingsdrop uploader settings

Marca el campo Field type (Tipo de campo) como Required field (Campo requerido), establece el valor de Files count limit (Límite de cantidad de archivos) e introduce el valor de Accepted file types (Tipos de archivo aceptados) para que sea el formato PDF. Marca la casilla de verificación HTML Link (Enlace HTML) si deseas enviar enlaces en HTML. Una vez que hayas terminado, haz clic en Insert Tag (Insertar etiqueta) y todos los cambios serán aplicados al formulario. Reorganiza los campos según como quieras que aparezcan en tu formulario. También puedes agregar un mensaje haciendo clic en la pestaña Drop Uploader Message (Mensaje de Drop Uploader).

final formfinal formfinal form

La plantilla de formulario también contiene campos adicionales como casillas de verificación, fecha y botones de radio, los cuales puedes usar para crear cualquier formulario.

A continuación, ve a la pestaña Mail (Correo) y agrega el código abreviado del cargador (en mi caso, [dropuploader-313]) al cuerpo del mensaje y guarda los cambios.

send mail settingssend mail settingssend mail settings

También puedes recibir los archivos cargados como archivos adjuntos de correo pegando el id de código abreviado del cargador en la sección File Attachments (Archivos adjuntos).

file attchementsfile attchementsfile attchements

Incrusta tu formulario de carga de currículos en una página

El último paso es incrustar el formulario de carga en una página de WordPress. Para agregar el formulario de carga, haz clic en la opción Add shortcode (Agregar código abreviado) y pega el código abreviado del formulario de contacto.

add shortcodeadd shortcodeadd shortcode

Recibe los archivos cargados en Dropbox

En esta sección, cubriremos la manera en la que puedes integrar Dropbox a tus formularios de contacto y cómo enviar copias a Dropbox.

Lo primero que debes hacer es dirigirte a Dropbox Developers (Desarrolladores de Dropbox) e iniciar sesión en tu cuenta de Dropbox. Haz clic en Create apps (Crear aplicaciones), selecciona la opción Dropbox API (API de Dropbox), elige el tipo de acceso que necesitas para la API y crea un nombre para tu aplicación. Finalmente, haz clic en el botón Create app (Crear aplicación). Serás redirigido a la página que contiene toda la información de la aplicación. Desplázate a la sección OAuth 2 y haz clic en el botón Generate token (Generar token).

generate tokengenerate tokengenerate token

Una vez que el token haya sido generado, cópialo y pégalo en la sección Dropbox token (Token de Dropbox) en tu sitio de WordPress.

storage settingsstorage settingsstorage settings

Para garantizar que tus archivos sean almacenados en Dropbox, edita el formulario habilitando la opción de recibir archivos. Ve a la pestaña Drop Uploader y activa Dropbox settings (Configuraciones de Dropbox).

dropbox settingsdropbox settingsdropbox settings

Guarda las configuraciones de tu formulario. Además de recibir archivos como enlaces en el cuerpo del mensaje, también recibirás archivos a través de Dropbox. Para confirmar si tus envíos de archivos se han guardado en tu cuenta de Dropbox, simplemente inicia sesión en esta última y revisa en Apps (Aplicaciones).

form submissionsform submissionsform submissions

Conclusión

Este artículo ha cubierto todo lo que necesitas para comenzar a crear formularios de carga y almacenar tu información. Drop Uploader para CF7 satisfará todas las necesidades, ya sea para archivos grandes o para archivos pequeños. Si estás buscando una manera de crear rápidamente formularios de carga que envíen de forma automática tus cargas de archivos a tu Dropbox, esta es una forma sencilla de administrar archivos y garantizar su conservación segura. Aprovecha este increíble complemento y crea cargas de archivos fácilmente.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.