diff --git a/src/content/docs/en/recipes/build-forms-api.mdx b/src/content/docs/en/recipes/build-forms-api.mdx
new file mode 100644
index 0000000000000..d2cb25fc7715d
--- /dev/null
+++ b/src/content/docs/en/recipes/build-forms-api.mdx
@@ -0,0 +1,401 @@
+---
+title: Build Forms With API Routes
+description: Learn how to use JavaScript to send form submissions to an API Route
+i18nReady: false
+type: recipe
+---
+import UIFrameworkTabs from "~/components/tabs/UIFrameworkTabs.astro";
+import PackageManagerTabs from "~/components/tabs/PackageManagerTabs.astro"
+
+An HTML form causes the browser to refresh the page or navigate to a new one. To send form data to an API endpoint instead, you must intercept the form submission using JavaScript. 
+
+This recipe shows you how to send form data to an API endpoint and handle that data.
+
+## Prerequisites
+- A project with [SSR](/en/guides/server-side-rendering/) (`output: 'server'`) enabled
+- A [UI Framework integration](/en/core-concepts/framework-components/) installed
+
+## Recipe
+
+1. Create a form component using your UI framework. Each input should have a `name` attribute that describes the value of that input.
+
+    Be sure to include a `<button>` or `<input type="submit">` element to submit the form.
+    <UIFrameworkTabs>
+      <Fragment slot="preact">
+        ```tsx title="src/components/FeedbackForm.tsx"
+        export default function Form() {
+          return (
+            <form>
+              <label>
+                Name
+                <input type="text" id="name" name="name" required />
+              </label>
+              <label>
+                Email
+                <input type="email" id="email" name="email" required />
+              </label>
+              <label>
+                Message
+                <textarea id="message" name="message" required />
+              </label>
+              <button>Send</button>
+            </form>
+          );
+        }
+        ```
+      </Fragment>
+      <Fragment slot="react">
+        ```tsx title="src/components/FeedbackForm.tsx"
+        export default function Form() {
+          return (
+            <form>
+              <label>
+                Name
+                <input type="text" id="name" name="name" required />
+              </label>
+              <label>
+                Email
+                <input type="email" id="email" name="email" required />
+              </label>
+              <label>
+                Message
+                <textarea id="message" name="message" required />
+              </label>
+              <button>Send</button>
+            </form>
+          );
+        }
+        ```
+      </Fragment>
+      <Fragment slot="solid">
+        ```tsx title="src/components/FeedbackForm.tsx"
+        export default function Form() {
+          return (
+            <form>
+              <label>
+                Name
+                <input type="text" id="name" name="name" required />
+              </label>
+              <label>
+                Email
+                <input type="email" id="email" name="email" required />
+              </label>
+              <label>
+                Message
+                <textarea id="message" name="message" required />
+              </label>
+              <button>Send</button>
+            </form>
+          );
+        }
+        ```
+      </Fragment>
+      <Fragment slot="svelte">
+        ```svelte title="src/components/FeedbackForm.svelte"
+        <form>
+          <label>
+            Name
+            <input type="text" id="name" name="name" required />
+          </label>
+          <label>
+            Email
+            <input type="email" id="email" name="email" required />
+          </label>
+          <label>
+            Message
+            <textarea id="message" name="message" required />
+          </label>
+          <button>Send</button>
+        </form>
+        ```
+      </Fragment>
+      <Fragment slot="vue">
+        ```vue title="src/components/FeedbackForm.vue"
+        <template>
+          <form>
+            <label>
+              Name
+              <input type="text" id="name" name="name" required />
+            </label>
+            <label>
+              Email
+              <input type="email" id="email" name="email" required />
+            </label>
+            <label>
+              Message
+              <textarea id="message" name="message" required />
+            </label>
+            <button>Send</button>
+          </form>
+        </template>
+        ```
+      </Fragment>
+
+    </UIFrameworkTabs>
+
+  2. Create the `post` API endpoint that will receive the form data. Use `request.formData()` to process it. Be sure to validate the form values before you use them. 
+  
+        This example sends a JSON object with a message back to the client.
+
+      ```ts title="src/pages/api/feedback.ts" "request.formData()" "post"
+      import type { APIRoute } from "astro";
+
+      export const post: APIRoute = async ({ request }) => {
+        const data = await request.formData();
+        const name = data.get("name");
+        const email = data.get("email");
+        const message = data.get("message");
+        // Validate the data - you'll probably want to do more than this
+        if (!name || !email || !message) {
+          return new Response(
+            JSON.stringify({
+              message: "Missing required fields",
+            }),
+            { status: 400 }
+          );
+        }
+        // Do something with the data, then return a success response
+        return new Response(
+          JSON.stringify({
+            message: "Success!"
+          }),
+          { status: 200 }
+        );
+      };
+      ```
+
+  3. Create a function that accepts a submit event, then pass it as a `submit` event handler to your form. In the function, call `preventDefault` on the event to override the browser's default submission process. 
+  
+      Then, create a `FormData` object and send it to your endpoint using `fetch`.
+
+        <UIFrameworkTabs>
+          <Fragment slot="preact">
+            ```tsx title="src/components/FeedbackForm.tsx"
+            import { useState } from "preact/hooks";
+
+            export default function Form() {
+              const [responseMessage, setResponseMessage] = useState("");
+
+              async function submit(e: SubmitEvent) {
+                e.preventDefault();
+                const formData = new FormData(e.target as HTMLFormElement);
+                const response = await fetch("/api/feedback", {
+                  method: "POST",
+                  body: formData,
+                });
+                const data = await response.json();
+                if (data.message) {
+                  setResponseMessage(data.message);
+                }
+              }
+
+              return (
+                <form onSubmit={submit}>
+                  <label>
+                    Name
+                    <input type="text" id="name" name="name" required />
+                  </label>
+                  <label>
+                    Email
+                    <input type="email" id="email" name="email" required />
+                  </label>
+                  <label>
+                    Message
+                    <textarea id="message" name="message" required />
+                  </label>
+                  <button>Send</button>
+                  {responseMessage && <p>{responseMessage}</p>}
+                </form>
+              );
+            }
+
+            ```
+          </Fragment>
+          <Fragment slot="react">
+            ```tsx title="src/components/FeedbackForm.tsx"
+            import { useState } from "react";
+
+            export default function Form() {
+              const [responseMessage, setResponseMessage] = useState("");
+
+              async function submit(e: SubmitEvent) {
+                e.preventDefault();
+                const formData = new FormData(e.target as HTMLFormElement);
+                const response = await fetch("/api/feedback", {
+                  method: "POST",
+                  body: formData,
+                });
+                const data = await response.json();
+                if (data.message) {
+                  setResponseMessage(data.message);
+                }
+              }
+
+              return (
+                <form onSubmit={submit}>
+                  <label>
+                    Name
+                    <input type="text" id="name" name="name" required />
+                  </label>
+                  <label>
+                    Email
+                    <input type="email" id="email" name="email" required />
+                  </label>
+                  <label>
+                    Message
+                    <textarea id="message" name="message" required />
+                  </label>
+                  <button>Send</button>
+                  {responseMessage && <p>{responseMessage}</p>}
+                </form>
+              );
+            }
+            ```
+          </Fragment>
+          <Fragment slot="solid">
+            ```tsx title="src/components/FeedbackForm.tsx"
+            import { createSignal, createResource, Suspense } from "solid-js";
+
+            async function postFormData(formData: FormData) {
+              const response = await fetch("/api/feedback", {
+                method: "POST",
+                body: formData,
+              });
+              const data = await response.json();
+              return data;
+            }
+
+            export default function Form() {
+              const [formData, setFormData] = createSignal<FormData>();
+              const [response] = createResource(formData, postFormData);
+
+              function submit(e: SubmitEvent) {
+                e.preventDefault();
+                setFormData(new FormData(e.target as HTMLFormElement));
+              }
+
+              return (
+                <form onSubmit={submit}>
+                  <label>
+                    Name
+                    <input type="text" id="name" name="name" required />
+                  </label>
+                  <label>
+                    Email
+                    <input type="email" id="email" name="email" required />
+                  </label>
+                  <label>
+                    Message
+                    <textarea id="message" name="message" required />
+                  </label>
+                  <button>Send</button>
+                  <Suspense>{response() && <p>{response().message}</p>}</Suspense>
+                </form>
+              );
+            }
+
+            ```
+          </Fragment>
+          <Fragment slot="svelte">
+            ```svelte title="src/components/FeedbackForm.svelte"
+            <script lang="ts">
+              let responseMessage: string;
+
+              async function submit(e: SubmitEvent) {
+                e.preventDefault();
+                const formData = new FormData(e.currentTarget as HTMLFormElement);
+                const response = await fetch("/api/feedback", {
+                  method: "POST",
+                  body: formData,
+                });
+                const data = await response.json();
+                responseMessage = data.message;
+              }
+            </script>
+
+            <form on:submit={submit}>
+              <label>
+                Name
+                <input type="text" id="name" name="name" required />
+              </label>
+              <label>
+                Email
+                <input type="email" id="email" name="email" required />
+              </label>
+              <label>
+                Message
+                <textarea id="message" name="message" required />
+              </label>
+              <button>Send</button>
+              {#if responseMessage}
+                <p>{responseMessage}</p>
+              {/if}
+            </form>
+                ```
+          </Fragment>
+          <Fragment slot="vue">
+            ```vue title="src/components/FeedbackForm.vue"
+            <script setup lang="ts">
+            import { ref } from "vue";
+
+            const responseMessage = ref<string>();
+
+            async function submit(e: Event) {
+              e.preventDefault();
+              const formData = new FormData(e.currentTarget as HTMLFormElement);
+              const response = await fetch("/api/feedback", {
+                method: "POST",
+                body: formData,
+              });
+              const data = await response.json();
+              responseMessage.value = data.message;
+            }
+            </script>
+            <template>
+              <form @submit="submit">
+                <label>
+                  Name
+                  <input type="text" id="name" name="name" required />
+                </label>
+                <label>
+                  Email
+                  <input type="email" id="email" name="email" required />
+                </label>
+                <label>
+                  Message
+                  <textarea id="message" name="message" required />
+                </label>
+                <button>Send</button>
+                <p v-if="responseMessage">{{ responseMessage }}</p>
+              </form>
+            </template>
+            ```
+          </Fragment>
+
+        </UIFrameworkTabs>
+
+{/* ## Extension: Use Zod to validate your form
+
+[Zod form data](https://www.npmjs.com/package/zod-form-data) builds on top of [Zod](https://github.com/colinhacks/zod) to validate your form using a schema. This simplifies your code, as it allows you to declare the fields and their requirements, and let Zod handle the validation.
+
+1. Install `zod` and `zod-form-data`.
+
+    <PackageManagerTabs>
+      <Fragment slot="npm">
+        ```shell
+          npm i zod zod-form-data
+        ```
+      </Fragment>
+      <Fragment slot="pnpm">
+        ```shell
+          pnpm i zod zod-form-data
+        ```
+      </Fragment>
+      <Fragment slot="yarn">
+        ```shell
+          yarn add zod zod-form-data
+        ```
+      </Fragment>
+    </PackageManagerTabs>
+
+2. In your API Route file, declare your schema using `zfd.formData` and export it. */}
diff --git a/src/content/docs/en/recipes/build-forms.mdx b/src/content/docs/en/recipes/build-forms.mdx
new file mode 100644
index 0000000000000..aad44fdb1ae98
--- /dev/null
+++ b/src/content/docs/en/recipes/build-forms.mdx
@@ -0,0 +1,204 @@
+---
+title: Build HTML Forms in Astro Pages
+description: Learn how to build HTML forms and handle submissions in your frontmatter
+i18nReady: false
+type: recipe
+---
+
+In SSR mode, Astro pages can both display and handle forms. In this recipe, you'll use a standard HTML form to submit data to the server. Your frontmatter script will handle the data on the server, sending no JavaScript to the client.
+
+
+## Prerequisites
+- A project with [SSR](/en/guides/server-side-rendering/) (`output: 'server'`) enabled
+
+## Recipe
+
+1. Create or identify a `.astro` page which will contain your form and your handling code. For example, you could add a registration page:
+
+    ```astro title="src/pages/register.astro"
+    ---
+    ---
+    <h1>Register</h1>
+    ```
+
+2. Add a `<form>` tag with some inputs to the page. Each input should have a `name` attribute that describes the value of that input. 
+
+    Be sure to include a `<button>` or `<input type="submit">` element to submit the form.
+
+    ```astro title="src/pages/register.astro"
+    ---
+    ---
+    <h1>Register</h1>
+    <form>
+      <label>
+        Username:
+        <input type="text" name="username" />
+      </label>
+      <label>
+        Email:
+        <input type="email" name="email" />
+      </label>
+      <label>
+        Password:
+        <input type="password" name="password" />
+      </label>
+      <button>Submit</button>
+    </form>
+    ```
+
+3. Use [validation attributes](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#using_built-in_form_validation) to provide basic client-side validation that works even if JavaScript is disabled. 
+
+    In this example,
+    - `required` prevents form submission until the field is filled. 
+    - `minlength` sets a minimum required length for the input text.
+    - `type="email"` also introduces validation that will only accept a valid email format.
+
+    ```astro title="src/pages/register.astro"
+    ---
+    ---
+    <h1>Register</h1>
+    <form>
+      <label>
+        Username:
+        <input type="text" name="username" required />
+      </label>
+      <label>
+        Email:
+        <input type="email" name="email" required />
+      </label>
+      <label>
+        Password:
+        <input type="password" name="password" required minlength="6" />
+      </label>
+      <button>Submit</button>
+    </form>
+    ```
+    
+    :::tip
+    You can add custom validation logic that refers to multiple fields using a `<script>` tag and the [Constraint Validation API](https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#complex_constraints_using_the_constraint_validation_api).
+
+    To write complex validation logic more easily, you can build your form using a [frontend framework](/en/core-concepts/framework-components/) and choose a form library like [React Hook Form](https://react-hook-form.com/) or [Felte](https://felte.dev/).
+    :::
+
+4. The form submission will cause the browser to request the page again. Change the form's data transfer `method` to `POST` to send the form data as part of the `Request` body, rather than as URL parameters.
+
+    ```astro title="src/pages/register.astro" 'method="POST"'
+    ---
+    ---
+    <h1>Register</h1>
+    <form method="POST">
+      <label>
+        Username:
+        <input type="text" name="username" required />
+      </label>
+      <label>
+        Email:
+        <input type="email" name="email" required />
+      </label>
+      <label>
+        Password:
+        <input type="password" name="password" required minlength="6" />
+      </label>
+      <button>Submit</button>
+    </form>
+    ```
+
+5.  Check for the `POST` method in the frontmatter and access the form data using `Astro.request.formData()`. Wrap this in a `try ... catch` block to handle cases when the `POST` request wasn't sent by a form and the ``formData is invalid.
+
+    ```astro title="src/pages/register.astro" ins={2-14} "Astro.request.formData()"
+    ---
+    if (Astro.request.method === "POST") {
+      try {
+        const data = await Astro.request.formData();
+        const name = data.get("username");
+        const email = data.get("email");
+        const message = data.get("password");
+        // Do something with the data
+      } catch (error) {
+        if (error instanceof Error) {
+          console.error(error.message);
+        }
+      }
+    }
+    ---
+    <h1>Register</h1>
+    <form method="POST">
+      <label>
+        Username:
+        <input type="text" name="username" required />
+      </label>
+      <label>
+        Email:
+        <input type="email" name="email" required />
+      </label>
+      <label>
+        Password:
+        <input type="password" name="password" required minlength="6" />
+      </label>
+      <button>Submit</button>
+    </form>
+    ```
+
+5. Validate the form data on the server. This should include the same validation done on the client to prevent malicious submissions to your endpoint and to support the rare legacy browser that doesn't have form validation. 
+
+    It can also include validation that can't be done on the client. For example, this example checks if the email is already in the database. 
+
+    Error messages can be sent back to the client by storing them in an `errors` object and accessing it in the template. 
+
+    ```astro title="src/pages/register.astro" ins={5, 12-22, 40, 45, 50}
+    ---
+    import { isRegistered, registerUser } from "../../data/users"
+    import { isValidEmail } from "../../utils/isValidEmail";
+
+    const errors = { username: "", email: "", password: "" };
+    if (Astro.request.method === "POST") {
+      try {
+        const data = await Astro.request.formData();
+        const name = data.get("username");
+        const email = data.get("email");
+        const password = data.get("password");
+        if (typeof name !== "string" || name.length < 1) {
+          errors.username += "Please enter a username. ";
+        }
+        if (typeof email !== "string" || !isValidEmail(email)) {
+          errors.email += "Email is not valid. ";
+        } else if (await isRegistered(email)) {
+          errors.email += "Email is already registered. ";
+        }
+        if (typeof password !== "string" || password.length < 6) {
+          errors.password += "Password must be at least 6 characters. ";
+        }
+        if (!Object.keys(errors).length) {
+          await registerUser({name, email, password});
+          Astro.redirect("/login")
+        }
+      } catch (error) {
+        if (error instanceof Error) {
+          console.error(error.message);
+        }
+      }
+    }
+    ---
+    <h1>Register</h1>
+    <form method="POST">
+      <label>
+        Username:
+        <input type="text" name="username" />
+      </label>
+      {errors.username && <p>{errors.username}</p>}
+      <label>
+        Email:
+        <input type="email" name="email" required />
+      </label>
+      {errors.email && <p>{errors.email}</p>}
+      <label>
+        Password:
+        <input type="password" name="password" required minlength="6" />
+      </label>
+      {errors.password && <p>{errors.password}</p>}
+      <button>Register</button>
+    </form>
+
+    ```
+
+