website/functions/contact.ts

import staticFormsPlugin from "@cloudflare/pages-plugin-static-forms";

interface EmailDetails {
  fullName: string;
  organisation: string;
  email: string;
  mobile: string;
  message: string;
}

interface SendEmailWorker {
  sendEmail(rawMessage: EmailDetails): Promise<Response>;
}

interface Env {
  SERVICE: SendEmailWorker;
}

export const onRequest: PagesFunction<Env> = (context) => {
  // Wrap static forms plugin so we can extract the env to use email routing
  return staticFormsPlugin({
    respondWith: async ({ formData }) => {
      const fullName = formData.get("name");
      const organisation = formData.get("org");
      const email = formData.get("email");
      const mobile = formData.get("mobile");
      const message = formData.get("message");

      // Must have some kind of identifiable information for me to actually care about them.
      if ((fullName || email) && message) {
        // Don't await response so the client doesn't have to wait for email to send as it
        // feels unresponsive
        context.env.SERVICE.sendEmail({
          fullName,
          organisation,
          email,
          mobile,
          message,
        })
          .then(() => console.log("Sent email"))
          .catch((err) => console.error(err));
      }

      return Response.redirect("https://michaelpivato.dev");
    },
  })(context);
};