This guide shows you how to use a cart handler to apply a note to a cart. For example, you can enable users to apply a note that requests gift-wrapping.

## Requirements

- You've completed the [quickstart guide](/docs/storefronts/headless/hydrogen/getting-started).
- You've [set up a cart handler](/docs/storefronts/headless/hydrogen/cart/setup).

## Step 1: Create a cart note form

Use the [`CartForm`](/docs/api/hydrogen/latest/components/cartform) component to create a cart note form. The component submits a form request to the `/cart` route's action when users submit an update to the note. You can use this component anywhere in the app.


```jsx?title: 'JavaScript', filename: '/app/components/NoteForm.jsx'
import {CartForm} from '@shopify/hydrogen';

export default function NoteForm() {
  return (
    <CartForm
      route="/cart"
      action={CartForm.ACTIONS.NoteUpdate}
    >
      <p>Provide a short message for the gift tag:</p>
      <input type="text" name="note" />
      <button>Update note</button>
    </CartForm>
  );
}
```

```jsx?title: 'TypeScript', filename: '/app/components/NoteForm.tsx'
import {CartForm} from '@shopify/hydrogen';

export default function NoteForm() {
  return (
    <CartForm
      route="/cart"
      action={CartForm.ACTIONS.NoteUpdate}
    >
      <p>Provide a short message for the gift tag:</p>
      <input type="text" name="note" />
      <button>Update note</button>
    </CartForm>
  );
}
```



## Step 2: Handle the cart note form request

Handle the cart note form request in an `action`. Use the `cart`, created from [`createCartHandler`](/docs/api/hydrogen/latest/utilities/createcarthandler), to handle cart mutation requests to the Storefront API.


```jsx?title: 'JavaScript', filename: '/app/routes/cart.jsx'
import {CartForm} from '@shopify/hydrogen';
import invariant from 'tiny-invariant';

export async function action({request, context}) {
  const {cart} = context;

  const formData = await request.formData();
  const {action, inputs} = CartForm.getFormInput(formData);

  let result;

  switch(action) {
    case CartForm.ACTIONS.NoteUpdate:
      const note = String(formData.get('note') || '');
      result = await cart.updateNote(note);
      break;
    default:
      invariant(false, `${action} cart action is not defined`);
  }

  // The Cart ID might change after each mutation, so update it each time.
  const headers = cart.setCartId(result.cart.id);

  return json(
    result,
    {status: 200, headers},
  );
}
```

```jsx?title: 'TypeScript', filename: '/app/routes/cart.tsx'
import {
  type CartQueryData,
  CartForm,
} from '@shopify/hydrogen';
import invariant from 'tiny-invariant';

export async function action({request, context}: ActionArgs) {
  const {cart} = context;

  const formData = await request.formData();
  const {action, inputs} = CartForm.getFormInput(formData);

  let result: CartQueryData;

  switch(action) {
    case CartForm.ACTIONS.NoteUpdate:
      const note = String(formData.get('note') || '');
      result = await cart.updateNote(note);
      break;
    default:
      invariant(false, `${action} cart action is not defined`);
  }

  // The Cart ID might change after each mutation, so update it each time.
  const headers = cart.setCartId(result.cart.id);

  return json(
    result,
    {status: 200, headers},
  );
}
```



## Next steps

- Learn how to [apply cart attributes](/docs/storefronts/headless/hydrogen/cart/attributes).