Cómo configurar el widget de lista configurable

Con el widget de Lista Configurable, puede definir y mostrar un conjunto de campos o preguntas en su formulario. Los encuestados pueden agregar y responder ese conjunto tantas veces como usted lo permita. Esto resulta útil cuando necesita repetir el mismo conjunto de preguntas varias veces.

Watch on youtube

How to Set Up a Configurable List Widget With Jotform [Updated 2024]

Configurar el widget

Para usar el widget de Lista Configurable

1. En el Creador de formularios, seleccione Añadir elemento en la esquina superior izquierda.

2. En Elementos de Formulario, vaya a Widgets en la parte superior.
3. Busque y seleccione Lista Configurable.

4. Configure los campos en Configuración de widgets.

A continuación, se muestra la lista y la sintaxis de los tipos de campo compatibles que puede usar en su lista.

• Texto
• Número
• Área de Texto
• Desplegable
• Botón de Radio
• Casilla de Verificación
• Entrada de Fecha
• Entrada de Hora
• Fecha
• Hora
• Estático

texto

Acepta texto sin formato de una sola línea.

[etiqueta]:texto[:place_holder]

Ejemplos:

• Nombre: texto
• Email: texto: Escriba aquí…

número

Acepta solo números.

[etiqueta]:número[:place_holder:paso,min,max]

Ejemplo:

• Cantidad: número
• Edad: número: Introduzca su edad
• Calificación: número: 1, 1, 10

área de texto

Acepta texto sin formato y saltos de línea.

[etiqueta]:área de texto[:place_holder]

Ejemplo:

• Notas: área de texto
• Comentarios: área de texto: Escriba aquí…

desplegable

Muestra una lista de opciones en un menú desplegable..

[etiqueta]:desplegable:opción1[,opción2,...:place_holder]

Para seleccionar una opción de forma predeterminada, reemplace place_holder por una de las opciones de la lista.

Ejemplos:

• Pizza: desplegable: Queso, Pepperoni, Salchicha
• Tamaño: desplegable: Pequeño, Mediano, Grande: Por favor seleccione
• Bebida: desplegable: Manzana, Naranja, Piña: Naranja

radio

Permite seleccionar una única opción de entre las disponibles.

[etiqueta]:radio:opción1[,opción2,...]

Ejemplos:

• Orden: radio: Recoger, Entregar
• Vegetal: radio: Zanahoria, Rábano, Brócoli

casilla de verificación

Permite seleccionar una o varias opciones.

[etiqueta]:casilla de verificación:opción1[,opción2,...]

Ejemplos:

• Complementos: casilla de verificación: Refresco, Ensalada, Papas fritas
• Salsa: casilla de verificación: Dulce, Agrio, Picante

entrada de hora

Un selector de hora con una ventana emergente.

[etiqueta]:hora[:formato,ahora]

• Los valores permitidos para el formato son 12 (con selector AM/PM) y 24. Si no se especifica un valor o este no es válido, el formato predeterminado es 12.
• Para establecer la hora actual como valor predeterminado, agregue “,ahora” a la declaración.

Ejemplos:

• Hora de llegada: hora
• Hora actual: hora: 12, ahora

estático

Muestra un mensaje o texto.

[etiqueta]:estático:[texto]

Puede incluir algunas etiquetas HTML básicas relacionadas con el texto.

Ejemplos:

• Nota: estático: Estamos abiertos 24/7.
• Consejo: estático: Haga clic en el botón <strong>Agregar fila</strong> para agregar más.

Configurar Campos como “Requeridos”

Para evitar que quienes completen el formulario omitan los campos obligatorios, puede configurarlos como “requeridos” agregando un asterisco (“*”) al comienzo de la declaración del campo.

Quienes completen el formulario no podrán enviarlo mientras haya campos obligatorios vacíos.

Configurar otras opciones

En el panel Configuración de widgets, ubicado a la derecha, desplácese hacia abajo en la pestaña General para ver más opciones de configuración del widget.

Estas son las opciones disponibles:

• Número mínimo de filas: El número mínimo de conjuntos de campos que se mostrarán en el formulario.
• Número máximo de filas: El número máximo de conjuntos de campos permitidos en el formulario. Un valor de 0 significa que no hay límite.
• Etiqueta para Agregar: El texto que aparecerá en el botón Agregar.

Cambiar el aspecto de la lista

Con frecuencia es necesario personalizar el estilo del formulario para que tenga exactamente la apariencia que desea, ya sea para que coincida con la imagen de su producto o con la identidad de su marca, entre otras razones. Con este widget, puede personalizar aún más la apariencia de la lista agregando su propio código CSS.

Para aplicar CSS personalizado

1. Seleccione el icono de la varita mágica del widget para abrir Configuración de widgets.
2. En el panel Configuración de widgets, ubicado a la derecha, vaya a la pestaña Añadir CSS.
3. Introduce tus códigos CSS personalizados en el área de texto.
4. Cuando hayas terminado, selecciona Actualizar Widget en la parte inferior para guardar tus cambios.