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 Desktop, 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: Desktop, Tablet y Móvil.
- Desktop — es la base por defecto. Todo lo que configures aquí sirve de referencia para los demás dispositivos.
- Tablet — hereda automáticamente las configuraciones del Desktop. Personaliza cuando quieras algo diferente.
- Móvil — hereda del Desktop por defecto, pero con adaptaciones automáticas para garantizar una buena experiencia (botones más grandes, imágenes reposicionadas, etc.).
Cuando el campo seleccionado tiene algún ajuste específico para Tablet o Móvil, aparece un punto azul discreto en la pestaña de ese dispositivo. Pasa el mouse para ver los detalles.
Layouts disponibles en cada dispositivo
En Desktop 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.
Cómo crear un ajuste específico para Móvil o Tablet
- Haz clic en la pestaña Móvil (o Tablet) encima del lienzo.
- 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 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.
- 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.
Cómo eliminar un ajuste específico (volver a heredar del Desktop)
Si quieres deshacer el ajuste y que Móvil o Tablet vuelvan a heredar del Desktop:
- Haz clic en el punto azul al lado de la propiedad.
- El ajuste se elimina y esa propiedad vuelve a usar lo configurado en Desktop.
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.
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 Desktop 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
- Cómo definir el punto focal y el ajuste de imagen
- Cómo cambiar la posición de tu imagen
- Cómo añadir video, GIF, imagen o logo a tu formulario
Soporte
Si tienes alguna duda o sugerencia, envía un correo a [email protected]
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 Desktop, y usa el punto azul tanto como indicador como atajo para revertir un ajuste.