Definir el ancho del contenedor del campo para diferentes dispositivos (responsive)

Esta guía explica cómo establecer el ancho que un campo ocupará dentro del formulario, permitiéndote optimizar el diseño para diferentes pantallas (Desktop, Tablet y Mobile).

Un campo con un ancho del 100% ocupará toda la fila, mientras que un campo al 50% permitirá colocar dos campos uno al lado del otro en la misma fila.


Procedimiento para Definir el Ancho del Campo

1. Accede a la Configuración del Campo:

Dentro de la sección Campi de tu formulario, abre la configuración del campo que deseas modificar.

2. Ubica el Ancho del Campo:

Desplázate por la configuración del campo hasta encontrar la opción etiquetada:

  • Larghezza campo

3. Selecciona el Tamaño Responsive:

Haz clic en el menú desplegable Larghezza campo. Este menú está dividido en grupos por tipo de dispositivo: Desktop, Tablet y Mobile.

4. Establece el Ancho por Dispositivo:

Para cada grupo de dispositivos, selecciona el porcentaje de ancho deseado. Puedes seleccionar un ancho diferente para cada tipo de pantalla:

DispositivoOpciónDescripción
Desktop100%El campo ocupa toda la fila (1/1).
Desktop50%El campo ocupa la mitad de la fila (1/2).
Desktop33%El campo ocupa un tercio de la fila (1/3).
Desktop66%El campo ocupa dos tercios de la fila (2/3).
Desktop25%El campo ocupa un cuarto de la fila (1/4).
Tabletmismas opcionesAncho aplicado en pantallas medianas.
Mobilemismas opcionesAncho aplicado en pantallas pequeñas (smartphones).

Nota: Si no especificas un ancho para un dispositivo, se aplicará el ancho predeterminado (usualmente 100%).

5. Guarda los Cambios:

Después de establecer los anchos deseados para todos los dispositivos, asegúrate de guardar los cambios tanto en el campo como en todo el formulario.


Configuración del Ancho para el Botón de Envío

También es posible definir el ancho para el botón de envío (Submit):

1. Accede a la Sección Generales:

En el modo edición del Formulario, ve al paso Generali y desplázate hasta la sección Pulsante di invio.

2. Encuentra la Configuración:

Ubica la opción etiquetada:

  • Larghezza campo

3. Selecciona el Tamaño:

Usa el menú desplegable para seleccionar el ancho del botón para Desktop, Tablet y Mobile (por ejemplo, 1/1 para 100%, 1/2 para 50%, etc.).

4. Guarda el Formulario:

Guarda todo el formulario para aplicar el nuevo ancho al botón.