# 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](/useful/liquiflow-starter-templates.md), making it convenient for you to reference them whenever needed.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.liquiflow.app/liquid-attributes/forms.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.