Form editor

Learn your way around the form editor so you can find every control quickly.

The form editor is the full-screen workspace where you build a form. This section explains the left icon rail, the top bar and the live preview, so the rest of the guides make sense. Read it once before you start editing.

📝 Open the editor

• Open the app > click Forms

• Click the form you want to edit. The editor opens over the whole screen: editing panels on the left, a live preview of the form on the right.

The full form editor with a form open.

---

📋 Left Sidebar

Tab	What it's for
Elements	Header, fields, Footer (opens here by default)
Edit with AI	Describe a change in plain language
Appearance	Layout, colors, font, width, background
After submit	What visitors see once they submit
Mail	Email notifications (you + customer)
Integration	Third-party connections
Settings	Error messages, form schedule

💡 Tip: Click Collapse sidebar at the bottom to shrink it to icons only.

🔝 Top Bar

Control	What it does
Form name + status badge	Shows Active, Draft, or Limited
··· menu	Rename the form
📱 🖥️ toggle	Preview at phone width or full width
🌐 Language	Switch which language you're editing text in
Editor / Preview mode	Toggle between editing and testing the form
Undo / Redo	Ctrl+Z / Ctrl+Shift+Z (⌘ on Mac)

Everything about the form as a whole lives in the top bar.

Saving: Changes aren't live until saved. Making a change shows Shopify's save bar — Save keeps it.

👀 Live Preview

Renders your real form and updates instantly as you edit.

• 📱 / 🖥️ toggle — changes preview width only, not the actual form

• Preview mode — form behaves exactly like the published version, so you can test-fill it

Close-up of the top bar with the mobile and desktop preview icons.

• Editor mode — click any element to select, drag, and edit it

Next steps

• Add and arrange elements — start building the form.

• Edit a form with AI — make changes by describing them.