Solía pedirle a la gente que me enviara sus fotos por correo electrónico para mi sitio web. Fotos de perfil para sitios de membresía, retratos para páginas de equipo, incluso imágenes simples de verificación de identidad, y cada vez se convertía en un desastre de idas y venidas.
La gente olvidaba adjuntar el archivo. O enviaban una foto demasiado grande. A veces, tomaban una captura de pantalla de una foto en lugar de enviar la imagen real, y la calidad era terrible.
Entonces me di cuenta de que podía permitir que las personas tomaran fotos y grabaran videos a través de mis formularios de WordPress. Solo necesitan hacer clic en un botón, tomar una foto (o grabar un video rápido), y eso es todo.
En esta guía, te mostraré cómo agregar esta función de captura de cámara a tus formularios de WordPress para que puedas evitar todos los dolores de cabeza por los que pasé.
¿Por qué agregar captura de cámara en vivo en formularios de WordPress?
La captura de cámara en vivo en tus formularios de WordPress hace que sea mucho más rápido y fácil para las personas enviar fotos o videos. Esto puede hacer que más usuarios completen tu formulario.
Piensa en lo que sucede cuando le pides a alguien que suba una foto a tu formulario de contacto. Tienen que dejar lo que están haciendo, abrir su aplicación de cámara, tomar la foto, cerrar la cámara, encontrar la foto en su galería y luego regresar para subirla.
Son muchos pasos. Y cada paso adicional es otra oportunidad para que alguien se rinda y abandone tu formulario.
Con un campo de captura de cámara en vivo, las personas pueden tomar fotos o grabar videos sin salir del formulario. Hacen clic en un botón, la cámara se abre allí mismo en su navegador y terminan en segundos.
Esto es más importante de lo que podrías pensar. He visto que las tasas de finalización de formularios aumentan significativamente con solo eliminar la fricción de las cargas de archivos tradicionales.
Aquí hay algunas situaciones reales donde la captura de cámara marca una gran diferencia:
| Tipos de sitios | Casos de Uso |
|---|---|
| Equipos de atención al cliente | Permite que las personas muestren su problema en lugar de intentar describirlo con palabras. |
| Sitios de propiedades/bienes raíces | Haz que los inquilinos documenten los problemas de mantenimiento en el momento en lugar de enviarse fotos por mensaje de texto de un lado a otro. |
| Escuelas/Plataformas de eLearning | Recopila fotos de estudiantes durante las admisiones en línea sin pedir a los padres que envíen archivos por separado por correo electrónico. |
| Compañías de seguros | Acelera las reclamaciones haciendo que los clientes fotografíen los daños de inmediato. |
La mejor parte de usar un plugin para este propósito es que todo se organiza automáticamente.
Cuando alguien envía tu formulario, su foto o video se adjunta a su entrada junto con toda su otra información. No más buscar en tu bandeja de entrada de correo electrónico tratando de emparejar fotos con la persona correcta. ✨
Dicho esto, te mostraré todos los pasos para agregar una función de captura de cámara a tus formularios de WordPress. Aquí tienes todo lo que cubriré en esta guía:
- Paso 1: Instalar y activar WPForms Pro
- Paso 2: Agrega el campo de cámara a tu formulario
- Paso 3: Configura el campo de cámara de tu formulario
- Step 4: Set Up Button Style, Storage, and Access Settings
- Paso 5: Configurar notificaciones y confirmaciones del formulario
- Paso 6: Probar e incrustar tu formulario
- Preguntas frecuentes sobre la captura de fotos o videos de la cámara en vivo en formularios de WordPress
- Más guías sobre el uso de formularios de WordPress
Paso 1: Instalar y activar WPForms Pro
En esta guía, usaré WPForms, que es el mejor plugin de formularios de contacto para WordPress. Elegí este plugin porque tiene un campo de captura de cámara, que puedes agregar fácilmente con un simple arrastrar y soltar.
También puedes usar WPForms para crear muchos formularios diferentes, incluyendo formularios de contacto, formularios de pedido en línea con pagos, encuestas y sondeos, y suscripciones a boletines informativos.
En WPBeginner, usamos WPForms para todos nuestros formularios: formularios de contacto, solicitudes de migración de sitio, la encuesta anual de lectores y más. Somos grandes admiradores de esta herramienta, y puedes obtener más información sobre ella en nuestra reseña completa de WPForms.
Primero, dirígete al sitio web de WPForms para crear una cuenta. Haz clic en el botón 'Obtener WPForms Ahora', elige un plan que se ajuste a tus necesidades y completa el registro.
💡 Nota: Necesitarás WPForms Pro para acceder a la función de captura de cámara, además de extras como lógica condicional y temas de formularios. Dicho esto, aún puedes comenzar con la versión gratuita de WPForms si deseas probar el plugin primero.
Después de registrarte, deberías poder encontrar el archivo zip del plugin y la clave de licencia en el panel de tu cuenta de WPForms. Puedes mantener esta pestaña abierta o guardar tu archivo y clave en un lugar seguro, como un gestor de contraseñas.
Ahora, vayamos a tu panel de WordPress y naveguemos a Plugins » Añadir nuevo plugin.
En la siguiente pantalla, puedes usar la barra de búsqueda para buscar el plugin WPForms.
Haz clic en ‘Instalar ahora’ en el resultado de la búsqueda y en ‘Activar’ cuando aparezca.
Si necesitas ayuda, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Tras la activación, ve a WPForms » Ajustes desde tu área de administración para activar tu licencia de WPForms Pro.
Simplemente copia tu clave de licencia y pégala en el cuadro. Luego haz clic en el botón ‘Verificar clave’.
WPForms confirmará que tu licencia está activa. Ahora estás listo para empezar a crear formularios con captura de cámara.
Paso 2: Agrega el campo de cámara a tu formulario
En este paso, crearás un formulario con la función de captura de cámara.
Para empezar, puedes navegar a WPForms » Añadir nuevo en el panel de administración de tu WordPress.
Esto te llevará a la página de Configuración, donde puedes nombrar tu formulario.
Esto es solo para tu referencia, pero recomiendo usar un nombre claro y descriptivo para una organización más fácil a medida que creas más formularios de WordPress.
A continuación, elegirás cómo construirás tu formulario.
WPForms te permite crear formularios usando un lienzo en blanco, un constructor de formularios con IA, o una plantilla prediseñada.
Con WPForms AI, todo lo que tienes que hacer es escribir una indicación simple. El constructor de formularios con IA lo generará por ti en pocos segundos.
Para este tutorial, sin embargo, voy a usar la plantilla de formulario de contacto simple.
WPForms viene con más de 2,000 plantillas de formularios prediseñadas, por lo que es fácil encontrar una que se ajuste a tus necesidades.
Si deseas instrucciones paso a paso, consulta nuestra guía sobre cómo crear un formulario de contacto en WordPress.
Una vez que tu formulario se abra en el constructor, mira la barra lateral izquierda donde se enumeran todos los campos del formulario. Desplázate hacia abajo hasta que encuentres la sección etiquetada como 'Fancy Fields'.
Justo ahí, junto al campo de Carga de Archivos, verás el campo ‘Cámara’. Puedes arrastrarlo y soltarlo donde quieras que aparezca en tu formulario.
💡 Nota: El campo Carga de Archivos es ideal para recopilar archivos que los usuarios ya tienen en su dispositivo, como fotos o PDFs guardados. Para este tutorial, el campo Cámara funciona mejor porque permite a los usuarios capturar una foto o video en el momento sin salir del formulario.
Notarás que aparece un pequeño ícono de cámara en la vista previa de tu formulario. Ese es el que tus usuarios harán clic para capturar su foto o video.
Algo que me pareció interesante de esta función es que cuando alguien hace clic en el botón de la cámara en una laptop o computadora de escritorio, verá una cuenta regresiva amigable de 3 segundos antes de la captura. Esto les da tiempo suficiente para sonreír o ajustar su ángulo.
Así es como podría verse en la vista previa:
Ahí lo tienes, ¡te dije que esta parte sería rápida!
Paso 3: Configura el campo Cámara de tu formulario
Desde aquí, puedes configurar tu campo Cámara.
Haz clic en el campo ‘Cámara’ que acabas de agregar para abrir el panel ‘Opciones de Campo’ en el lado izquierdo. Aquí es donde personalizarás cómo funciona la captura de la cámara.
Lo primero que verás es la configuración de ‘Etiqueta’.
Por defecto, el campo se llama Cámara, pero puedes renombrarlo para que coincida con lo que estás recopilando. Por ejemplo: Foto de Perfil, Captura de Error, o Foto de Daño, dependiendo de tu caso de uso.
En ‘Descripción’, puedes agregar una nota corta con detalles o instrucciones adicionales, como qué debe ser visible en la foto o cualquier requisito de calidad.
Por ejemplo:
- “Usa buena iluminación para que la imagen sea clara”, para fotos de perfil.
- “Asegúrate de que todo el texto sea legible”, para capturas de error.
- “Incluya toda la propiedad en el encuadre”, para informes de daños.
Esto mantiene la etiqueta corta y fácil de escanear, y usa la descripción solo como guía útil.
Luego, está la configuración de ‘Formato’, donde verá dos opciones:
- Foto: funciona bien para fotos de perfil, tarjetas de identificación o cualquier situación en la que necesite una instantánea rápida.
- Video: perfecto cuando desea que las personas graben presentaciones cortas, testimonios o expliquen algo que es más fácil de mostrar que de describir.
Por defecto, WPForms lo establece en ‘Foto’, pero puede cambiar entre ellos en cualquier momento.
Ahora, puede desplazarse hacia abajo hasta la configuración de ‘Tamaño máximo de archivo’, donde puede controlar qué tan grande puede ser el archivo enviado por el usuario.
Puede ingresar cualquier número de megabytes (MB) que desee. Si deja esto en blanco, WPForms usará el límite predeterminado de su servidor, que generalmente es de alrededor de 64 MB. También puede aumentar su tamaño máximo de carga de archivos si es necesario.
Recomiendo establecer un límite razonable basado en lo que realmente necesita. Los tamaños de archivo más pequeños ayudan a que sus formularios se carguen más rápido y ahorran espacio en su servidor.
No olvide activar el botón ‘Requerido’ para que los usuarios no puedan omitir este campo.
Si eligió ‘Video’ como formato, también verá una opción de ‘Límite de tiempo’. El valor predeterminado es de 1 minuto y 30 segundos, lo que funciona bien para la mayoría de las situaciones.
🧑💻 Consejo profesional: Los archivos de video pueden volverse grandes y afectar el rendimiento de tu WordPress. Este campo es adecuado para clips cortos (menos de 30 segundos). Pero si necesitas que los usuarios envíen videos largos (más de 5 minutos), es mejor que los suban a un servicio en la nube y compartan el enlace.
Consulta nuestra guía sobre por qué nunca deberías subir un video a WordPress para obtener más información.
Puedes ajustar estas configuraciones para que se adapten a tus necesidades.
Paso 4: Configurar el estilo del botón, el almacenamiento y los ajustes de acceso
Aquí, te guiaré a través de la configuración avanzada para tu campo de Cámara. Aquí es donde ajustarás cómo se ve la función de cámara y dónde se almacenan tus archivos capturados.
Para empezar, cambia a la pestaña ‘Avanzado’ en la parte superior del panel Opciones de Campo.
Vamos a desglosar cada una de estas opciones de configuración.
Personaliza el estilo y el texto del botón de la cámara
Primero, busca el menú desplegable ‘Estilo’. Puedes elegir mostrar un ícono de botón o mostrarlo como un enlace simple.
Normalmente me quedo con el estilo de botón porque es más obvio y fácil de hacer clic, pero la opción de enlace funciona bien si quieres un aspecto más limpio y minimalista.
Justo debajo de eso, verás el campo ‘Texto del Botón de Enlace’. Esta es tu oportunidad para que el botón de la cámara se vea más personal o acorde a tu marca.
En lugar del texto predeterminado, podrías escribir algo como “Toma tu Foto” o “Graba un Video”. Incluso he visto gente usar frases divertidas como “¡Di whisky!” para formularios de fotos de perfil.
Estos pequeños detalles hacen que tu formulario de contacto se sienta más acogedor y menos robótico.
Estiliza más con clases CSS
A continuación, verás el campo Clases CSS. Esto te permite agregar un nombre de clase personalizado para que puedas estilizar este campo de cámara de manera diferente con CSS.
Por ejemplo, podrías agregar una clase como custom-camera-btn aquí. Esto no estiliza el botón automáticamente, pero te permite a ti (o a un desarrollador) agregar CSS personalizado en la configuración de tu tema para apuntar a este botón específico más tarde.
Si quieres agregar más de una Clase CSS, puedes separarlas con espacios, así:camera-field large-button.
Dejaré esto en blanco para mantener el estilo consistente con el resto de los campos de mi formulario.
Elige dónde almacenar los archivos capturados
Por defecto, WPForms guarda todas las fotos y videos capturados en la carpeta ‘Subidas’ de tu sitio, específicamente dentro del directorio WPForms.
Pero si prefieres mantener todos tus archivos multimedia en un solo lugar, activa la opción que dice ‘Guardar archivo en Biblioteca de Medios de WordPress’.
Solo recuerda que los archivos en la Biblioteca de Medios a menudo son más fáciles de acceder para el público, así que mantén esta configuración desactivada si estás recopilando documentos confidenciales.
🧑💻 Consejo profesional: También puedes conectar WPForms con Dropbox o Google Drive si deseas almacenar archivos externamente. Esto es útil si te preocupa usar demasiado espacio del servidor o si deseas copias de seguridad automáticas en la nube.
Sin importar dónde almacenes los archivos, siempre podrás verlos en tu panel de ‘Entradas’, adjuntos a cada envío de formulario.
Restringir el acceso a los archivos subidos
Si tu formulario recopila información confidencial, como fotos de identificación o documentos personales, querrás restringir quién puede ver estos archivos. Desplázate hacia abajo y activa ‘Habilitar restricciones de acceso a archivos’.
Una vez que habilites esto, obtendrás dos opciones de seguridad. La primera es que puedes limitar el acceso para que solo los usuarios registrados de WordPress puedan ver los archivos.
La otra opción es agregar protección con contraseña a tu formulario para una capa adicional de seguridad.
Esto es especialmente importante para formularios utilizados en atención médica, servicios legales o cualquier otro contexto donde manejes información privada.
Sin estas restricciones, cualquiera con la URL del archivo podría ver los medios subidos.
Puedes tomarte tu tiempo configurando estas opciones avanzadas antes de continuar.
Paso 5: Configurar notificaciones y confirmaciones del formulario
Ahora que tu campo de cámara está funcionando, necesitas asegurarte de que realmente te notifiquen cuando alguien envíe tu formulario.
Para hacer esto, puedes ir a Configuración » Notificaciones en el constructor de formularios.
WPForms configura automáticamente una notificación básica por correo electrónico que se envía a la dirección de correo electrónico de administrador de tu WordPress. Cada vez que alguien envíe tu formulario con una foto o video capturado, recibirás un correo electrónico con todos los detalles.
Puedes personalizar quién recibe estas notificaciones cambiando el campo 'Enviar a la dirección de correo electrónico'. Si deseas que se notifique a varias personas, simplemente ingresa todas las direcciones de correo electrónico, separándolas con comas.
También puedes usar una etiqueta inteligente para enviar notificaciones dinámicamente, por ejemplo, a la dirección de correo electrónico enviada en el formulario.
Consulta nuestra guía sobre cómo crear un formulario de contacto con múltiples destinatarios para obtener más detalles.
El correo electrónico de notificación incluirá un enlace directo para ver la foto o el video capturado. Esto te permite previsualizar el archivo inmediatamente desde tu bandeja de entrada sin tener que iniciar sesión primero en el panel de WordPress.
💡 Nota: WordPress no siempre envía correos electrónicos de manera confiable, y a veces las notificaciones del formulario van a spam o no se envían en absoluto. Para solucionar esto, recomiendo usar el plugin WP Mail SMTP. Para más detalles, consulta cómo solucionar el problema de que WordPress no envía correos electrónicos.
Después de que alguien envía tu formulario, necesita saber que fue exitoso.
Vayamos al panel de 'Confirmaciones' para decidir qué sucede después de que alguien envía el formulario:
- La confirmación de Mensaje – muestra un simple mensaje de texto en la misma página después del envío, como "¡Gracias! Hemos recibido tu envío."
- La confirmación de Mostrar Página – redirige a las personas a una página diferente en tu sitio. Esto funciona bien si deseas enviarlos a una página de agradecimiento personalizada con más información.
- La confirmación de redirección – envía a las personas a cualquier URL que desees, incluso a un sitio web diferente. He usado esto para enviar a las personas a una página de reserva o a una oferta especial después de que envíen el formulario.
Puedes elegir la opción que tenga más sentido para tu situación.
Normalmente me quedo con la confirmación de 'Mensaje' porque es simple y las personas saben de inmediato que su envío funcionó.
Si también quieres usarla, te recomiendo reescribir el mensaje predeterminado para que coincida con la voz de tu marca:
Paso 6: Probar e incrustar tu formulario
Antes de compartir tu formulario con el mundo, necesitas asegurarte de que la captura de la cámara realmente funcione.
Comienza haciendo clic en el botón 'Guardar' en la parte superior derecha del constructor de formularios para guardar todos tus cambios.
Ahora previsualicemos este formulario en una página para que puedas probarlo.
Haz clic en el botón 'Vista previa' para abrir la vista previa de tu formulario en una nueva pestaña.
En la vista previa, puedes completar los campos de tu formulario con datos ficticios.
Para asegurarte de que la validación funcione, intenta ingresar un error tipográfico o dejar un campo obligatorio en blanco.
A continuación, haz clic en el botón de la cámara en tu formulario.
Tu navegador te pedirá permiso para acceder a tu cámara. Haz clic en 'Permitir esta vez' o 'Permitir mientras visitas el sitio' para otorgar el permiso.
Nota: Por razones de seguridad, algunos navegadores bloquearán el acceso a la cámara si tu sitio no está utilizando HTTPS. Asegúrate de que un certificado SSL esté instalado, de lo contrario, el botón de la cámara no funcionará.
Ahora deberías verte en pantalla con una cuenta regresiva de 3 segundos. Sonríe y deja que capture tu foto o video.
Cuando hayas completado todo, haz clic en ‘Enviar’ y comprueba si tu mensaje de confirmación aparece correctamente. Luego, puedes hacer clic en el enlace ‘Ver entradas’ para ver si el envío del formulario se realizó con éxito.
En la siguiente pantalla, deberías ver tu prueba de envío.
En la columna Acciones, haz clic en ‘Ver’ para ver la entrada.
Ahora, puedes desplazarte hacia abajo para ver tu foto o video capturado adjunto allí mismo.
Así es como se ve en mi pantalla:
Una vez que todo esté en orden, puedes agregar este formulario a tu sitio web de WordPress.
Haz clic en el botón ‘Incrustar’ para iniciar el asistente.
Esto abrirá una ventana emergente donde puedes seleccionar una página existente o crear una nueva para tu formulario.
- Seleccionar página existente: Un menú desplegable mostrará todas las páginas de tu sitio de WordPress.
- Crear página nueva: Aparecerá un campo de ‘Nombra tu página’ para que ingreses un título.
Para esta guía, elegiré ‘Crear página nueva’.
A continuación, ingresa un nombre para tu nueva página, por ejemplo, yo la llamaré “Formulario de contacto”.
Haz clic en ‘¡Vamos!’
Luego, accederás al editor de bloques de la página con tu formulario ya cargado.
Desde aquí, puedes ajustar la ‘Configuración del formulario’ en el panel derecho.
Por defecto, el título del formulario está oculto, así que quizás quieras activarlo para dar más contexto a los visitantes. También puedes habilitar la descripción si has agregado una.
Para que se vea aún mejor, da estilo al formulario para que coincida con el tema de tu sitio.
Continúa y elige un tema de la sección Temas.
Cuando estés satisfecho con cómo se ve, haz clic en ‘Guardar’.
Hecho esto, publica o actualiza tu página y haz clic en ‘Ver página’ para ver la versión en vivo en tu sitio de WordPress:
Para más detalles, consulta nuestra guía sobre cómo incrustar formularios en WordPress.
🧑💻 Consejo Pro: Una vez que incrustes tu formulario, asegúrate de abrir la página en tu dispositivo móvil para verificar que la cámara se abra sin problemas y se sienta natural en una pantalla más pequeña.
Preguntas frecuentes sobre la captura de fotos o videos de la cámara en vivo en formularios de WordPress
Antes de terminar, aquí tienes respuestas a algunas preguntas comunes que la gente tiene sobre el uso de cargas de cámara y campos de archivo en formularios.
¿Cómo recopilo fotos en Google Forms?
Google Forms admite la carga de archivos, pero carece de un campo dedicado de Cámara Inteligente. Si bien los usuarios pueden seleccionar manualmente un archivo, WPForms ofrece una integración perfecta que activa la cámara directamente, lo que hace mucho más rápido para los usuarios tomar y enviar fotos.
¿Pueden los formularios de WordPress tener una cámara?
Sí. Algunos complementos de formularios de WordPress, como WPForms, admiten un campo de cámara que permite a los usuarios tomar fotos o grabar videos directamente desde su dispositivo y enviarlos con el formulario.
¿Qué es un campo de carga de archivos?
Un campo de carga de archivos permite a los usuarios adjuntar archivos como imágenes, PDFs o videos al enviar un formulario. Es útil para cosas como cargas de fotos, currículums o documentos.
¿Cómo tomo una foto en los formularios de WordPress?
Agregas un campo de cámara o carga de archivos a tu formulario usando un complemento de formularios que lo admita, como WPForms. Cuando los usuarios abren el formulario en un dispositivo con cámara, pueden tomar una foto directamente en lugar de cargar un archivo existente.
¿Pueden los formularios de WordPress tomar fotos con la cámara web?
Sí. Si el complemento de formularios admite la entrada de cámara en vivo, los usuarios pueden tomar fotos usando su cámara web en un escritorio o la cámara de su teléfono y enviarlas de inmediato.
Más guías sobre el uso de formularios de WordPress
Espero que este tutorial te haya ayudado a agregar un campo de cámara para permitir a los usuarios tomar fotos o videos en vivo directamente en tus formularios de WordPress.
A continuación, es posible que desees aprender:
- Cómo agregar opciones de imagen en formularios de WordPress
- Cómo mostrar un formulario de contacto flotante en WordPress
- Cómo usar formularios de contacto para hacer crecer tu lista de correo en WordPress
- Formas de usar la lógica condicional en formularios de WordPress
- Guía Definitiva para Usar Formularios de WordPress (Todo lo que Necesitas Saber)
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
¿Tienes alguna pregunta o sugerencia? Por favor, deja un comentario para iniciar la discusión.