form

Generates an HTML <form> tag, including any required <input> tags to submit the form to a specific endpoint.

Because there are many different form types available in Shopify themes, the form tag requires a type. Depending on the form type, an additional parameter might be required. You can specify the following form types:

Syntax

{% form 'form_type' %}

content

{% endform %}

form_type

The name of the desired form type

content

The form contents

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 %}

{% form 'activate_customer_password' %}
  <!-- form content -->
{% endform %}

Output

</form>

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 %}

{% form 'cart', cart %}
  <!-- form content -->
{% endform %}

Output

</form>

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 %}

{% form 'contact' %}
  <!-- form content -->
{% endform %}

Output

</form>

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 %}

{% form 'create_customer' %}
  <!-- form content -->
{% endform %}

Output

</form>

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 %}

{% form 'currency' %}
  {{ form | currency_selector }}
{% endform %}

Output

</form>

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 %}

{% form 'customer' %}
  <!-- form content -->
{% endform %}

Output

</form>

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 %}

{% form 'customer_address', customer.new_address %}
  <!-- form content -->
{% endform %}

{
  "customer": {
    "new_address": {}
  }
}

Output

</form>

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 %}

{% form 'customer_login' %}
  <!-- form content -->
{% endform %}

Output

</form>

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 %}

{% form 'guest_login' %}
  <!-- form content -->
{% endform %}

Output

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 %}

{% form 'localization' %}
  <!-- form content -->
{% endform %}

Output

</form>

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 %}

{% form 'new_comment', article %}
  <!-- form content -->
{% endform %}

Output

</form>

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 %}

{% form 'product', product %}
  <!-- form content -->
{% endform %}

{
  "product": {
    "id": 6786188247105
  }
}

Output

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 %}

{% form 'recover_customer_password' %}
  <!-- form content -->
{% endform %}

Output

</form>

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 %}

{% form 'reset_customer_password' %}
  <!-- form content -->
{% endform %}

Output

</form>

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 %}

{% form 'storefront_password' %}
  <!-- form content -->
{% endform %}

Output

</form>

form tag parameters

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 %}

{% form 'customer_login', return_to: routes.root_url %}
  <!-- form content -->
{% endform %}

{
  "routes": {
    "root_url": "/"
  }
}

Output

</form>

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 %}

{% form "product", product, id: 'custom-id', class: 'custom-class', data-example: '100' %}
  <!-- form content -->
{% endform %}

{
  "product": {
    "id": 6786188247105
  }
}

Output

Was this page helpful?