---
title: AppProxyForm
description: >-
  Sets up a Remix <Form> component that works when rendered on an app
  proxy page.
api_version: v4
source_url:
  html: >-
    https://shopify.dev/docs/api/shopify-app-remix/latest/app-proxy-components/appproxyform
  md: >-
    https://shopify.dev/docs/api/shopify-app-remix/latest/app-proxy-components/appproxyform.md
api_name: shopify-app-remix
---

# AppProxyForm

Sets up a Remix `<Form>` component that works when rendered on an app proxy page.

Supports any properties accepted by the `<Form>` component.

Because Remix doesn't support URL rewriting, any route using this component should **match the pathname of the proxy URL exactly**, and **end in a trailing slash** (e.g., `https://<shop>/apps/proxy/`), or set the Remix Form prop `navigate` to `false`.

Examples

### Examples

* ####

  ##### Description

  Use an \`AppProxyForm\` within an \`AppProxy\` to create a form.

  ##### /app/routes/apps/appProxy.ts

  ```ts
  import {
    AppProxyProvider,
    AppProxyForm,
  } from "@shopify/shopify-app-remix/react";
  import { authenticate } from "~/shopify.server";

  export async function loader({ request }) {
    await authenticate.public.appProxy(request);

    return json({ appUrl: process.env.SHOPIFY_APP_URL });
  }

  export async function action({ request }) {
    await authenticate.public.appProxy(request);

    const formData = await request.formData();
    const field = formData.get("field")?.toString();

    // Perform actions
    if (field) {
      console.log("Field:", field);
    }

    // Return JSON to the client
    return json({ message: "Success!" });
  }

  export default function App() {
    const { appUrl } = useLoaderData();

    return (
      <AppProxyProvider appUrl={appUrl}>
        <AppProxyForm action="/apps/appProxy" method="post">
          <input type="text" name="field" />

          <input type="submit" name="Submit" />
        </AppProxyForm>
      </AppProxyProvider>
    );
  }
  ```

***

## Related

[Authenticating app proxy requests. - authenticate.public.appProxy](https://shopify.dev/docs/api/shopify-app-remix/v4/authenticate/public/app-proxy)

[Enable JavaScript in pages loaded through app proxies. - AppProxyProvider](https://shopify.dev/docs/api/shopify-app-remix/v4/entrypoints/appproxyprovider)

***