# Parts (/themes/sdk/reference/forms/parts)

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

## `FormField` [#formfield]

One field of the surrounding form with its label, control, help and error; nothing while hidden.

```ts
FormField(props: FormFieldProps): ReactElement | null
```

**Props:** [`FormFieldProps`](/themes/sdk/reference/forms/types-2#formfieldprops)

**Example**

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

export function ShortContact() {
  return (
    <StoreForm handle="contact">
      <FormField id="email" />
      <FormField id="message" />
      <SubmitButton />
    </StoreForm>
  );
}
```

## `FieldControl` [#fieldcontrol]

The platform control of one field: input, text area, choices, checkbox, date or file picker.

```ts
FieldControl(props: FieldControlProps): ReactElement
```

**Props:** [`FieldControlProps`](/themes/sdk/reference/forms/types-2#fieldcontrolprops)

**Example**

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

export function FramedMessage() {
  return (
    <FormField id="message">
      {(state) => (
        <div className="rounded border p-3">
          <FieldControl field={state.field} value={state.value} error={state.error} onChange={state.setValue} />
        </div>
      )}
    </FormField>
  );
}
```

## `SubmitButton` [#submitbutton]

The surrounding form's send button, which moves to the next step on multi-step forms.

```ts
SubmitButton(props: SubmitButtonProps): ReactElement
```

**Props:** [`SubmitButtonProps`](/themes/sdk/reference/forms/types-2#submitbuttonprops)

**Example**

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

export function Callback() {
  return (
    <StoreForm handle="callback">
      <FormField id="phone" />
      <SubmitButton>Call me back</SubmitButton>
    </StoreForm>
  );
}
```

## `FormTrigger` [#formtrigger]

A button that opens a published form in a dialog or side panel, loading it on hover.

```ts
FormTrigger(props: FormTriggerProps): ReactElement
```

**Props:** [`FormTriggerProps`](/themes/sdk/reference/forms/types-2#formtriggerprops)

**Example**

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

export function QuoteButton() {
  return (
    <FormTrigger handle="quote" display="drawer" width="wide">
      Request a quote
    </FormTrigger>
  );
}
```

## `FormPopup` [#formpopup]

Opens a merchant's form by itself after a delay, as often as `frequency` allows; draws nothing.

```ts
FormPopup(props: FormPopupProps): ReactElement | null
```

It never opens in the editor, on checkout, or while the store holds visitor popups back.

**Props:** [`FormPopupProps`](/themes/sdk/reference/forms/types-2#formpopupprops)

**Example**

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

export function NewsletterPrompt() {
  return <FormPopup handle='newsletter' delaySeconds={20} frequency='days' />;
}
```

## `NewsletterTrigger` [#newslettertrigger]

A button that opens the newsletter sign-up in a dialog or side panel; nothing when the newsletter is off.

```ts
NewsletterTrigger(props: NewsletterTriggerProps): ReactElement | null
```

**Props:** [`NewsletterTriggerProps`](/themes/sdk/reference/forms/types-2#newslettertriggerprops)

**Example**

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

export function JoinButton() {
  return <NewsletterTrigger display="drawer">Join the list</NewsletterTrigger>;
}
```