# Content blocks & formatting

Add rich text, images, videos, embeds, and tables to your form.

## Content blocks & formatting

Forms aren't just questions. Use content blocks to add context, branding, and rich media between fields.

<h2 id="available-blocks">Available blocks</h2>
<p>
  Type <kbd>/</kbd> on the canvas (or press <kbd>Cmd/Ctrl + /</kbd>) to open the block menu, then pick a block. Content blocks sit alongside
  questions and reorder with drag and drop. Paragraph is the default block — just type on the canvas; it has no menu entry.
</p>

<p>
  An image carries an optional caption (<strong>Add caption</strong> in the block menu) and an <strong>Align</strong> submenu with Left,
  Center, and Right. <strong>Replace image</strong> swaps the file without losing the caption.
</p>

<h2 id="embeds">Embeds</h2>
<p>
  Three embed blocks live under <strong>Media</strong>. Each one starts empty; open its block menu to fill it in.
</p>

<h2 id="text-formatting">Text formatting</h2>
<p>Select text in a paragraph, heading, list item, or table cell to reveal the floating toolbar:</p>
<ul>
  <li>
    <strong>Bold</strong> (<kbd>Cmd/Ctrl + B</kbd>), <em>italic</em> (<kbd>+ I</kbd>), underline (<kbd>+ U</kbd>), strikethrough (
    <kbd>+ S</kbd>)
  </li>
  <li>Inline code and equation (LaTeX)</li>
  <li>
    Link — the toolbar button or <kbd>Cmd/Ctrl + K</kbd> with text selected
  </li>
  <li>Font and font size</li>
  <li>
    Color — one menu with a <strong>Highlight</strong> row and an <strong>Underline</strong> row, each offering Default, Blue, Green,
    Yellow, and Red
  </li>
</ul>
<p>Headings and lists are inserted from the block menu, not the floating toolbar.</p>

<h2 id="tables">Tables</h2>
<p>
  Insert a <strong>Table</strong> from the block menu. Tables are static — respondents read them but cannot edit cells. Good for pricing
  grids or reference data.
</p>
<p>Click any cell to edit it. Hover a row or column to reveal its grip, then click the grip for its actions:</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>
  Drag the same grip to reorder a row or column. Drag the border between two cells to resize; the first drag freezes the current widths, so
  the table keeps the proportions you saw. Cells take the same inline formatting as paragraphs — bold, italic, links, and answer piping with{' '}
  <kbd>@</kbd> mentions.
</p>

<h2 id="piping">Answer piping in content</h2>
<p>
  Content blocks support answer piping. Type <strong>@</strong> in any paragraph, heading, or list item to open the mention menu and insert
  a field reference. For example, a heading that reads "Thanks, <strong>@First name</strong>" shows the respondent's actual name when they
  fill out the form. See <a href="/building-forms/answer-piping">Answer piping</a> for the full guide.
</p>

<h2 id="examples">Common examples</h2>
<ul>
  <li>
    <strong>Application form</strong> — a Heading introduces each section ("Personal info", "Work experience"), Paragraphs explain what to
    fill in, and an Image block shows a sample resume layout
  </li>
  <li>
    <strong>Event registration</strong> — a YouTube Embed shows the event trailer, a Google Maps Embed shows the venue, and a Table lists
    the schedule
  </li>
  <li>
    <strong>Product order</strong> — Single Picture Choice for product selection, a 2-Column layout puts quantity and size side by side, and
    a Paragraph below shows terms and conditions
  </li>
  <li>
    <strong>Personalized confirmation</strong> — on the thank-you page, a Heading reads "Thanks, <strong>@Name</strong>!" and a Paragraph
    pipes <strong>@Order total</strong> from a calculated field
  </li>
</ul>

> 💡 **Don't overdo it**
> <p>
>     Heavy media slows down form load. Use embeds where they directly help the respondent — a short explainer video, a map showing your
>     location.
>   </p>

<h2 id="next-steps">Next steps</h2>
<div class="not-prose grid gap-3 sm:grid-cols-2">
  - [Validation rules](/building-forms/field-configuration#validation-rules) — Required, min/max, patterns, and constraints
  - [Conditional logic](/building-forms/conditional-logic) — Show or hide blocks based on answers
  - [Answer piping](/building-forms/answer-piping) — Reference answers with @ mentions
  - [Appearance & theming](/branding-domains/appearance-theming) — Theme, cover, logo, dark mode
</div>