Liquid tags: form

activate_customer_password

Syntax

{% form 'activate_customer_password', article %}

form_content

{% endform %}

Generates a form for activating a customer account. To learn more about using this form, and its contents, refer to the customers/activate_account template.

{% form 'activate_customer_password' %}

{% endform %}

Output

</form>

Output

<form method="post" action="/account/activate" accept-charset="UTF-8"><input type="hidden" name="form_type" value="activate_customer_password" /><input type="hidden" name="utf8" value="✓" />
  <!-- form content -->
</form>

Anchor to cart

cart

Syntax

{% form 'cart', cart %}

form_content

{% endform %}

Generates a form for creating a checkout based on the items currently in the cart. The cart form requires a cart object as a parameter. To learn more about using the cart form in your theme, refer to the cart template.

{% form 'cart', cart %}

{% endform %}

Output

</form>

Output

<form method="post" action="/cart" id="cart_form" accept-charset="UTF-8" class="shopify-cart-form" enctype="multipart/form-data"><input type="hidden" name="form_type" value="cart" /><input type="hidden" name="utf8" value="✓" />
  <!-- form content -->
</form>

Anchor to contact

contact

Syntax

{% form 'contact' %}

form_content

{% endform %}

Generates a form for submitting an email to the merchant. To learn more about using this form in your theme, refer to Add a contact form to your theme.

Tip

To learn more about the merchant experience of receiving submissions, refer to the Shopify Help Center.

{% form 'contact' %}

{% endform %}

Output

</form>

Output

<form method="post" action="/contact#contact_form" id="contact_form" accept-charset="UTF-8" class="contact-form"><input type="hidden" name="form_type" value="contact" /><input type="hidden" name="utf8" value="✓" />
  <!-- form content -->
</form>

Anchor to create_customer

create_customer

Syntax

{% form 'create_customer' %}

form_content

{% endform %}

Generates a form for creating a new customer account. To learn more about using this form, and its contents, refer to the customers/register template.

{% form 'create_customer' %}

{% endform %}

Output

</form>

Output

<form method="post" action="/account" id="create_customer" accept-charset="UTF-8" data-login-with-shop-sign-up="true"><input type="hidden" name="form_type" value="create_customer" /><input type="hidden" name="utf8" value="✓" />
  <!-- form content -->
</form>

Anchor to currency

currency

Syntax

{% form 'currency' %}

form_content

{% endform %}

Deprecated

The currency form is deprecated and has been replaced by the localization form.

Generates a form for customers to select their preferred currency.

Tip

Use the currency_selector filter to include a currency selector inside the form.

{% form 'currency' %}

{% endform %}

Output

</form>

Output

<form method="post" action="/cart/update" id="currency_form" accept-charset="UTF-8" class="shopify-currency-form" enctype="multipart/form-data"><input type="hidden" name="form_type" value="currency" /><input type="hidden" name="utf8" value="✓" /><input type="hidden" name="return_to" value="/services/liquid_rendering/resource" />
  <select name="currency"><option value="AED">AED د.إ</option><option value="AFN">AFN ؋</option><option value="AUD">AUD $</option><option value="CAD" selected="selected">CAD $</option><option value="CHF">CHF CHF</option><option value="CZK">CZK Kč</option><option value="DKK">DKK kr.</option><option value="EUR">EUR €</option><option value="GBP">GBP £</option><option value="HKD">HKD $</option><option value="ILS">ILS ₪</option><option value="JPY">JPY ¥</option><option value="KRW">KRW ₩</option><option value="MYR">MYR RM</option><option value="NZD">NZD $</option><option value="PLN">PLN zł</option><option value="SEK">SEK kr</option><option value="SGD">SGD $</option><option value="USD">USD $</option></select>
</form>

Anchor to customer

customer

Syntax

{% form 'customer' %}

form_content

{% endform %}

Generates a form for creating a new customer without registering a new account. This form is useful for collecting customer information when you don't want customers to log in to your store, such as building a list of emails from a newsletter signup.

Tip

To generate a form that registers a customer account, use the create_customer form.

To learn more about using this form, and its contents, refer to Email consent.

{% form 'customer' %}

{% endform %}

Output

</form>

Output

<form method="post" action="/contact#contact_form" id="contact_form" accept-charset="UTF-8" class="contact-form"><input type="hidden" name="form_type" value="customer" /><input type="hidden" name="utf8" value="✓" />
  <!-- form content -->
</form>

Anchor to customer_address

customer_address

Syntax

{% form 'customer_address', address_type %}

form_content

{% endform %}

Generates a form for creating a new address on a customer account, or editing an existing one. The customer_address form requires a specific parameter, depending on whether a new address is being created or an existing one is being edited:

Parameter value	Use-case
`customer.new_address`	When a new address is being created.
`address`	When an existing address is being edited.

To learn more about using this form, and its contents, refer to the customers/addresses template.

{% form 'customer_address', customer.new_address %}

{% endform %}

Output

</form>

Output

<form method="post" action="/account/addresses" id="address_form_new" accept-charset="UTF-8"><input type="hidden" name="form_type" value="customer_address" /><input type="hidden" name="utf8" value="✓" />
  <!-- form content -->
</form>

Anchor to customer_login

customer_login

Syntax

{% form 'customer_login' %}

form_content

{% endform %}

Generates a form for logging into a customer account. To learn more about using this form, and its contents, refer to the customers/login template.

{% form 'customer_login' %}

{% endform %}

Output

</form>

Output

<form method="post" action="/account/login" id="customer_login" accept-charset="UTF-8" data-login-with-shop-sign-in="true"><input type="hidden" name="form_type" value="customer_login" /><input type="hidden" name="utf8" value="✓" />
  <!-- form content -->
</form>

Anchor to guest_login

guest_login

Syntax

{% form 'guest_login' %}

form_content

{% endform %}

Generates a form, for use in the customers/login template, that directs customers back to their checkout session as a guest instead of logging in to an account. To learn more about using this form, and its contents, refer to Offer guest checkout.

{% form 'guest_login' %}

{% endform %}

Output

Output

<form method="post" action="/account/login" id="customer_login_guest" accept-charset="UTF-8"><input type="hidden" name="form_type" value="guest_login" /><input type="hidden" name="utf8" value="✓" />
  <!-- form content -->
<input type="hidden" name="guest" value="true" /></form>

Anchor to localization

localization

Syntax

{% form 'localization' %}

form_content

{% endform %}

Generates a form for customers to select their preferred country so that they're shown the appropriate language and currency. The localization form can contain one of two selectors:

A country selector
A language selector

Note

The localization form replaces the deprecated currency form.

To learn more about using this form, and its contents, refer to Support multiple currencies and languages.

{% form 'localization' %}

{% endform %}

Output

</form>

Output

<form method="post" action="/localization" id="localization_form" accept-charset="UTF-8" class="shopify-localization-form" enctype="multipart/form-data"><input type="hidden" name="form_type" value="localization" /><input type="hidden" name="utf8" value="✓" /><input type="hidden" name="_method" value="put" /><input type="hidden" name="return_to" value="/services/liquid_rendering/resource" />
  <!-- form content -->
</form>

Anchor to new_comment

new_comment

Syntax

{% form 'new_comment', article %}

form_content

{% endform %}

Generates a form for creating a new comment on an article. The new_comment form requires an article object as a parameter. To learn more about using this form, and its contents, refer to the article template.

{% form 'new_comment', article %}

{% endform %}

Output

</form>

Output

<form method="post" action="/blogs/potion-notions/how-to-tell-if-you-have-run-out-of-invisibility-potion/comments#comment_form" id="comment_form" accept-charset="UTF-8" class="comment-form"><input type="hidden" name="form_type" value="new_comment" /><input type="hidden" name="utf8" value="✓" />
  <!-- form content -->
</form>

Anchor to product

product

Syntax

{% form 'product', product %}

form_content

{% endform %}

Generates a form for adding a product variant to the cart. The product form requires a product object as a parameter. To learn more about using this form, and its contents, refer to the product template.

{% form 'product', product %}

{% endform %}

Output

Output

<form method="post" action="/cart/add" id="product_form_6786188247105" accept-charset="UTF-8" class="shopify-product-form" enctype="multipart/form-data"><input type="hidden" name="form_type" value="product" /><input type="hidden" name="utf8" value="✓" />
  <!-- form content -->
<input type="hidden" name="product-id" value="6786188247105" /></form>

Anchor to recover_customer_password

recover_customer_password

Syntax

{% form 'recover_customer_password' %}

form_content

{% endform %}

Generates a form, for use in the customers/login template, for a customer to recover a lost or forgotten password. To learn more about using this form, and its contents, refer to Provide a "Forgot your password" option.

{% form 'recover_customer_password' %}

{% endform %}

Output

</form>

Output

<form method="post" action="/account/recover" accept-charset="UTF-8"><input type="hidden" name="form_type" value="recover_customer_password" /><input type="hidden" name="utf8" value="✓" />
  <!-- form content -->
</form>

Anchor to reset_customer_password

reset_customer_password

Syntax

{% form 'reset_customer_password' %}

form_content

{% endform %}

Generates a form for a customer to reset their password. To learn more about using this form, and its contents, refer to the customers/reset_password template.

{% form 'reset_customer_password' %}

{% endform %}

Output

</form>

Output

<form method="post" action="/account/reset" accept-charset="UTF-8"><input type="hidden" name="form_type" value="reset_customer_password" /><input type="hidden" name="utf8" value="✓" />
  <!-- form content -->
</form>

Anchor to storefront_password

storefront_password

Syntax

{% form 'storefront_password' %}

form_content

{% endform %}

Generates a form for entering a password protected storefront. To learn more about using this form, and its contents, refer to the password template.

{% form 'storefront_password' %}

{% endform %}

Output

</form>

Output

<form method="post" action="/password" id="login_form" accept-charset="UTF-8" class="storefront-password-form"><input type="hidden" name="form_type" value="storefront_password" /><input type="hidden" name="utf8" value="✓" />
  <!-- form content -->
</form>

Anchor to return_to

return_to

Syntax

{% form 'form_type', return_to: string %}

content

{% endform %}

By default, each form type redirects customers to a specific page after the form submits. For example, the product form redirects to the cart page.

The return_to parameter allows you to specify a URL to redirect to. This can be done with the following values:

Value	Description
`back`	Redirect back to the same page that the customer was on before submitting the form.
A relative path	A specific URL path. For example `/collections/all`.
A `routes` attribute	For example, `routes.root_url`

{% form 'customer_login', return_to: routes.root_url %}

{% endform %}

Output

</form>

Output

<form method="post" action="/account/login" id="customer_login" accept-charset="UTF-8" data-login-with-shop-sign-in="true"><input type="hidden" name="form_type" value="customer_login" /><input type="hidden" name="utf8" value="✓" /><input type="hidden" name="return_to" value="/" />
  <!-- form content -->
</form>

Anchor to HTML attributes

HTML attributes

Syntax

{% form 'form_type', attribute: string %}

content

{% endform %}

You can specify HTML attributes by adding a parameter that matches the attribute name with data- prepended, and the desired value.

{% form "product", product, id: 'custom-id', class: 'custom-class', data-example: '100' %}

{% endform %}

Output

Output

<form method="post" action="/cart/add" id="custom-id" accept-charset="UTF-8" class="custom-class" enctype="multipart/form-data" data-example="100"><input type="hidden" name="form_type" value="product" /><input type="hidden" name="utf8" value="✓" />
  <!-- form content -->
<input type="hidden" name="product-id" value="6786188247105" /></form>

Syntax

activate_customer_password

Syntax

Code

Output

Output

cart

Syntax

Code

Output

Output

contact

Syntax

Code

Output

Output

create_customer

Syntax

Code

Output

Output

currency

Syntax

Code

Output

Output

customer

Syntax

Code

Output

Output

customer_address

Syntax

Code

Data

Output

Output

customer_login

Syntax

Code

Output

Output

guest_login

Syntax

Code

Output

Output

localization

Syntax

Code

Output

Output

new_comment

Syntax

Code

Output

Output

product

Syntax

Code

Data

Output

Output

recover_customer_password

Syntax

Code

Output

Output

reset_customer_password

Syntax

Code

Output

Output

storefront_password

Syntax

Code

Output

Output

form tag parameters

return_to