Forms

Shopify provides a variety of form types for different use cases, such as login, signup, cart, address, and newsletter forms. To implement these forms in Webflow, use the li-form attribute on the appropriate form element. In the value field of the custom attribute, specify the desired form type (e.g., login, signup, cart, etc.).

For a complete overview of all supported form types, refer to the Shopify documentation.

Webflow

li-form = customer

Shopify

{% form 'customer', class: 'footer_form' %}
      // your form content
{% endform %}

Additionally, if you want to redirect users to a specific page after form submission, you can add an additional li-form attribute using the :return_to modifier. This does not replace the original li-form attribute — it works alongside it.

Webflow

li-form = customer
li-form:return_to = /pages/thank-you

Shopify

{% form 'customer', return_to: '/pages/thank-you', class: 'footer_form' %}
      // your form content
{% endform %}

In this example, you will also notice that a class is assigned to the element. This class is taken directly from the element to which the li-form attribute is applied.

Within the form, you can use input elements tailored to the specific form you wish to create. These inputs require unique names, which you can reference in the Shopify documentation and soon in our own documentation.

Most forms are already included in the Starter Template, making it convenient for you to reference them whenever needed.