# Understanding the editor

A quick tour of the form builder and where to find every feature.

## Understanding the editor

A tour of the form builder — where everything lives and how to get around fast.

<h2 id="layout">Layout at a glance</h2>

  <p>The editor is a single, document-style canvas — type, insert blocks, and arrange them like a doc. Three areas do the work:</p>
  <ul>
    <li>
      <strong>Top toolbar</strong> — <strong>Edit</strong>, <strong>Translate</strong>, and <strong>Preview</strong>, then Settings, Theme,
      the issue indicator, and <strong>Publish</strong>. Publish shows whenever there is something to publish. After your first publish,{' '}
      <strong>Submissions</strong>, <strong>Share</strong>, and <strong>Publish history</strong> join them, and{' '}
      <strong>Revert unpublished changes</strong> appears whenever a draft differs from what is live
    </li>
    <li>
      <strong>Canvas (center)</strong> — your form as respondents will see it, with an optional cover image and logo at the top
    </li>
    <li>
      <strong>AI chat</strong> — floating button in the bottom-right; opens a side panel where you can ask AI to build or edit your form
    </li>
  </ul>
  <p>The workspace sidebar on the left holds navigation across all your forms.</p>

<p>
  Beside Publish sits the <strong>issue indicator</strong>, a traffic light for the readiness check: green when the form is ready, amber for
  warnings, red for errors. Click it to list what it found — each entry links to the place you fix it. Errors block publishing. Warnings do
  not, but formbase asks first and offers to fix them for you. <a href="/building-forms/publish-checks">Publish checks</a> lists every
  finding and how to clear it.
</p>

<h2 id="cover-logo">Cover and logo</h2>
<p>
  Above the form title, use <strong>Add Cover</strong> and <strong>Add Logo</strong>. The picker has four tabs — <strong>Upload</strong>{' '}
  (PNG, JPG, or WebP up to 5&nbsp;MB), <strong>Colors</strong> for a solid color, <strong>Unsplash</strong>, and <strong>Icons</strong>.
  Drag a cover up or down to reposition it. Only uploads count toward your storage.
</p>

<h2 id="adding-blocks">Add a question or content</h2>

  <p>
    Click an empty line on the canvas and type <kbd>/</kbd> — or press <kbd>Cmd/Ctrl + /</kbd> — to open the block menu. Keep typing to
    filter. Four categories, in this order:
  </p>
  <ul>
    <li>
      <strong>Basic Blocks</strong> — Heading 1&ndash;3, Bullet List, Numbered List
    </li>
    <li>
      <strong>Form Fields</strong> — every question type, from Text Input to Payment and Schedule appointment
    </li>
    <li>
      <strong>Layout</strong> — Table, 2 Columns, Repeating Group, Logic, Hidden Field, Calculated Field, Page Break, Thank You Page
    </li>
    <li>
      <strong>Media</strong> — Image, YouTube Embed, Google Maps Embed, Embed anything
    </li>
  </ul>
  <p>
    The menu only offers what fits where the cursor is: no questions or logic on a thank-you page, no root-only blocks inside a column. See{' '}
    <a href="/building-forms/field-types">Question types</a> for the full catalogue and{' '}
    <a href="/building-forms/form-structure#block-menu">Form structure → Block menu</a> for what the drag handle offers.
  </p>

> 💡 **Just describe what you need**
> <p>
>     Don&apos;t feel like browsing the menu? Open AI chat and say <em>&ldquo;add a phone number and a date picker&rdquo;</em>. It inserts the
>     fields for you.
>   </p>

<h2 id="block-actions">Select and change blocks</h2>

<p>
  Click a block's drag handle to open its menu. What it offers depends on the block: <strong>Turn into</strong>, <strong>Options</strong>,{' '}
  <strong>Validation</strong>, align, create repeating group, insert, duplicate, move, hide, and delete.
</p>

<p>
  Select several blocks by dragging a rectangle around them, by shift-clicking a second block to take the range, or by pressing{' '}
  <kbd>Cmd/Ctrl+A</kbd> once for the current block's text and again for every block. The handle menu then acts on the whole selection: turn
  compatible blocks into another type, mark questions required or optional, hide or show titles, create a repeating group, duplicate, move,
  hide, or delete.
</p>

<h2 id="shortcuts">Keyboard shortcuts</h2>

<p>On a Mac use Cmd; on Windows and Linux use Ctrl.</p>

<h2 id="format-text">Format text</h2>

  <p>
    Select any text to see a floating toolbar: bold, italic, underline, strikethrough, inline code, equation, link, font, font size, and
    color. See <a href="/building-forms/content-blocks#text-formatting">Content blocks → Text formatting</a> for the full list.
  </p>

<h2 id="pages-columns">Pages &amp; columns</h2>

  <p>
    Forms can be a single page or split into many. Insert a <strong>Page Break</strong> to create a multi-step flow with a progress bar, and{' '}
    <strong>2 Columns</strong> to place blocks side by side. Both behave like any other block — drag to reorder, delete from the block menu.
    See <a href="/building-forms/form-structure">Form structure</a> for the full guide.
  </p>

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

  <p>
    The <strong>Translate</strong> tab opens a side-by-side editor for every visible string in your form. Add languages, translate each
    question, and publish. See <a href="/building-forms/translating-form-content">Translating form content</a> for the full guide.
  </p>

<h2 id="ai-chat">AI chat</h2>

  <p>
    The floating button in the bottom-right opens <strong>AI chat</strong> — an assistant that can write, audit, and edit your form. Pick a
    starter prompt or just describe what you want. Usage draws from your AI credit balance, shown above the input.
  </p>

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

  <p>
    The <strong>Theme</strong> button (palette icon) opens a docked panel with a light/dark mode toggle, preset themes, and per-section
    controls for fonts, colors, inputs, choices, buttons, and more. Presets work on every plan; custom colors and fonts need Pro. See{' '}
    <a href="/branding-domains/appearance-theming">Appearance & theming</a> for details.
  </p>

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

  <p>
    The <strong>Share</strong> button opens a sheet with two channels. <strong>Public link</strong> holds your share links — create several
    to tell campaigns apart or to set different languages and limits — with <strong>Embed</strong>, <strong>Popup</strong>, and{' '}
    <strong>QR Code</strong> beside the URL. <strong>Requests</strong> sends the form to one named person at a time. See{' '}
    <a href="/sharing-publishing/sharing-embedding">Share links</a>,{' '}
    <a href="/sharing-publishing/embedding-popups">Embedding &amp; popups</a>, and{' '}
    <a href="/requests/creating-requests">Creating requests</a>.
  </p>

<h2 id="settings">Settings</h2>

  <p>
    The <strong>Settings</strong> button (gear icon) opens a dialog with six tabs. For a deep dive, see{' '}
    <a href="/building-forms/form-settings">Form settings</a>.
  </p>
  <ul>
    <li>
      <strong>General</strong> — form name, default language, branding toggle
    </li>
    <li>
      <strong>Access</strong> — authentication, password, bot protection (public link only)
    </li>
    <li>
      <strong>Submissions</strong> — close submissions, redirect URL, retention; edit after submit and allow another response for the public
      link
    </li>
    <li>
      <strong>E-mail Notifications</strong> — sending domain, notify on new submission, respondent confirmation, reminders, and the request
      invitation
    </li>
    <li>
      <strong>Integrations</strong> — GA4/Axiom analytics streaming; Google Sheets, Airtable, Notion, Slack, Discord, Linear, GitHub Issues,
      and Webhook submission delivery. Zapier and Make are marked coming soon
    </li>
    <li>
      <strong>Danger Zone</strong> — delete all submissions, delete analytics data, or delete the form
    </li>
  </ul>

<h2 id="preview-publish">Preview &amp; publish</h2>

  <p>
    Switch to <strong>Preview</strong> to fill the form exactly as a respondent would: logic fires, variables resolve, and you can add
    repeating-group entries. Nothing is saved — answers live in memory and reset on reload, and uploads and payments are stubbed. Click{' '}
    <strong>Publish</strong> when you are happy; formbase keeps your draft separate, so changes only go live when you publish. To undo edits
    before publishing, hit <strong>Revert unpublished changes</strong> to go back to the last published version.
  </p>

<h2 id="version-history">Publish history</h2>

  <p>
    The <strong>Publish history</strong> button (clock icon) lists every published version with a timestamp, and shows each one's{' '}
    <strong>Form</strong>, <strong>Emails</strong>, and <strong>Translations</strong> as they were frozen at publish. Browsing works on
    every plan. Restoring needs <em>Business</em>: pick a version, click <strong>Revert to this version</strong>, then choose{' '}
    <strong>Open as draft</strong> (load it into the editor without publishing) or <strong>Publish now</strong> (go live right away).
  </p>

> ℹ️ **Quick search**
> <p>
>     Press <kbd>Cmd K</kbd> (or <kbd>Ctrl K</kbd>) outside the canvas to jump to any form, folder, workspace, or setting. Inside the canvas
>     the same keys add a link instead.
>   </p>

<h2 id="next-steps">Next steps</h2>
<div class="not-prose grid gap-3 sm:grid-cols-2">
  - [Form structure & pages](/building-forms/form-structure) — Pages, columns, drag and drop
  - [Question types](/building-forms/field-types) — Every question type in the block menu
  - [Appearance & theming](/branding-domains/appearance-theming) — Theme, cover, logo, dark mode
  - [Share links](/sharing-publishing/sharing-embedding) — Create and manage share link URLs
</div>
