Hi, I am setting up the email integration at the moment. I have a contact form on my site and I want to do three things when the user submits the form.
- Send an email using Postmark to the user
- Submit the form to Netlify forms
- Redirect the user to a specific route
Website: https://okok-lp.netlify.app (production, only form enabled so far)
Branch deploy: https://deploy-preview-9--okok-lp.netlify.app (form and email integration enabled)
The form is working fine and the user is redirected to the form when the form is submitted using the action attribute.
<form
name="contact"
action="/success"
method="POST"
data-netlify="true">
So far, so good. I added the Postmark email integration using the Netlify UI, added a template, and sent a test email using the local dev server and the “Preview UI”. Everything working fine.
I added a function to send the welcome email to my “netlify/functions” folder and it looks like this:
import type { Handler } from "@netlify/functions";
import { sendEmail } from "@netlify/emails";
const handler: Handler = async function (event) {
if (event.body === null) {
return {
statusCode: 400,
body: JSON.stringify("Payload required"),
};
}
const requestBody = JSON.parse(event.body) as {
name: string;
email: string;
};
await sendEmail({
from: "x@y.z", // redacted
to: requestBody.email,
subject: `Hello ${requestBody.name}, thank you for your inquiry!`,
template: "welcome",
parameters: {
name: requestBody.name,
},
});
return {
statusCode: 200,
body: JSON.stringify("Welcome email sent!"),
};
};
export { handler };
On the page with my form, I added this code to trigger the function:
form.addEventListener("submit", async (event) => {
event.preventDefault();
const formData = new FormData(form);
try {
const response = await fetch("/.netlify/functions/triggerWelcomeEmail", {
method: "POST",
body: JSON.stringify({
name: formData.get("name"),
email: formData.get("email"),
}),
});
if (response.ok) {
console.log("Email sent successfully");
form.submit();
} else {
console.error("Error sending email");
}
} catch (error) {
console.error(error);
}
});
On the netlify dev server, this setup works almost correctly. When form is submitted the function is triggered and the email is sent. However, the user is redirected to a blank page “Function not found…” with the route “/success”. When I reload the page the correct page is loaded.
When I create a branch deploy with the same code the email integration fails with this error:
Sep 5, 08:25:21 PM: INIT_START Runtime Version: nodejs:16.v17 Runtime Version ARN: arn:aws:lambda:us-east-1::runtime:96f95344fddd7e2267f42f2bcf8be9879aa43babe436b7d63ffe2ff1effeb0de
Sep 5, 08:25:21 PM: 36023d4b INFO Email handler received email request from path https://www.okok.digital/.netlify/functions/emails/welcome
Sep 5, 08:25:21 PM: 36023d4b ERROR Email handler detected missing configuration: NETLIFY_EMAILS_PROVIDER, NETLIFY_EMAILS_PROVIDER_API_KEY
Sep 5, 08:25:21 PM: 36023d4b Duration: 4.73 ms Memory Usage: 60 MB Init Duration: 200.34 ms
I am pretty sure that all environment variables are present because they show up in the Netlify UI for all scopes and contexts and were added by the Netlify UI through the email integration and they are working on my dev server.
On the local dev server the same action results in this log:
Request from ::1: POST /.netlify/functions/triggerWelcomeEmail
Request from ::1: POST /.netlify/functions/emails/welcome
Email handler received email request from path http://localhost:8888/.netlify/functions/emails/welcome
Response with status 200 in 2453 ms.
Response with status 200 in 2489 ms.
› Warning: Missing form submission function handler
Request from ::1: POST /success
Response with status 404 in 1 ms.
› Warning: Missing form submission function handler
Request from ::1: POST /success.html
Response with status 404 in 0 ms.
› Warning: Missing form submission function handler
Request from ::1: POST /success.htm
Response with status 404 in 0 ms.
› Warning: Missing form submission function handler
Request from ::1: POST /success/index.html
Response with status 404 in 0 ms.
› Warning: Missing form submission function handler
Request from ::1: POST /success/index.htm
Response with status 404 in 0 ms.
Does anybody have an idea what I am doing wrong here?
To clarify I have two issues:
- Emails are not sent from the branch deploy (working fine from dev server)
- User is not redirected on the dev server, (works fine on production without the email integration).
Thanks for any help!