{session.user?.name || 'No name set'}
{session.user?.email}
User ID: {session.user?.id}
{session.user?.name || 'No name set'}
{session.user?.email}
User ID: {session.user?.id}
Hi ${name},
Your message was received.
`, }); // If the message was sent successfully, return a 200 response if (sendResend.data) { return new Response( JSON.stringify({ message: `Message successfully sent!`, }), { status: 200, statusText: "OK", }, ); // If there was an error sending the message, return a 500 response } else { return new Response( JSON.stringify({ message: `Message failed to send: ${sendResend.error}`, }), { status: 500, statusText: `Internal Server Error: ${sendResend.error}`, }, ); } }; ``` :::note Make sure to change the 'to' property in 'resend.emails.send' function, if you set up your own domain in step 2. If you skipped that step, keep the value '[delivered@resend.dev](mailto:delivered@resend.dev)'; otherwise, Resend will throw an error. ::: ## 5. Create an Astro Form Component In the `src` directory, create a new folder called `components`. Inside the `components` folder, create a new file `AstroForm.astro` and copy the provided code into it. ```typescript --- export const prerender = false; type formData = { name: string; email: string; message: string; }; if (Astro.request.method === "POST") { try { const formData = await Astro.request.formData(); const response = await fetch(Astro.url + "/api/sendEmail.json", { method: "POST", body: formData, }); const data: formData = await response.json(); if (response.status === 200) { console.log(data.message); } } catch (error) { if (error instanceof Error) { console.error(`Error: ${error.message}`); } } } --- ``` This code creates an Astro component that renders a form and handles the form submission. When the form is submitted, the component will send a POST request to the `/api/sendEmail.json` endpoint created in the previous step with the form data. :::caution[File Extension] Astro requires an absolute URL, which is why you should use `Astro.url + "/api/sendEmail.json`. If you use a relative path the post request will fail. ::: Additionally, adding the `export const prerender = false;` will enable SSR; otherwise, the component will be static and unable to send a post request. If you don't enable it inside the component then you will need to enable SSR via the [template directive](https://docs.astro.build/en/reference/directives-reference/). After creating the `AstroForm` component, add the component to your main index file located in the `src/pages` directory. Below is an example of how the main index file should look with the `AstroForm` component added. ```typescript --- import AstroForm from '../components/AstroForm.astro' ---