Skip to Content
Build with FinquLiquid ThemesForms

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 or Storefront SDK instead of the product form type.

Basic syntax

{% 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:

PropertyDescription
form.posted_successfully?true after a successful submission
form.errorError message from the last failed submission
form.submittedPreviously 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 typeTypical useObjects required
loginCustomer login—
create_customerRegistration—
edit_customerAccount edit—
change_customer_passwordPassword change—
recover_customer_passwordPassword recovery request—
reset_customer_passwordPassword reset—
contactContact page—
searchSearch—
commentBlog commentarticle
reviewProduct reviewproduct
productAdd to cart (legacy)product
store_passwordPassword-protected store—
cookie_policyCookie consent—
localizationLanguage/currency switcher—
customerGeneric 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

{% 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 %}
{% 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 for tag syntax.