El Editor visual permite agregar y modificar las preguntas de un webform sin escribir código. Úselo para armar formularios simples o ajustar uno existente. Cada campo que agrega o edita queda guardado de inmediato en la estructura del formulario.

Antes de comenzar

• El formulario ya debe estar creado (vea Como crear un Webform).
• Defina en qué grupo irá cada campo. Los grupos se crean en el JSON (fields_groups).

Agregar un campo

1. Ingrese a Menú principal → WebForms → Formularios, presione Ver en el formulario y abra la pestaña Configuración.
2. Presione Editor visual. Se abre la ventana Campos con la vista previa del formulario.
3. Presione Agregar campo.
4. Ingrese la Clave del Campo (identificador único, sin espacios) y la Etiqueta del Campo (la pregunta).
5. Si lo necesita, ingrese una Descripción del Campo: aparece como ayuda bajo la etiqueta.
6. Seleccione el Tipo de Campo: Texto, Área de Texto, Número, Fecha, Radio, Radio Button, Checkbox, Select, Archivo o Archivo (Imagen).
7. En Campo Requerido?, elija Si para que sea obligatorio. Se marcará con (*).
8. Para Select, Radio o Radio Button, ingrese los Valores separados por punto y coma. En Radio Button puede asignar un color con Etiqueta::color, por ejemplo Si::green;No::red;N/A::gray.
9. Complete Placeholder (texto de ejemplo), Class (opcional) y Grupo del Campo (número del grupo).
10. Presione Agregar Campo. Verá «Campo agregado correctamente». Presione Volver al formulario.

Editar un campo

1. En el Editor visual, presione [ Editar ] sobre el campo.
2. Cambie los atributos necesarios.
3. Presione Actualizar Campo.

Eliminar un campo o crear grupos

El editor visual no elimina campos ni crea grupos. Hágalo en la pestaña Configuración: edite el JSON de Estructura campos formulario (quite el bloque del campo o agregue un elemento en fields_groups) y presione Guardar.

Resultado esperado

La ventana Campos del editor visual muestra cada campo con su tipo, obligatoriedad y opciones, y la estructura queda guardada en la pestaña Configuración.

Artículos relacionados: Como crear un Webform · Usos avanzados de webform .