The form editor

The editor has two parts: a panel on the left with settings, and a live preview on the right that shows the form as it looks on your store.

The preview

The preview is rendered by the same code as your storefront, with your branding applied. Settings you left on Theme show in a neutral style here and take your theme's style on your store.

Liquid in your texts is rendered with sample data in the preview, for example a sample customer. That is an approximation: on your storefront Shopify runs the Liquid with the real shop and visitor. See Liquid and HTML in your texts.

Above the preview:

Control	What it does
Show on your store as (Inline / Popup / Link page)	Picks how the form appears on your storefront, and what the Display tab shows
History (Undo / Redo)	Steps back and forward through your changes
Preview width (Desktop / Mobile)	Shows the form at desktop or phone width
Test like a visitor	Makes the preview a working form: conditions, steps and checks run as on your store, with the same error messages. Nothing is sent or stored
Language select	Shows the form in its main language or in a language you added. See Languages

In the normal mode, click a field to edit it and hover between fields to add one. Hidden fields are shown as a marker ("Hidden field: ...") so you can select them.

Show on your store as

The three pills are the form's display setting:

• Inline - the form is shown by the Form block in your theme. See Add a form to your theme.
• Popup - the form opens over the page through the Popup forms app embed. See Popups.
• Link page - the form gets its own page inside your theme. See Direct link page.

Selecting Popup switches the form's popup on, and selecting Link page switches its direct link on; choosing another pill switches them off again. The change takes effect when you save.

Form settings

With no field selected, the left panel shows Form settings with four tabs.

General

Setting	Notes
Title	Shown above the form
Handle	The theme block and the link page find the form by this handle. Changing it breaks blocks and links that use the old one
Main language	The language the form and its fields are written in
Form is live	When off, the storefront shows nothing and new submissions are refused
Description	Optional text under the title
Button label	The text of the send button
After sending	Show a message or Go to another page. See After sending: message, discount code and redirect

Title, description, button label and the message after sending can contain Liquid; the description and the message also simple HTML such as links and bold text. See Liquid and HTML in your texts.

Display

Shows the settings of the display you picked with the pills: the handle and an Open theme editor button for Inline, all popup settings for Popup, and the Link to the form for Link page.

Branding

This form's own look. Leave a value empty to use your branding from Settings. Reset to brand clears the form's own values. See Branding.

Data

Each submission starts the Form submitted trigger in Shopify Flow with all values. Here you can also turn on Also save submissions as metaobjects. See Save submissions as metaobjects.

Editing a field

Click a field in the preview and the left panel switches to that field:

• On this form - the Label on this form (empty = the field's own label), Required, and the conditions under Show this field only when. These apply to this form only.
• Field - the field's own settings, such as label, placeholder, help text and options. These belong to the field in your library: when the panel says "This field is on 3 forms. Changes below apply to all of them.", it means exactly that.
• Translations and all settings opens the field in the Fields library, where its page has the tabs General and Translations.
• Remove from form takes the field off this form. It stays in your library.

The field's handle is shown in the panel. It is the key of its value in submissions and Shopify Flow, and it never changes.

Saving

Save in the save bar stores the form, the order of its fields and every field you edited, in one step. If something is not valid, for example a text with broken Liquid, nothing is saved and the fields with a problem are marked. Discard drops your unsaved changes.

Deleting a form

Deleting a form removes it from your storefront and the Flow trigger stops for it. Its submissions stay in your inbox. This cannot be undone.

Next steps

• Fields and the field library - what each field type does.
• Conditions and multi-step forms - conditions and steps.
• Languages - translate a form.