# Theme forms
Source: https://support.storeconnect.com/articles/theme-forms · Last modified 21 August 2026
Forms are the primary interaction mechanism in StoreConnect. The `{% form %}` tag generates HTML forms with the correct action URL, CSRF protection, and field definitions — so you never need to write a raw `
```
**Common HTML options:**
| Option | Example | Purpose |
|--------|---------|---------|
| `class` | `class: "SC-Panel"` | CSS class on the form |
| `id` | `id: "checkout-form"` | HTML id attribute |
| `data-*` | `data-cart-form: true` | Custom data attributes for JavaScript hooks |
**Reserved options** (consumed internally, not passed to HTML): `url`, `method`, `format`, `scope`, `model`, `authenticity_token`, `local`, `builder`, `data`, `html`, `remote`, `data-remote`.
**Form-specific options** (consumed by the form type): For example, `product_id` for `add-to-cart`, `provider` for payment forms, `custom_form` for custom forms. These are extracted by the form handler and do not appear as HTML attributes.
## The form drop
Inside a `{% form %}` block, the `form` variable provides:
| Property | Type | Description |
|----------|------|-------------|
| `form.errors` | Array | Validation error messages |
| `form.[field_name]` | FieldDrop | Access to individual form fields |
| `form.[field_name].name` | String | The input `name` attribute value |
| `form.[field_name].value` | Any | The current or default value |
| `form.[field_name].label` | String | Human-readable label |
| `form.[field_name].id` | String | HTML id attribute |
| `form.[field_name].errors` | Array | Field-specific errors |
## Error handling
After a failed form submission, the form is re-displayed with errors. The `form.errors` array contains error messages:
```liquid
{% form "login" %}
{% render "form_errors", errors: form.errors %}
0 %}aria-invalid="true"{% endif %}
required>
{% endform %}
```
StoreConnect stashes form data on failed submissions so the page re-renders with fields pre-filled and `form.errors` populated. This happens automatically with `{% form %}`.
## CSRF protection
All forms require a CSRF token. The `{% form %}` tag includes it automatically as a hidden `authenticity_token` field. Your layout must include `{{ csrf_meta_tags }}` in the `` for AJAX requests:
```javascript
const token = document.querySelector('meta[name="csrf-token"]').content;
fetch('/cart/items', {
method: 'POST',
headers: {
'X-CSRF-Token': token,
'Content-Type': 'application/x-www-form-urlencoded'
},
body: new URLSearchParams({ product_id: '123', quantity: '1' })
});
```
:::warning
Never write a raw `