Ir al contenido

El editor

Al terminar esta página vas a saber cómo está organizada la pantalla de edición, cómo seleccionar y cambiar cualquier parte de un formulario, y cómo funciona guardar.

El editor tiene dos columnas:

  • El lienzo, a la izquierda. Es el formulario real, dibujado con el mismo código y los mismos estilos que recibe un visitante — no es una maqueta. Si cambias el diseño del formulario, el lienzo cambia con él.
  • El panel lateral, a la derecha, con dos pestañas: Añadir campos y Ajustes del campo. Seleccionar cualquier elemento cambia el panel a sus ajustes automáticamente.

La barra superior tiene el título del formulario, su shortcode, un enlace de Vista previa, el interruptor Vista previa oscura / Vista previa clara, y Guardar formulario.

El editor de formularios con “Contacto avanzado” abierto: el lienzo en vivo a la izquierda, el selector de campos a la derecha.

Haz clic en cualquier campo del lienzo para ver sus ajustes en Ajustes del campo. Hay otras dos cosas que se pueden seleccionar:

  • Formulario, la etiqueta arriba a la izquierda del lienzo. Contiene el diseño de todo el formulario: marco, encabezado, colores, tipografía y, en la versión Pro, varias páginas.
  • Botón de envío, al final del formulario. Siempre queda al final — no tiene asa de arrastre y no se puede mover ni quitar. Contiene su propio texto, alineación, ancho, tamaño y color (ver Diseño), y los ajustes de las notificaciones por correo y la confirmación.

En Añadir campos, haz clic en un tipo de campo. El campo nuevo se agrega al final del formulario. Consulta Tipos de campo para saber qué hace cada uno.

Cada campo tiene una pequeña barra de herramientas con estas acciones:

  • Arrastrar el asa para mover el campo con el mouse.
  • Subir y Bajar hacen lo mismo con un clic, o desde el teclado.
  • Duplicar campo.
  • Quitar campo, después de pedir confirmación.

La primera vez que abres un formulario recién creado y vacío, el editor muestra nueve plantillas para empezar — ver Plantillas. Cada miniatura es una versión pequeña del formulario real, no un dibujo, así que lo que ves es lo que obtienes. Esta pantalla solo aparece para un formulario que todavía no tiene campos; en cuanto guardas algo, desaparece para siempre en ese formulario.

Vista previa abre el formulario real y publicado en una pestaña nueva del navegador. Solo aparece una vez que el formulario se guardó al menos una vez, y siempre muestra la última versión guardada — no los cambios que todavía estás editando.

Vista previa oscura y Vista previa clara, en la barra superior, solo cambian cómo se ve el lienzo mientras trabajas. Nunca cambian el formulario en sí: el modo que ven los visitantes se decide en Formulario → Colores → Modo de color (ver Diseño). El lienzo nunca sigue el modo claro/oscuro de tu propio sistema operativo — solo un clic explícito — así puedes revisar siempre las dos versiones, sin importar cómo esté configurada tu computadora.

El editor funciona completo sin mouse y sin JavaScript — reordenar con Subir / Bajar simplemente recarga la página. Con JavaScript activo, conviene saber:

  • En la lista de notificaciones y confirmaciones, presionar Enter o Espacio sobre una fila abre su ventana de edición; el interruptor, duplicar, quitar y mover de esa fila siguen respondiendo a su propia tecla sin abrirla.
  • Solo una fila puede estar «prestada» a la ventana de edición a la vez.
  • Cerrar la ventana (Listo, Cancelar, × o Esc) devuelve el foco a la fila que estabas editando.
  • El asa de ancho de un campo también responde a las flechas izquierda y derecha del teclado, moviéndolo en pasos de la rejilla de 12 columnas.

Continúa con Tipos de campo para ver todo lo que un formulario puede pedir.