Skip to main content

Cómo personalizar el layout del formulario por dispositivo (móvil, tablet y desktop)

Aprende a usar el selector de dispositivos del editor para crear layouts y ajustes específicos para móvil, tablet y desktop, garantizando que tu formulario se vea perfecto en cualquier pantalla.

La mayoría de las personas hoy completa formularios en el celular, pero tu público también accede desde una notebook o tablet. Para garantizar que tu formulario se vea impecable en cualquier dispositivo, Yay! Forms te permite visualizar y personalizar el layout específicamente para Escritorio, Tablet y Móvil, sin necesidad de mantener tres formularios distintos.

Cómo funciona el selector de dispositivos

Encima del lienzo de edición, verás una barra con tres opciones: Escritorio, Tablet y Móvil.

  • Escritorio: es la base por defecto. Todo lo que configures aquí sirve de referencia para los demás dispositivos.
  • Tablet: hereda automáticamente las configuraciones de Escritorio. Personaliza cuando quieras algo diferente.
  • Móvil: hereda de Escritorio por defecto, pero con adaptaciones automáticas para garantizar una buena experiencia (botones más grandes, imágenes reposicionadas, etc.).

Barra de dispositivos con Escritorio seleccionado y un punto azul en la pestaña Móvil

Layouts disponibles en cada dispositivo

En Escritorio y Tablet, tienes 7 opciones de layout para la imagen/video:

  • Fondo (Full)
  • Lateral izquierda (Float-left)
  • Lateral derecha (Float-right)
  • Dividido a la izquierda (Split-left)
  • Dividido a la derecha (Split-right)
  • Banner superior
  • Banner medio

En Móvil, algunos layouts se adaptan automáticamente, porque mitad-mitad lado a lado en una pantalla de 6 pulgadas no funciona bien:

  • Dividido (izquierda/derecha) → se convierte automáticamente en “imagen arriba, contenido abajo”.
  • Lateral (Float) → se convierte en “imagen en línea encima del contenido”.

Los layouts que puedes elegir directamente en modo Móvil son 4: Fondo, Split superior (vertical), Banner superior y Banner medio. Split superior es exclusivo de Móvil: divide la imagen arriba y el contenido abajo, con altura fija, optimizado para pantallas verticales.

El panel IMAGEN / VÍDEO en Escritorio, con las 7 opciones de Layout, el selector Ajuste de imagen y el Punto focal

El panel IMAGEN / VÍDEO en modo Móvil, con las 4 opciones de Layout y los campos Altura, Ancho y Texto alternativo

Cómo crear un ajuste específico para Móvil o Tablet

  1. Haz clic en la pestaña Móvil (o Tablet) encima del lienzo.
  2. Realiza el ajuste deseado en la barra lateral derecha. Cada propiedad puede tener un valor diferente por dispositivo: Layout, Altura, Ancho, Ajuste de imagen, Punto focal e incluso el Texto alternativo. El caso más común es mantener la misma imagen en todos los dispositivos y variar solo estas configuraciones para que se ajuste bien a cada pantalla; pero también puedes cambiar la imagen en sí, si lo prefieres.
  3. Al cambiar algo en modo Móvil o Tablet, aparece un punto azul al lado de la propiedad modificada, indicando que tiene un ajuste específico para ese dispositivo.

El punto azul al lado de la propiedad Layout en modo Móvil, indicando un ajuste específico para ese dispositivo

Cómo eliminar un ajuste específico (volver a heredar de Escritorio)

Si quieres deshacer el ajuste y que Móvil o Tablet vuelvan a heredar de Escritorio:

  1. Haz clic en el punto azul al lado de la propiedad.
  2. El ajuste se elimina y esa propiedad vuelve a usar lo configurado en Escritorio.

El punto sigue presente en la pestaña del dispositivo mientras al menos una propiedad del campo tenga un override. Cuando se eliminan todos, desaparece.

Barra de dispositivos con el punto azul en la pestaña Móvil

Buenas prácticas

  • Empieza por el Móvil. Como el tráfico primario de respuestas en formularios suele venir desde móvil, configura y visualiza el Móvil primero — ese es el escenario donde tu formulario tiene que ser perfecto.
  • Luego cambia a Tablet y Escritorio para verificar cómo quedó y ajustar lo que necesites en esas pantallas.
  • Personaliza por dispositivo solo cuando sea realmente necesario. Cada override aumenta el mantenimiento de tu formulario con el tiempo.

Recursos relacionados

Soporte

Si tienes alguna duda o sugerencia, envía un correo a help@yayforms.com

Conclusión

Con la barra de dispositivos en el lienzo y el sistema de overrides marcados con punto azul, puedes garantizar que tu formulario se vea impecable en cualquier pantalla, sin mantener formularios paralelos. Empieza por el Móvil (donde suele estar la mayor parte de tu tráfico), ajusta lo que necesites para Tablet y Escritorio, y usa el punto azul tanto como indicador como atajo para revertir un ajuste.