# 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](https://shopify.dev/docs/api/liquid/tags/form).

{% columns %}
{% column %}
{% code title="Webflow" overflow="wrap" %}

```
li-form = customer
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" overflow="wrap" %}

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

{% endcode %}
{% endcolumn %}
{% endcolumns %}

### Form modifier

Some Shopify forms need more details than just the form type. For example, a product form might need to know which product to add, or a return form might need a specific return URL. To handle this, you can use form modifiers. Simply add a colon (:) at the end of li-form and write the modifier you want to use. if the modifier requires a value, you can include it in the value field of the attribute.

**Return to:** 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.

{% columns %}
{% column %}
{% code title="Webflow" overflow="wrap" fullWidth="false" %}

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

{% endcode %}

{% endcolumn %}

{% column %}
{% code title="Shopify" overflow="wrap" fullWidth="false" %}

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

{% endcode %}

{% endcolumn %}
{% endcolumns %}

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.

**Product:** In a product form, you need to pass the product information — otherwise, Shopify won’t know which product to add. For example, this is necessary on a collection page. You can easily do this by adding the :product modifier.

{% columns %}
{% column %}
{% code title="Webflow" overflow="wrap" fullWidth="false" %}

```
li-form = product
li-form:product =
```

{% endcode %}

{% endcolumn %}

{% column %}
{% code title="Shopify" overflow="wrap" fullWidth="false" %}

```liquid
{% form 'product', product, class: 'product_form' %}
      // your form content
{% endform %}
```

{% endcode %}

{% endcolumn %}
{% endcolumns %}

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](https://shopify.dev/docs/api/liquid/tags/html-tags) and soon in our own documentation.

Most forms are already included in the [Starter Template](https://docs.liquiflow.app/useful/liquiflow-starter-templates), making it convenient for you to reference them whenever needed.