# Entender el editor

Un recorrido rápido por el creador de formularios y dónde encontrar cada función.

## Entender el editor

Un recorrido por el creador de formularios — dónde está todo y cómo moverte rápido.

<h2 id="layout">Vista general del diseño</h2>

  <p>El editor es un lienzo único de estilo documento — escribe, inserta bloques y organízalos como un doc. Tres áreas hacen el trabajo:</p>
  <ul>
    <li>
      <strong>Barra de herramientas superior</strong> — <strong>Editar</strong>, <strong>Traducir</strong> y <strong>Vista previa</strong>,
      luego Configuración, Tema, el indicador de incidencias y <strong>Publicar</strong>. Publicar aparece siempre que haya algo que
      publicar. Después de tu primera publicación se les unen <strong>Envíos</strong>, <strong>Compartir</strong> e{' '}
      <strong>Historial de publicaciones</strong>, y <strong>Revertir cambios no publicados</strong> aparece siempre que un borrador difiere
      de lo que está en vivo
    </li>
    <li>
      <strong>Lienzo (centro)</strong> — tu formulario tal como lo verán los encuestados, con una imagen de portada y logotipo opcionales en
      la parte superior
    </li>
    <li>
      <strong>Chat de IA</strong> — botón flotante en la esquina inferior derecha; abre un panel lateral donde puedes pedirle a la IA que
      cree o edite tu formulario
    </li>
  </ul>
  <p>La barra lateral del espacio de trabajo a la izquierda contiene la navegación por todos tus formularios.</p>

<p>
  Junto a Publicar está el <strong>indicador de incidencias</strong>, un semáforo para la comprobación de preparación: verde cuando el
  formulario está listo, ámbar para advertencias, rojo para errores. Haz clic para ver lo que encontró — cada entrada enlaza al lugar donde
  se corrige. Los errores bloquean la publicación. Las advertencias no, pero Formstep pregunta primero y se ofrece a corregirlas por ti.{' '}
  <a href="/es/building-forms/publish-checks">Comprobaciones de publicación</a> enumera cada hallazgo y cómo resolverlo.
</p>

<h2 id="cover-logo">Portada y logotipo</h2>
<p>
  Encima del título del formulario, usa <strong>Agregar portada</strong> y <strong>Agregar logo</strong>. El selector tiene cuatro pestañas
  — <strong>Subir</strong> (PNG, JPG o WebP hasta 5&nbsp;MB), <strong>Colores</strong> para un color sólido, <strong>Unsplash</strong> e{' '}
  <strong>Iconos</strong>. Arrastra una portada hacia arriba o hacia abajo para reposicionarla. Solo lo que subes cuenta para tu
  almacenamiento.
</p>

<h2 id="adding-blocks">Añadir una pregunta o contenido</h2>

  <p>
    Haz clic en una línea vacía del lienzo y escribe <kbd>/</kbd> — o pulsa <kbd>Cmd/Ctrl + /</kbd> — para abrir el menú de bloques. Sigue
    escribiendo para filtrar. Cuatro categorías, en este orden:
  </p>
  <ul>
    <li>
      <strong>Bloques básicos</strong> — Encabezado 1&ndash;3, Lista con viñetas, Lista numerada
    </li>
    <li>
      <strong>Campos de formulario</strong> — todos los tipos de pregunta, de Entrada de texto a Pago y Programar cita
    </li>
    <li>
      <strong>Diseño</strong> — Tabla, 2 columnas, Grupo repetible, Lógica, Campo oculto, Campo calculado, Salto de página, Página de
      agradecimiento
    </li>
    <li>
      <strong>Multimedia</strong> — Imagen, Incrustación de YouTube, Incrustación de Google Maps, Incrustar cualquier cosa
    </li>
  </ul>
  <p>
    El menú solo ofrece lo que encaja donde está el cursor: nada de preguntas ni lógica en una página de agradecimiento, nada de bloques
    exclusivos del nivel superior dentro de una columna. Consulta <a href="/es/building-forms/field-types">Tipos de preguntas</a> para el
    catálogo completo y <a href="/es/building-forms/form-structure#block-menu">Estructura del formulario → Menú de bloques</a> para lo que
    ofrece el controlador de arrastre.
  </p>

> 💡 **Solo describe lo que necesitas**
> <p>
>     ¿No tienes ganas de explorar el menú? Abre el chat de IA y di <em>&ldquo;añade un número de teléfono y un selector de fecha&rdquo;</em>.
>     Insertará los campos por ti.
>   </p>

<h2 id="block-actions">Seleccionar y cambiar bloques</h2>

<p>
  Haz clic en el controlador de arrastre de un bloque para abrir su menú. Lo que ofrece depende del bloque: <strong>Convertir en</strong>,{' '}
  <strong>Opciones</strong>, <strong>Validación</strong>, alinear, crear grupo repetible, insertar, duplicar, mover, ocultar y eliminar.
</p>

<p>
  Selecciona varios bloques arrastrando un rectángulo alrededor de ellos, haciendo shift-clic en un segundo bloque para tomar el rango, o
  pulsando <kbd>Cmd/Ctrl+A</kbd> una vez para el texto del bloque actual y otra vez para todos los bloques. El menú del controlador actúa
  entonces sobre toda la selección: convertir bloques compatibles en otro tipo, marcar preguntas como obligatorias u opcionales, ocultar o
  mostrar títulos, crear un grupo repetible, duplicar, mover, ocultar o eliminar.
</p>

<h2 id="shortcuts">Atajos de teclado</h2>

<p>En Mac usa Cmd; en Windows y Linux usa Ctrl.</p>

<h2 id="format-text">Dar formato al texto</h2>

  <p>
    Selecciona cualquier texto para ver una barra de herramientas flotante: negrita, cursiva, subrayado, tachado, código en línea, ecuación,
    enlace, fuente, tamaño de fuente y color. Consulta{' '}
    <a href="/es/building-forms/content-blocks#text-formatting">Bloques de contenido → Formato de texto</a> para ver la lista completa.
  </p>

<h2 id="pages-columns">Páginas y columnas</h2>

  <p>
    Los formularios pueden ser de una sola página o dividirse en varias. Inserta un <strong>Salto de página</strong> para crear un flujo de
    varios pasos con una barra de progreso, y <strong>2 columnas</strong> para colocar bloques uno al lado del otro. Ambos se comportan como
    cualquier otro bloque — arrástralos para reordenarlos, elimínalos desde el menú de bloques. Consulta{' '}
    <a href="/es/building-forms/form-structure">Estructura del formulario</a> para la guía completa.
  </p>

<h2 id="translate">Traducir</h2>

  <p>
    La pestaña <strong>Traducir</strong> abre un editor en paralelo para cada cadena visible en tu formulario. Añade idiomas, traduce cada
    pregunta y publica. Consulta <a href="/es/building-forms/translating-form-content">Traducir el contenido del formulario</a> para la guía
    completa.
  </p>

<h2 id="ai-chat">Chat de IA</h2>

  <p>
    El botón flotante en la esquina inferior derecha abre el <strong>chat de IA</strong> — un asistente que puede escribir, auditar y editar
    tu formulario. Elige un mensaje inicial o simplemente describe lo que quieres. El uso consume tu saldo de créditos de IA, que se muestra
    encima del campo de entrada.
  </p>

<h2 id="theme">Tema</h2>

  <p>
    El botón <strong>Tema</strong> (icono de paleta) abre un panel anclado con un interruptor de modo claro/oscuro, temas predefinidos y
    controles por sección para fuentes, colores, entradas, opciones, botones y más. Los preajustes funcionan en todos los planes; los
    colores y las fuentes personalizados requieren Pro. Consulta <a href="/es/branding-domains/appearance-theming">Apariencia y temas</a>{' '}
    para más detalles.
  </p>

<h2 id="share">Compartir</h2>

  <p>
    El botón <strong>Compartir</strong> abre una hoja con dos canales. <strong>Enlace público</strong> contiene tus enlaces para compartir —
    crea varios para distinguir campañas o para fijar idiomas y límites distintos — con <strong>Incrustar</strong>,{' '}
    <strong>Ventana emergente</strong> y <strong>Código QR</strong> junto a la URL. <strong>Solicitudes</strong> envía el formulario a una
    persona concreta cada vez. Consulta <a href="/es/sharing-publishing/sharing-embedding">Compartir enlaces</a>,{' '}
    <a href="/es/sharing-publishing/embedding-popups">Incrustación y ventanas emergentes</a>, y{' '}
    <a href="/es/requests/creating-requests">Crear solicitudes</a>.
  </p>

<h2 id="settings">Configuración</h2>

  <p>
    El botón <strong>Configuración</strong> (icono de engranaje) abre un diálogo con seis pestañas. Para una guía detallada, consulta{' '}
    <a href="/es/building-forms/form-settings">Configuración del formulario</a>.
  </p>
  <ul>
    <li>
      <strong>General</strong> — nombre del formulario, idioma predeterminado, interruptor de marca
    </li>
    <li>
      <strong>Acceso</strong> — autenticación, contraseña, protección contra bots (solo enlace público)
    </li>
    <li>
      <strong>Respuestas</strong> — cierre de envíos, URL de redirección, retención; editar después de enviar y permitir otra respuesta para
      el enlace público
    </li>
    <li>
      <strong>Notificaciones por correo</strong> — dominio de envío, notificar en cada nuevo envío, confirmación al encuestado,
      recordatorios y la invitación de solicitud
    </li>
    <li>
      <strong>Integraciones</strong> — streaming de analítica GA4/Axiom; entrega de envíos a Google Sheets, Airtable, Notion, Slack,
      Discord, Linear, GitHub Issues y Webhook. Zapier y Make aparecen marcados como Próximamente
    </li>
    <li>
      <strong>Zona de peligro</strong> — eliminar todas las respuestas, eliminar los datos de analítica o eliminar el formulario
    </li>
  </ul>

<h2 id="preview-publish">Vista previa y publicación</h2>

  <p>
    Cambia a <strong>Vista previa</strong> para rellenar el formulario exactamente como lo haría un encuestado: la lógica se activa, las
    variables se resuelven y puedes añadir entradas de grupo repetible. No se guarda nada — las respuestas viven en memoria y se reinician
    al recargar, y las cargas de archivos y los pagos están simulados. Haz clic en <strong>Publicar</strong> cuando estés satisfecho;
    Formstep mantiene tu borrador por separado, por lo que los cambios solo se publican cuando lo haces. Para deshacer ediciones antes de
    publicar, pulsa <strong>Revertir cambios no publicados</strong> para volver a la última versión publicada.
  </p>

<h2 id="version-history">Historial de publicaciones</h2>

  <p>
    El botón <strong>Historial de publicaciones</strong> (icono de reloj) enumera todas las versiones publicadas con una marca de tiempo, y
    muestra las pestañas <strong>Formulario</strong>, <strong>Correos</strong> y <strong>Traducciones</strong> de cada una tal como quedaron
    congeladas al publicar. Consultar el historial funciona en cualquier plan. Restaurar requiere <em>Business</em>: elige una versión, haz
    clic en <strong>Revertir a esta versión</strong> y luego elige <strong>Abrir como borrador</strong> (cárgala en el editor sin publicar)
    o <strong>Publicar ahora</strong> (ponla en vivo de inmediato).
  </p>

> ℹ️ **Búsqueda rápida**
> <p>
>     Pulsa <kbd>Cmd K</kbd> (o <kbd>Ctrl K</kbd>) fuera del lienzo para ir a cualquier formulario, carpeta, espacio de trabajo o ajuste.
>     Dentro del lienzo, las mismas teclas añaden un enlace en su lugar.
>   </p>

<h2 id="next-steps">Próximos pasos</h2>
<div class="not-prose grid gap-3 sm:grid-cols-2">
  - [Estructura del formulario y páginas](/es/building-forms/form-structure) — Páginas, columnas, arrastrar y soltar
  - [Tipos de preguntas](/es/building-forms/field-types) — Todos los tipos de pregunta del menú de bloques
  - [Apariencia y temas](/es/branding-domains/appearance-theming) — Tema, portada, logotipo, modo oscuro
  - [Compartir enlaces](/es/sharing-publishing/sharing-embedding) — Crear y gestionar URLs de enlaces para compartir
</div>
