Astro
Build forms with API routes
Build forms with API routes
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 an adapter for on-demand rendering
- A UI Framework integration installed
Recipe
This example sends a JSON object with a message back to the client.
```ts title="src/pages/api/feedback.ts" "request.formData()" "post"
export const prerender = false; // Not needed in 'server' mode
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 }
);
};
```Create a form component using your UI framework. Each input should have a
nameattribute that describes the value of that input.Be sure to include a
<button>or<input type="submit">element to submit the form.```tsx title="src/components/FeedbackForm.tsx" export default function Form() { return ( ); } ``` ```tsx title="src/components/FeedbackForm.tsx" export default function Form() { return ( ); } ``` ```tsx title="src/components/FeedbackForm.tsx" export default function Form() { return ( ); } ``` ```svelte title="src/components/FeedbackForm.svelte" ``` ```vue title="src/components/FeedbackForm.vue" ``` Create a function that accepts a submit event, then pass it as a
submithandler to your form.In the function:
- Call
preventDefault()on the event to override the browser's default submission process. - Create a
FormDataobject and send it in aPOSTrequest to your endpoint usingfetch().
```tsx title="src/components/FeedbackForm.tsx" "/api/feedback" add={1, 4-17, 34} add="onSubmit={submit}" "formData" "e.preventDefault();" 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> ); } ``````tsx title="src/components/FeedbackForm.tsx" "/api/feedback" add={1-2, 5-18, 35} add="onSubmit={submit}" "formData" "e.preventDefault();" import { useState } from "react"; import type { FormEvent } from "react"; export default function Form() { const [responseMessage, setResponseMessage] = useState(""); async function submit(e: FormEvent<HTMLFormElement>) { 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 htmlFor="name"> Name <input type="text" id="name" name="name" autoComplete="name" required /> </label> <label htmlFor="email"> Email <input type="email" id="email" name="email" autoComplete="email" required /> </label> <label htmlFor="message"> Message <textarea id="message" name="message" autoComplete="off" required /> </label> <button>Send</button> {responseMessage && <p>{responseMessage}</p>} </form> ); } ``````tsx title="src/components/FeedbackForm.tsx" "/api/feedback" add={1, 3-9, 13-19, 36} add="onSubmit={submit}" "formData" "e.preventDefault();" 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> ); } ``````svelte title="src/components/FeedbackForm.svelte" "/api/feedback" add={1-14, 30-32} add="on:submit={submit}" "formData" "e.preventDefault();" - Call