---
title: "The form editor - Workflow Forms"
description: "How the Workflow Forms editor works: the live preview, the Inline, Popup and Link page pills, and the General, Display, Branding and Data tabs."
canonical: "https://docs.workflow-forms.app/the-form-editor"
---

# 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](https://docs.workflow-forms.app/liquid-and-html-in-texts.md).

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](https://docs.workflow-forms.app/languages.md) |

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](https://docs.workflow-forms.app/add-a-form-to-your-theme.md).
- **Popup** - the form opens over the page through the **Popup forms** app embed. See [Popups](https://docs.workflow-forms.app/popups.md).
- **Link page** - the form gets its own page inside your theme. See [Direct link page](https://docs.workflow-forms.app/direct-link-page.md).

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](https://docs.workflow-forms.app/after-sending.md) |

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](https://docs.workflow-forms.app/liquid-and-html-in-texts.md).

### 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](https://docs.workflow-forms.app/branding.md).

### 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](https://docs.workflow-forms.app/save-submissions-as-metaobjects.md).

## 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](https://docs.workflow-forms.app/fields-and-the-field-library.md) - what each field type does.
- [Conditions and multi-step forms](https://docs.workflow-forms.app/conditions-and-multi-step-forms.md) - conditions and steps.
- [Languages](https://docs.workflow-forms.app/languages.md) - translate a form.