# Forms

Use the `{% form %}` tag to add HTML forms that submit to Finqu storefront endpoints — customer login, contact, search, and more.

For add-to-cart flows, use the [Storefront API](/build-with-finqu/storefront/overview) or [Storefront SDK](/build-with-finqu/storefront/storefront-sdk) instead of the `product` form type.

## Basic syntax

```liquid
{% form 'login' %}
  {% if form.error %}
    <p class="error">{{ form.error }}</p>
  {% endif %}
  <label>
    Email
    <input type="email" name="email" value="{{ form.submitted.email }}" required>
  </label>
  <label>
    Password
    <input type="password" name="password" required>
  </label>
  <button type="submit">Sign in</button>
{% endform %}
```

- The first argument is the **form type** (a string).
- Some form types need additional Liquid objects (e.g. `article` for `comment`, `product` for `review`).

The tag outputs a `<form>` element with the correct `action`, `method`, and hidden fields. Inside the tag body, write your fields and buttons.

## The `form` object

Inside a form block, a `form` object is available with submission state:

| Property | Description |
|----------|-------------|
| `form.posted_successfully?` | `true` after a successful submission |
| `form.error` | Error message from the last failed submission |
| `form.submitted` | Previously submitted field values (for repopulating inputs) |

The login example above shows how to surface errors and repopulate the email field after a failed submission.

## Available form types

Modern storefront themes (v2) support these form types:

| Form type | Typical use | Objects required |
|-----------|-------------|------------------|
| `login` | Customer login | — |
| `create_customer` | Registration | — |
| `edit_customer` | Account edit | — |
| `change_customer_password` | Password change | — |
| `recover_customer_password` | Password recovery request | — |
| `reset_customer_password` | Password reset | — |
| `contact` | Contact page | — |
| `search` | Search | — |
| `comment` | Blog comment | `article` |
| `review` | Product review | `product` |
| `product` | Add to cart (legacy) | `product` |
| `store_password` | Password-protected store | — |
| `cookie_policy` | Cookie consent | — |
| `localization` | Language/currency switcher | — |
| `customer` | Generic customer form | — |

Form types are implemented in the platform — if a form type is not listed, it may not be available in modern themes.

## Examples

### Customer registration

```liquid
{% form 'create_customer' %}
  {% if form.error %}
    <p class="error">{{ form.error }}</p>
  {% endif %}
  <label>First name <input type="text" name="first_name" value="{{ form.submitted.first_name }}" required></label>
  <label>Last name <input type="text" name="last_name" value="{{ form.submitted.last_name }}" required></label>
  <label>Email <input type="email" name="email" value="{{ form.submitted.email }}" required></label>
  <label>Password <input type="password" name="password" required></label>
  <button type="submit">Create account</button>
{% endform %}
```

### Search

```liquid
{% form 'search' %}
  <input type="search" name="q" placeholder="Search products...">
  <button type="submit">Search</button>
{% endform %}
```

## Notes

- Checkout themes do **not** support the `{% form %}` tag — checkout uses the Vue checkout library instead.
- Use unique `id` attributes on forms when multiple forms of the same type appear on one page: `{% form 'login', id: 'header-login' %}`.
- See [Store tags reference](/reference/liquid/tags/store#form) for tag syntax.

## Related articles

- [Templates & Layouts](/build-with-finqu/liquid-themes/templates-layouts)
- [Liquid tags](/build-with-finqu/liquid-themes/liquid-tags)
- [Storefront overview](/build-with-finqu/storefront/overview)