Send form as urlencoded to avoid multipart issues

functions/api/contact.ts

@@ -13,13 +13,33 @@ const jsonResponse = (data: Record<string, unknown>, status = 200) =>
 
 const readFormField = (value: FormDataEntryValue | null) =>
     typeof value === "string" ? value.trim() : "";
+const readTextField = (value: string | null) => (value ?? "").trim();
+
+const parseFormFields = async (request: Request) => {
+    const contentType = request.headers.get("content-type") ?? "";
+    if (contentType.includes("application/x-www-form-urlencoded")) {
+        const bodyText = await request.text();
+        const params = new URLSearchParams(bodyText);
+        return {
+            name: readTextField(params.get("name")),
+            email: readTextField(params.get("email")),
+            message: readTextField(params.get("message")),
+            turnstileToken: readTextField(params.get("cf-turnstile-response")),
+        };
+    }
+
+    const formData = await request.formData();
+    return {
+        name: readFormField(formData.get("name")),
+        email: readFormField(formData.get("email")),
+        message: readFormField(formData.get("message")),
+        turnstileToken: readFormField(formData.get("cf-turnstile-response")),
+    };
+};
 
 const handlePost: PagesFunction<Env> = async ({ request, env }) => {
-    const formData = await request.formData();
+    const { name, email, message, turnstileToken } =
-    const name = readFormField(formData.get("name"));
+        await parseFormFields(request);
-    const email = readFormField(formData.get("email"));
-    const message = readFormField(formData.get("message"));
-    const turnstileToken = readFormField(formData.get("cf-turnstile-response"));
 
     if (!name || !email || !message) {
         return jsonResponse(

public/contact-form.js

@@ -14,9 +14,19 @@
         message.textContent = "";
 
         try {
+            const formData = new FormData(form);
+            const body = new URLSearchParams();
+            for (const [key, value] of formData.entries()) {
+                if (typeof value === "string") {
+                    body.append(key, value);
+                }
+            }
             const response = await fetch(form.action, {
                 method: "POST",
-        body: new FormData(form),
+                headers: {
+                    "Content-Type": "application/x-www-form-urlencoded",
+                },
+                body,
             });
 
             if (!response.ok) {
@@ -39,7 +49,10 @@
 
             message.textContent = "Thanks! Your message has been sent.";
             form.reset();
-      if (window.turnstile && typeof window.turnstile.reset === "function") {
+            if (
+                window.turnstile &&
+                typeof window.turnstile.reset === "function"
+            ) {
                 window.turnstile.reset();
             }
         } catch (error) {