# Hooks (/themes/sdk/reference/forms/hooks)

```ts
import { … } from '@poltura/theme-sdk/forms';
```

## `useStoreForm` [#usestoreform]

The surrounding form's state and actions, for your own fields and buttons inside [`StoreForm`](/themes/sdk/reference/forms/defaults#storeform).

```ts
useStoreForm(): StoreFormState
```

Throws outside a `StoreForm`.

**Returns:** The form, its values and errors, and the actions that fill it in and send it.

**Example**

```tsx
import { FormField, StoreForm, useStoreForm } from '@poltura/theme-sdk/forms';

function Fields() {
  const form = useStoreForm();
  return (
    <>
      {form.fields.map((field) => (
        <FormField key={field.id} id={field.id} />
      ))}
      <button type="submit" disabled={form.submitting}>
        {form.submitting ? form.texts.submitting : form.texts.submit}
      </button>
    </>
  );
}

export function Enquiry() {
  return (
    <StoreForm handle="contact">
      <Fields />
    </StoreForm>
  );
}
```

## `useStoreFormField` [#usestoreformfield]

One field of the surrounding form, for a control of your own.

```ts
useStoreFormField(id: string): StoreFormFieldState
```

**Parameters**

- `id: string`: The field id.

**Returns:** The field, its value and error, and the setter.

**Example**

```tsx
import { useStoreFormField } from '@poltura/theme-sdk/forms';

export function EmailInput() {
  const email = useStoreFormField('email');
  if (!email.visible) return null;
  return (
    <input
      type="email"
      aria-label={email.field?.label}
      value={typeof email.value === 'string' ? email.value : ''}
      onChange={(event) => email.setValue(event.target.value)}
    />
  );
}
```

## `useFormActions` [#useformactions]

The actions that open a merchant's form in a dialog or side panel.

```ts
useFormActions(): FormActions
```

**Returns:** `openForm` and `preloadForm`.

**Example**

```tsx
import { useFormActions } from '@poltura/theme-sdk/forms';

export function SizeHelpLink() {
  const { openForm } = useFormActions();
  return (
    <button type="button" onClick={(event) => openForm({ handle: 'size-help', display: 'drawer' }, event.currentTarget)}>
      Ask about sizes
    </button>
  );
}
```

## `useNewsletter` [#usenewsletter]

The store's newsletter: whether it takes sign-ups and the wording to ask with.

```ts
useNewsletter(): NewsletterState
```

**Returns:** The newsletter state.

**Example**

```tsx
import { NewsletterTrigger, useNewsletter } from '@poltura/theme-sdk/forms';

export function SignUpTeaser() {
  const newsletter = useNewsletter();
  if (!newsletter.visible) return null;
  return (
    <aside>
      <h2>{newsletter.texts.heading}</h2>
      <NewsletterTrigger>{newsletter.texts.button}</NewsletterTrigger>
    </aside>
  );
}
```