Saltar al contenido principal

El espacio del Form Builder

Navega el editor del Form Builder—esquema, lienzo, paleta y vistas previas.

Video próximamente

Espacio del Form Builder

id: academy-builder-workspace · ~2–4 min

Graba este video y agrega src en <LessonVideo id="academy-builder-workspace" />.
Form Builder v2
Text
List
Image
Sign
Boceto animado del outline, chips de paleta y zona de soltar en el lienzo.

Audiencia: Admin

El editor del Form Builder es un espacio de tres paneles más una barra superior. Conocer cada zona te permite construir más rápido y detectar problemas de diseño antes del despliegue móvil.

Diseño del editor

Esquema (izquierda)

El esquema lista cada campo de la página actual en orden. Úsalo para:

  • Ir a un campo sin desplazarte por el lienzo
  • Buscar campos por etiqueta
  • Arrastrar campos para reordenar dentro de la página
  • Ver el tipo de campo de un vistazo

Las páginas aparecen como pestañas en el esquema. Cambia de página para editar formularios de varios pasos.

Lienzo (centro)

El lienzo es el diseño vivo del formulario. Arrastra campos desde la paleta o haz clic en un elemento para añadirlo al final. Los campos seleccionados muestran controles de edición y acciones rápidas.

Los campos de media anchura van lado a lado en escritorio; se apilan en viewports estrechos y en móvil.

Paleta (izquierda, bajo el esquema)

La paleta agrupa los tipos de campo disponibles:

  • Estructura — Encabezado, FieldSet
  • Básicos — Cuadro de texto, Número, Área de texto, Selector de fecha, Párrafo
  • Selección — Casillas, Botones de radio
  • Avanzados — Lista, Fórmula
  • Medios — Imagen, Firma

Arrastra un chip al lienzo o haz clic para añadir.

Panel de propiedades (derecha)

Con un campo seleccionado, el panel de propiedades muestra etiqueta, clave interna, texto de ayuda, anchura, obligatorio y opciones según el tipo. Los cambios se reflejan al instante en el lienzo.

Modos de vista previa

Usa el conmutador de vistas sobre el lienzo para validar el formulario desde distintos ángulos:

ModoPara qué sirve
EscritorioVista de edición por defecto; diseño multicolumna
MóvilVista previa en marco de teléfono con diseño apilado
PDFSalida imprimible, saltos de página, copia de aprobación
JSONDefinición en bruto para desarrolladores; edita y aplica con cuidado

Revisa siempre Móvil antes de guardar formularios en producción.

Reordenar y páginas

  • Reordenar en el lienzo — arrastra campos dentro de una fila o a otra fila.
  • Reordenar en el esquema — arrastra elementos de la lista arriba o abajo.
  • Páginas — usa Añadir página en la barra del lienzo. Mueve o copia campos entre páginas desde las acciones del campo.
  • Eliminar página — los campos pasan a la página 1; confirma antes de borrar.

Guardar

Pulsa Guardar en la barra cuando el formulario esté listo. Chekku confirma que guardar publica la última definición en la app. Las ediciones sin guardar muestran un contador; si sales, te pedirá descartar o quedarte.

La pestaña Ajustes (aparte del Editor) concentra nombre, notificaciones y reglas de tipos de visita—configúrala antes del primer guardado cuando puedas.

Consejos

  • Mantén abierto el esquema en formularios largos: es más rápido que desplazarte.
  • Usa la vista Móvil tras cambiar anchuras de columna o añadir páginas.
  • La vista PDF detecta saltos de página incómodos antes de que el equipo imprima copias.
  • Guarda tras reestructuraciones grandes para poder usar el historial de edición.

Enlaces relacionados