# Bloques de contenido y formato

Añade texto enriquecido, imágenes, vídeos, incrustaciones y tablas a tu formulario.

## Bloques de contenido y formato

Los formularios no son solo preguntas. Usa bloques de contenido para añadir contexto, identidad de marca y contenido multimedia enriquecido entre los campos.

<h2 id="available-blocks">Bloques disponibles</h2>
<p>
  Escribe <kbd>/</kbd> en el lienzo (o pulsa <kbd>Cmd/Ctrl + /</kbd>) para abrir el menú de bloques y elige uno. Los bloques de contenido se
  colocan junto a las preguntas y se reordenan arrastrando y soltando. Párrafo es el bloque predeterminado — simplemente escribe en el
  lienzo; no tiene entrada en el menú.
</p>

<p>
  Una imagen lleva un pie de foto opcional (<strong>Add caption</strong> en el menú del bloque) y un submenú <strong>Align</strong> con
  Left, Center y Right. <strong>Replace image</strong> sustituye el archivo sin perder el pie de foto.
</p>

<h2 id="embeds">Incrustaciones</h2>
<p>
  Tres bloques de incrustación viven bajo <strong>Media</strong>. Cada uno empieza vacío; abre su menú de bloque para rellenarlo.
</p>

<h2 id="text-formatting">Formato de texto</h2>
<p>Selecciona texto en un párrafo, encabezado, elemento de lista o celda de tabla para mostrar la barra de herramientas flotante:</p>
<ul>
  <li>
    <strong>Negrita</strong> (<kbd>Cmd/Ctrl + B</kbd>), <em>cursiva</em> (<kbd>+ I</kbd>), subrayado (<kbd>+ U</kbd>), tachado (
    <kbd>+ S</kbd>)
  </li>
  <li>Código en línea y ecuación (LaTeX)</li>
  <li>
    Enlace — el botón de la barra de herramientas o <kbd>Cmd/Ctrl + K</kbd> con el texto seleccionado
  </li>
  <li>Fuente y tamaño de fuente</li>
  <li>
    Color — un menú con una fila <strong>Highlight</strong> y una fila <strong>Underline</strong>, cada una con Default, Blue, Green, Yellow
    y Red
  </li>
</ul>
<p>Los encabezados y las listas se insertan desde el menú de bloques, no desde la barra de herramientas flotante.</p>

<h2 id="tables">Tablas</h2>
<p>
  Inserta una <strong>Table</strong> desde el menú de bloques. Las tablas son estáticas — los encuestados las leen pero no pueden editar las
  celdas. Son ideales para tablas de precios o datos de referencia.
</p>
<p>
  Haz clic en cualquier celda para editarla. Pasa el cursor sobre una fila o columna para ver su asa, y haz clic en ella para sus acciones:
</p>
<ul>
  <li>
    <strong>Add row above</strong> / <strong>Add row below</strong>, <strong>Add column left</strong> / <strong>Add column right</strong>
  </li>
  <li>
    <strong>Duplicate row</strong> / <strong>Duplicate column</strong>
  </li>
  <li>
    <strong>Delete row</strong> / <strong>Delete column</strong>
  </li>
</ul>
<p>
  Arrastra la misma asa para reordenar una fila o columna. Arrastra el borde entre dos celdas para redimensionar; el primer arrastre fija
  los anchos actuales, así que la tabla conserva las proporciones que viste. Las celdas admiten el mismo formato en línea que los párrafos —
  negrita, cursiva, enlaces e inserción de respuestas con menciones <kbd>@</kbd>.
</p>

<h2 id="piping">Inserción de respuestas en el contenido</h2>
<p>
  Los bloques de contenido admiten la inserción de respuestas. Escribe <strong>@</strong> en cualquier párrafo, encabezado o elemento de
  lista para abrir el menú de menciones e insertar una referencia a un campo. Por ejemplo, un encabezado que diga "Gracias,{' '}
  <strong>@Nombre</strong>" muestra el nombre real del encuestado cuando rellena el formulario. Consulta{' '}
  <a href="/es/building-forms/answer-piping">Inserción de respuestas</a> para la guía completa.
</p>

<h2 id="examples">Ejemplos habituales</h2>
<ul>
  <li>
    <strong>Formulario de solicitud</strong> — un Encabezado introduce cada sección ("Información personal", "Experiencia laboral"), los
    Párrafos explican qué rellenar y un bloque de Imagen muestra un ejemplo de diseño de currículum
  </li>
  <li>
    <strong>Registro para un evento</strong> — una incrustación de YouTube muestra el tráiler del evento, una incrustación de Google Maps
    muestra el lugar y una Tabla lista el programa
  </li>
  <li>
    <strong>Pedido de producto</strong> — Single Picture Choice para la selección del producto, un diseño de 2 columnas coloca cantidad y
    talla en paralelo, y un Párrafo debajo muestra los términos y condiciones
  </li>
  <li>
    <strong>Confirmación personalizada</strong> — en la página de agradecimiento, un Encabezado dice "¡Gracias, <strong>@Nombre</strong>!" y
    un Párrafo inserta <strong>@Total del pedido</strong> desde un campo calculado
  </li>
</ul>

> 💡 **No exageres**
> <p>
>     El contenido multimedia pesado ralentiza la carga del formulario. Usa incrustaciones donde ayuden directamente al encuestado — un vídeo
>     explicativo breve, un mapa con tu ubicación.
>   </p>

<h2 id="next-steps">Próximos pasos</h2>
<div class="not-prose grid gap-3 sm:grid-cols-2">
  - [Reglas de validación](/es/building-forms/field-configuration#validation-rules) — Obligatorio, mínimo/máximo, patrones y restricciones
  - [Lógica condicional](/es/building-forms/conditional-logic) — Muestra u oculta bloques según las respuestas
  - [Inserción de respuestas](/es/building-forms/answer-piping) — Referencia respuestas con menciones @
  - [Apariencia y temas](/es/branding-domains/appearance-theming) — Tema, portada, logotipo, modo oscuro
</div>